Rozumiesz, jak działa optymalizacja treści na stronie, stosujesz podstawowe zasady SEO, aby pozycjonowanie przynosiło wymierny ruch organiczny. Ale czy pamiętasz o grafice? Obrazy również wymagają optymalizacji, którą przeprowadzisz w kilku prostych, ale skutecznych krokach.
Dlaczego optymalizacja grafiki ma znaczenie dla widoczności w Google?
Zdjęcia uatrakcyjniają treść, przykuwają uwagę oraz sprawiają, że użytkownik dłużej zatrzymuje się na stronie. Z ich pomocą może też do ciebie trafić poprzez wyszukiwarkę graficzną. Pozycja twojej strony w tym miejscu zależy bezpośrednio od tego, w jaki sposób zoptymalizujesz obrazki.
Dlaczego warto? Po pierwsze, niewielu właścicieli stron internetowych dba o ten element optymalizacji treści, jest to więc dobry sposób, aby być o krok przed konkurencją. Po drugie, bardzo wielu użytkowników szuka poprzez zdjęcia, szczególnie w przypadku przepisów kulinarnych, produktów e-commerce czy elementów wystroju wnętrz. Dlatego warto dać się znaleźć w wyszukiwarce grafiki. Szczególnie że nie wymaga to skomplikowanych działań, o czym sam zaraz się przekonasz.
Rozmiar i format — jak przygotować obrazy przed publikacją?
Kompresja bezstratna jako złoty środek
Zanim jeszcze wrzucisz zdjęcie na serwer, zmniejsz jego wielkość w kilobajtach. Zbyt ciężkie grafiki spowalniają ładowanie strony, a to może sprawić, że użytkownik z niej wyjdzie, zanim jeszcze zdąży zapoznać się z treścią. Ponadto szybkość ładowania stron jest jednym z czynników rankingowych Google.
Jednocześnie trzeba zadbać o wysoką jakość wizualną, dlatego polecanym rozwiązaniem jest kompresja bezstratna. Dzięki niej zachowasz ostrość detali i nasycenie kolorów przy jednoczesnej redukcji rozmiaru pliku nawet o 40–60%. Możesz też zainstalować wtyczkę do WordPressa, która w automatyczny sposób będzie kompresować wszystkie przesyłane pliki, co znacznie ułatwia zadanie. Przykładowe narzędzia do kompresji bezstratnej to TinyPNG, ImageOptim czy WP Smush.
Wybór formatu pliku
Ważnym zagadnieniem jest też właściwy format pliku. Najczęściej wykorzystywany jest JPEG oraz PNG, rzadziej GIF. Przy czym Google rekomenduje, aby wyświetlać obrazy w formatach nowej generacji, jak JPEG 2000, JPEG XR czy WebP, które oferują lepszy stosunek jakości do rozmiaru pliku. WebP daje oszczędność rzędu 25–35% w porównaniu do tradycyjnego JPEG bez widocznej utraty jakości. Format ten wspierają wszystkie nowoczesne przeglądarki, jednak warto przygotować wariant zapasowy (fallback) w JPEG lub PNG dla starszych wersji aplikacji mobilnych.
Nazewnictwo plików — jak tworzyć adresy URL przyjazne robotom?
Obrazy skompresowane? W takim razie zmień jeszcze nazwę pliku graficznego, ponieważ jest to istotne zarówno z punktu widzenia użytkowników, jak i robotów Google. Chodzi o to, aby unikać przypadkowych ciągów liter i cyfr, jak 00045855.jpg, na rzecz nazw wskazujących, co się znajduje na grafice. Dobrą praktyką jest wykorzystanie w miarę możliwości słów kluczowych, unikanie polskich znaków oraz zastępowanie spacji myślnikami. Przykłady dobrych nazw plików to:
- szakszuka-z-feta.jpg
- baleriny-damskie-czerwone.jpg
- toyota-yaris-hatchback.jpg
- czolenka-na-obcasie.jpg
Jest to istotne jeszcze z jednego punktu widzenia — każdy obraz zamieszczony na stronie posiada swój własny adres URL, który powinien być „przyjazny”. Jeśli nazwa pliku składa się z chaotycznych znaków, również URL będzie nieczytelny. Robot Google analizuje strukturę adresu grafiki, starając się dopasować ją do zapytań użytkowników w wyszukiwarce graficznej. Dlatego zamiast tworzyć adresy takie jak:
twojastrona.pl/wp-content/uploads/00045855.jpg
docelowo powinien wyglądać tak:
twojastrona.pl/wp-content/uploads/szakszuka-z-jajkiem-i-feta.jpg
Dzięki temu uzyskasz większe prawdopodobieństwo pojawienia się grafiki w wynikach wyszukiwania, gdy ktoś wpisze frazę „szakszuka z fetą”.
Atrybut ALT — tekst alternatywny jako klucz do indeksacji grafiki
Dlaczego roboty Google potrzebują opisu obrazu?
I teraz dochodzimy do ostatniej, najważniejszej rzeczy, czyli do wypełniania pola z atrybutem ALT. Tekst alternatywny to opis zdjęcia, tego, co się na nim znajduje. Po co się to robi? Roboty Google nie widzą tego, co jest przedstawione na grafice. Jeśli jednak zadbasz o uzupełnianie atrybutu ALT, uzyskają niezbędne informacje dla prawidłowej indeksacji grafiki. Zobacz, jak to wygląda w praktyce:
- szakszuka-z-feta.jpg → alt=”Szakszuka z fetą na śniadanie”
- baleriny-damskie-czerwone.jpg → alt=”Czerwone baleriny damskie z paskiem”
- toyota-yaris-hatchback.jpg → alt=”Samochód hatchback Toyota Yaris”
- czolenka-na-obcasie.jpg → alt=”Damskie czółenka na obcasie”
Zasady tworzenia skutecznego tekstu alternatywnego
Jak widzisz, w tekście alternatywnym można stosować spacje i polskie znaki. Powinno się wykorzystywać słowa kluczowe, aczkolwiek pamiętaj, że nie jest to miejsce, aby upychać je na siłę. Tekst alternatywny powinien być też w miarę możliwości unikalny. Przykładowo, jeśli na stronie znajduje się 10 różnych zdjęć Toyoty Yaris, nie powtarzaj cały czas alt=”Samochód hatchback Toyota Yaris”, tylko precyzyjnie oddawaj to, co zostało uchwycone w kadrze, np. alt=”Światła przednie w Toyota Yaris” albo alt=”Wnętrze kabiny Toyota Yaris widok na deskę rozdzielczą”.
Ponadto atrybuty ALT pełnią funkcję dostępnościową — czytniki ekranu wykorzystywane przez osoby niedowidzące odczytują te opisy użytkownikom, dzięki czemu mogą oni zrozumieć kontekst grafiki. To kolejny argument przemawiający za ich dokładnym wypełnianiem.
Odpowiednie wymiary obrazu dopasowane do kontekstu
Kolejnym aspektem optymalizacji grafiki jest dobór właściwych wymiarów w pikselach. Jeśli obraz ma wyświetlać się w kontenerze o szerokości 800 pikseli, nie ma sensu wgrywać pliku o rozdzielczości 3000×2000 px. Przeskaluj grafikę do wymiaru zbliżonego do faktycznego miejsca na stronie — oszczędzisz tym samym dodatkowe kilobajty oraz przyspieszysz ładowanie strony.
Pamiętaj jednak o ekranach Retina i innych wyświetlaczach o wysokiej rozdzielczości. W praktyce warto przygotować obraz w wersji 1,5× lub 2× większej niż docelowe miejsce wyświetlania, aby zapewnić ostrość na urządzeniach Apple oraz flagowych smartfonach z Androidem. Jednocześnie skorzystaj z responsywnych obrazów (atrybut srcset w HTML), które pozwalają przeglądarce wybrać wersję grafiki dopasowaną do szerokości ekranu użytkownika.
Lazy loading — opóźnione ładowanie obrazów poniżej pierwszego ekranu
Lazy loading to technika, która odkłada wczytywanie grafik znajdujących się poza pierwszym widokiem użytkownika (tzw. above the fold) do momentu, gdy użytkownik zacznie przewijać stronę w dół. Dzięki temu przeglądarka nie musi pobierać wszystkich obrazów jednocześnie, co skraca czas pierwszego załadowania strony oraz redukuje zużycie transferu danych, co jest szczególnie ważne dla użytkowników mobilnych z ograniczonym pakietem danych.
Wdrożenie lazy loading jest możliwe za pomocą atrybutu loading=”lazy” w tagu <img> lub poprzez wtyczki WordPressa, które automatycznie obsługują tę funkcjonalność. Pamiętaj jednak, aby nie stosować lazy loading do obrazów powyżej linii zgięcia ekranu — te grafiki powinny ładować się od razu, ponieważ są widoczne natychmiast po otwarciu strony.
Kontekst tekstowy wokół obrazu
Roboty Google analizują nie tylko nazwę pliku czy atrybut ALT, ale również tekst znajdujący się wokół grafiki. Dlatego warto zadbać o to, aby akapit lub zdania otaczające obraz zawierały wyrażenia związane tematycznie z jego treścią. Jeśli wstawiasz zdjęcie dania kuchni marokańskiej, upewnij się, że w sąsiednim akapicie pojawia się np. wzmianka o składnikach czy sposobie podania.
Równie ważny jest podpis pod zdjęciem (element <figcaption> w HTML5 lub zwykły akapit pod obrazem). Jeśli dodasz krótki opis kontekstowy, wzmocnisz semantyczne powiązanie między grafiką a resztą treści, co może przekładać się na lepsze pozycje w wyszukiwarce graficznej Google.
Mapa witryny XML z grafikami
Oprócz standardowej mapy witryny zawierającej adresy podstron, warto przygotować mapę witryny dla obrazów (Image Sitemap). Dokument ten informuje Google o wszystkich grafikach zamieszczonych w serwisie, ułatwiając robotom ich odkrycie i indeksację. Możesz wygenerować taki plik ręcznie lub skorzystać z wtyczek SEO, które automatycznie dołączają obrazy do głównej mapy XML.
W pliku sitemap_images.xml możesz dodatkowo podać informacje takie jak lokalizacja geograficzna zdjęcia, licencja lub podpis. Dzięki temu robot Google otrzyma jeszcze więcej kontekstu, co zwiększa prawdopodobieństwo prawidłowego wyświetlenia grafiki w odpowiednich zapytaniach użytkowników.
Sprawdzanie wyników optymalizacji grafiki
Po wdrożeniu wszystkich powyższych kroków warto zweryfikować, jak wygląda indeksacja twoich obrazów. Możesz to zrobić w Google Search Console, wybierając raport „Strony” oraz sprawdzając, czy grafiki są prawidłowo zaindeksowane. Jeśli zobaczysz błędy lub ostrzeżenia, Google wskaże, co wymaga poprawy — np. brakujący atrybut ALT, zbyt długi czas ładowania lub nieoptymalny format pliku.
Pamiętaj również o testowaniu szybkości ładowania w narzędziu PageSpeed Insights. Jeśli wynik wskazuje na możliwość dalszej kompresji lub konwersji do WebP, wróć do procesu optymalizacji i dostosuj pliki zgodnie z rekomendacjami. Regularne monitorowanie tych wskaźników pozwala utrzymać konkurencyjną przewagę i zapewnić użytkownikom płynne doświadczenie podczas przeglądania twojej witryny.