Optymalizacja grafik pod SEO ma trzy cele: obraz powinien pomagać użytkownikowi, być dostępny dla wyszukiwarki i nie powodować niepotrzebnego obciążenia strony. Nie wystarczy zmienić nazwy pliku ani wpisać frazy do tekstu alternatywnego.
Inaczej należy przygotować zdjęcie produktu, logo, zrzut ekranu, wykres i dekoracyjne tło. Każdy z tych materiałów pełni inną funkcję i wymaga innej decyzji dotyczącej formatu, jakości oraz opisu.
Najpierw ustal funkcję obrazu
Przed przesłaniem pliku do CMS odpowiedz na pytanie, co użytkownik ma z niego odczytać. Grafika może:
- pokazywać wygląd produktu,
- wyjaśniać proces,
- przedstawiać dane,
- potwierdzać wykonanie realizacji,
- ułatwiać wybór wariantu,
- pełnić wyłącznie funkcję dekoracyjną.
Jeżeli obraz zawiera kluczową informację, treść powinna być dostępna również w formie tekstowej. Cennik, warunki usługi albo parametry produktu umieszczone wyłącznie w grafice są trudniejsze do odczytania, aktualizowania i udostępniania osobom korzystającym z technologii wspomagających.
Jaki format pliku wybrać?
JPEG
Nadal sprawdza się przy zdjęciach i materiałach z dużą liczbą kolorów. Pozwala mocno zmniejszyć rozmiar, ale nie obsługuje przezroczystości i stosuje kompresję stratną.
WebP i AVIF
Nowoczesne formaty mogą zapewnić mniejszy plik przy zachowaniu dobrej jakości. Przed masową zmianą trzeba sprawdzić obsługę przez CMS, generowanie miniaturek, CDN oraz przeglądarki ważne dla użytkowników serwisu.
PNG
Przydaje się przy przezroczystości, zrzutach interfejsu i prostych grafikach wymagających ostrych krawędzi. Zwykłe zdjęcie zapisane jako PNG często ma niepotrzebnie dużą masę.
SVG
Jest odpowiedni dla logo, ikon i prostych ilustracji wektorowych. Pliki SVG trzeba pozyskiwać z zaufanego źródła i prawidłowo zabezpieczyć możliwość przesyłania ich do CMS.
GIF
Długi animowany GIF może być znacznie cięższy niż materiał wideo. Przy rozbudowanej animacji lepiej rozważyć format wideo i zapewnić sterowanie odtwarzaniem.
Nie istnieje jeden najlepszy format dla wszystkich zastosowań. Decyzję należy podjąć po porównaniu jakości, masy oraz zgodności z systemem.
Wymiary obrazu i wersje responsywne
Plik powinien odpowiadać rozmiarowi, w jakim jest wyświetlany. Przesyłanie zdjęcia o szerokości 5000 pikseli do modułu zajmującego 600 pikseli powoduje niepotrzebny transfer.
Jednocześnie jedna mała wersja może wyglądać źle na większym ekranie. Rozwiązaniem są warianty responsywne przekazywane przez atrybuty srcset i sizes. Przeglądarka może wtedy wybrać plik dopasowany do ekranu oraz układu strony.
Po zmianie motywu trzeba sprawdzić, czy CMS nadal generuje potrzebne rozmiary i czy kod nie wybiera zawsze największej wersji.
Szerokość, wysokość i stabilność układu
Podanie wymiarów obrazu albo proporcji pozwala przeglądarce wcześniej zarezerwować miejsce. Ogranicza to przesuwanie treści podczas ładowania, mierzone między innymi przez CLS.
Samo dodanie atrybutów width i height nie oznacza, że obraz przestanie być responsywny. CSS może skalować go do dostępnej szerokości przy zachowaniu proporcji.
Kompresja bez widocznej utraty jakości
Poziom kompresji powinien wynikać z rodzaju materiału. Zdjęcie tła może zaakceptować większą stratę niż fotografia produktu, na której klient ocenia fakturę i detale.
Praktyczny proces:
- Przytnij zbędny obszar.
- Ustaw maksymalne potrzebne wymiary.
- Wybierz format odpowiedni dla zawartości.
- Porównaj kilka poziomów jakości w docelowym rozmiarze.
- Sprawdź wygląd na telefonie i większym ekranie.
- Zweryfikuj masę pliku po zapisaniu przez CMS lub CDN.
Nie należy oceniać obrazu wyłącznie w powiększeniu 400%. Ważny jest wygląd w miejscu faktycznego użycia.
Jak napisać tekst alternatywny?
Tekst alt opisuje istotną zawartość i funkcję obrazu osobie, która go nie widzi. Powinien zależeć od kontekstu.
Przykłady:
- zdjęcie produktu: nazwa modelu i widoczny wariant,
- wykres: najważniejszy wniosek z danych, jeśli nie został podany obok,
- zrzut ekranu: widok i element wskazywany w instrukcji,
- ikona w linku: cel działania, jeśli nie ma widocznego tekstu,
- obraz dekoracyjny: pusty atrybut
alt="".
Nie ma potrzeby dodawania do każdego opisu nazwy firmy, miasta i frazy głównej. Tekst „pozycjonowanie stron SEO firma tanio Warszawa” nie opisuje obrazu i utrudnia korzystanie ze strony.
Nazwa pliku i adres obrazu
Czytelna nazwa pomaga zarządzać biblioteką i może dostarczyć dodatkowego kontekstu. Lepiej użyć nazwy audyt-seo-raport-indeksowania.webp niż IMG_8472.webp.
Nie warto jednak zmieniać adresów już opublikowanych obrazów wyłącznie dla nazwy pliku, jeśli prowadzi to do błędów i utraty istniejących odwołań. W pierwszej kolejności poprawiaj nowe materiały oraz pliki powodujące konkretny problem.
Obraz powinien mieć kontekst tekstowy
Google analizuje stronę, na której znajduje się obraz. Pomagają więc:
- trafny tytuł i temat strony,
- tekst znajdujący się obok grafiki,
- podpis, gdy dostarcza dodatkowej informacji,
- logiczna nazwa pliku,
- tekst alternatywny odpowiadający funkcji obrazu.
Zdjęcie produktu umieszczone na szczegółowej karcie ma czytelniejszy kontekst niż ten sam plik dodany do przypadkowej galerii bez opisu.
Lazy loading: których obrazów nie opóźniać?
Leniwe ładowanie ogranicza pobieranie materiałów znajdujących się poza widocznym obszarem. Jest przydatne przy długich artykułach i listach produktów.
Nie należy bezrefleksyjnie opóźniać obrazu głównego widocznego od razu po otwarciu strony. Jeżeli jest on elementem LCP, lazy loading może opóźnić jego pobranie. Priorytetowe ładowanie powinno dotyczyć tylko rzeczywiście krytycznych zasobów, ponieważ oznaczenie wielu plików jako najważniejszych przestaje pomagać.
Obrazy ładowane przez CSS i JavaScript
Istotne zdjęcie treściowe najlepiej umieścić jako element obrazu w kodzie HTML. Tło ładowane przez CSS nadaje się do dekoracji, ale utrudnia przekazanie tekstu alternatywnego.
Galerie i zdjęcia doładowywane skryptem trzeba sprawdzić w wyrenderowanym kodzie. Google powinno mieć dostęp do pliku, a robots.txt nie może blokować zasobów potrzebnych do zrozumienia strony.
Czy potrzebna jest mapa obrazów?
W wielu serwisach Google znajduje obrazy podczas skanowania stron. Mapa obrazów może pomóc, gdy materiały są trudniejsze do odkrycia, są ładowane przez nietypowe rozwiązanie albo stanowią ważną część dużej biblioteki.
Nie naprawi jednak blokady zasobów, pustych stron ani galerii pozbawionej kontekstu.
Wideo i inne multimedia
Materiał wideo wymaga czytelnego tytułu, opisu, miniatury i strony, na której pełni główną funkcję. Jeżeli przekazuje istotne informacje, warto udostępnić transkrypcję lub tekstowe podsumowanie.
Osadzone odtwarzacze mogą dodawać skrypty oraz żądania już podczas pierwszego ładowania. Na stronach z wieloma filmami warto rozważyć ładowanie odtwarzacza dopiero po interakcji z miniaturą.
Jak przeprowadzić audyt grafik?
- Wyeksportuj obrazy wraz z URL-em strony, wymiarami i masą.
- Znajdź największe pliki oraz obrazy ładowane na wielu stronach.
- Porównaj wymiary pliku z faktycznym miejscem wyświetlania.
- Sprawdź obraz LCP na najważniejszych szablonach.
- Wykryj brakujące, puste i powtarzalne teksty alt.
- Znajdź błędy 404 oraz obrazy przekierowywane.
- Sprawdź działanie wariantów responsywnych i lazy loadingu.
- Wybierz poprawkę w szablonie, gdy problem powtarza się na wielu adresach.
Ręczna kompresja stu plików nie rozwiąże problemu, jeżeli CMS po każdym przesłaniu ponownie generuje zbyt ciężkie wersje.
Jak mierzyć rezultat?
Po wdrożeniu porównaj masę strony, LCP i CLS na tych samych szablonach. W GSC można osobno analizować typ wyszukiwania „Grafika”, aby sprawdzić wyświetlenia, kliknięcia, zapytania i strony docelowe.
Dla sklepu ważne są także powiększenia zdjęć, wybory wariantów, dodania do koszyka i sprzedaż. Obraz lżejszy o 70% nie będzie sukcesem, jeśli klient przestanie widzieć szczegół potrzebny do wyboru produktu.
Optymalizacja obrazów jest częścią prac nad szybkością strony i optymalizacji SEO. Jeżeli chcesz sprawdzić powtarzalne problemy w szablonie, napisz na czesc@seomariusz.pl lub zadzwoń: 665 015 610.