SEO obrazów: 12 praktycznych wskazówek na większy ruch

Wiele osób sądzi, że SEO obrazów sprowadza się do wpisania słowa kluczowego w atrybucie alt. W praktyce jest co najmniej dwanaście czynników, które decydują o tym, jak Google znajduje, rozumie i ocenia obrazy w twoim serwisie. Ich pomijanie oznacza oddawanie ruchu, który dałoby się zdobyć niewielkim wysiłkiem — także z Grafiki Google, odpowiadającej za sporą część wyszukiwań na świecie.

Google coraz lepiej rozpoznaje obrazy dzięki uczeniu maszynowemu. To jednak nie unieważnia SEO obrazów — przeciwnie, wyszukiwarka wciąż korzysta ze wszystkich dostępnych sygnałów (nazwa pliku, tekst alternatywny, kontekst strony, szybkość ładowania), żeby trafnie zinterpretować i ocenić grafikę.

1. Nadawaj plikom opisowe nazwy

Nazwa pliku to jeden z pierwszych sygnałów, po których Google rozpoznaje temat obrazu. Aparaty i telefony nadają nazwy zupełnie ogólne, takie jak IMG_0023.JPG ou DSC_4817.jpg — które nie mówią wyszukiwarce kompletnie nic.

Google wprost pisze w swoich wytycznych, że nazwa pliku jest wskazówką co do zawartości obrazu. Zalecenie jest proste: używaj opisowych słów kluczowych oddzielonych myślnikami, bez przesady:

• Dobrze: ciasto-czekoladowe.jpg
• Źle: IMG_2947.jpg
• Też źle: ciasto-czekoladowe-przepis-deser-slodkie.jpg (upychanie słów kluczowych)

Zmiana nazw plików przed wgraniem to drobny nawyk, który robi różnicę — zwłaszcza w sklepach internetowych, blogach kulinarnych, portfoliach i wszędzie tam, gdzie ruch przychodzi z wyszukiwania grafiki.

2. Pisz użyteczne teksty alternatywne (alt)

Atrybut alt opisuje obraz dla przeglądarki. Pokazuje się, gdy grafika się nie wczyta, czytają go czytniki ekranu dla osób niewidomych i słabowidzących, a Google używa go do zrozumienia warstwy wizualnej strony.

Składnia jest prosta:

Google łączy tekst alternatywny z algorytmami rozpoznawania obrazu i kontekstem strony, żeby ustalić, co przedstawia grafika. Zalecenie brzmi: pisz opisy użyteczne i konkretne, wplatając słowa kluczowe naturalnie — nigdy w formie bezsensownej zbitki (upychanie słów kluczowych).

Sprawdzony skrót: dokończ zdanie „To jest zdjęcie ___”. To, co wpiszesz w lukę, po drobnym szlifie zwykle nadaje się na dobry tekst alternatywny. Przykłady:

• „To jest zdjęcie sernika czekoladowego z polewą truskawkową.” → alt="Sernik czekoladowy z polewą truskawkową"
• „To jest zdjęcie laptopa z pękniętym ekranem leżącego na biurku.” → alt="Laptop z pękniętym ekranem na biurku"

Przy zdjęciach produktowych warto podać w tekście alternatywnym numer modelu albo kod SKU — to pomaga wyświetlać się na precyzyjne zapytania techniczne. Nie zapominaj też o podpisach: Google czerpie informacje o temacie grafiki z otaczającego ją tekstu, w tym z widocznych podpisów.

3. Dobierz właściwy format pliku

Wybór formatu przekłada się wprost na wagę pliku, a więc i na szybkość ładowania strony. Trzy najpopularniejsze formaty w sieci to JPG, PNG i WebP, a każdy ma inną charakterystykę:

Zasada ogólna: JPG do fotografii, PNG do grafik wymagających przezroczystego tła i ostrego tekstu, a WebP wszędzie tam, gdzie się da — ten format daje lepszą kompresję przy tej samej jakości. Skorzystaj z narzędzia Konwerter obrazów w ImageTools, aby zmienić format jeszcze przed wgraniem plików.

4. Dopasuj wymiary obrazów do rzeczywistego rozmiaru wyświetlania

Wgrywanie zdjęcia o szerokości 4000 pikseli na stronę, która pokazuje grafiki w 800 pikselach, to marnowanie transferu. Przeglądarka pobiera cały plik, a nadmiarowe piksele i tak odrzuca — użytkownik czeka dłużej i nic na tym nie zyskuje.

Ustal maksymalną szerokość, w jakiej obrazy wyświetlają się w twoim layoucie (zwykle między 800 a 1440 pikselami, zależnie od rodzaju grafiki i serwisu), i zmień rozmiar przed wgraniem. Aby obsłużyć ekrany Retina (HiDPI), przyjmij dwukrotność tej szerokości. Skorzystaj z narzędzia Zmiana rozmiaru obrazu w ImageTools, aby ustawić wymiary co do piksela.

5. Kompresuj obrazy bez widocznej straty jakości

Kompresja to zmniejszanie wagi pliku bez zmiany wymiarów obrazu. Przy zdjęciach JPG obniżenie jakości ze 100% do 80% potrafi zmniejszyć plik 5–10 razy, a różnicy na ekranie i tak nie widać.

Szybkość ładowania to potwierdzony przez Google czynnik rankingowy — zarówno na komputerach, jak i na urządzeniach mobilnych. Obrazy zwykle stanowią największą część wagi strony, więc kompresja wszystkich plików przed wgraniem to zabieg z najlepszym stosunkiem efektu do wysiłku w całym technicznym SEO.

Praktyczne cele wagowe dla poszczególnych typów grafik:

• Baner / grafika hero na pełną szerokość: poniżej 200 KB
• Zdjęcie produktu lub grafika na bloga: 60–150 KB
• Miniatura: 15–40 KB
• Logo w PNG/WebP: poniżej 30 KB

Skorzystaj z narzędzia Kompresja obrazu w ImageTools, aby zmniejszyć pliki JPG, PNG i WebP bezpośrednio w przeglądarce — bez wysyłania ich na zewnętrzne serwery.

6. Stwórz mapę witryny dla obrazów

Mapa witryny dla obrazów mówi Google o grafikach, których robot może sam nie znaleźć — zwłaszcza ładowanych przez JavaScript albo osadzonych w rozbudowanych galeriach. W odróżnieniu od zwykłej mapy witryny może zawierać adresy z innych domen, na przykład z CDN-ów.

Jeśli twoja strona działa na WordPressie z wtyczką Yoast SEO, obrazy trafiają do mapy witryny automatycznie. W serwisach pisanych na zamówienie mapę obrazów dodaje się ręcznie, zgodnie z oficjalną dokumentacją Google. Najważniejsze dostępne znaczniki to image:loc (adres obrazu), image:title e image:caption.

7. Wykorzystaj dane strukturalne przy zdjęciach produktów

Google obsługuje dane strukturalne (Schema.org) dla obrazów w wielu kontekstach — przepisów, produktów, artykułów, wydarzeń. Poprawnie wdrożone pozwalają grafikom pojawiać się w wynikach rozszerzonych (rich results), z dodatkowym wyróżnieniem wizualnym, które podnosi klikalność.

W sklepach internetowych znaczniki produktu wraz z obrazem są szczególnie cenne: poprawnie oznaczone produkty mogą trafić do Zakupów Google i do kart produktów w panelu wiedzy.

8. Wdroż lazy loading

Lazy loading polega na wczytywaniu obrazów dopiero wtedy, gdy mają się pojawić w widocznym obszarze ekranu, zamiast pobierania wszystkich od razu. Na stronach z dużą liczbą grafik (długie wpisy, listingi produktów) potrafi zmniejszyć początkową wagę strony o 60–80%.

Najprostsze wdrożenie jest natywne w HTML-u:

Ważne: nigdy nie stosuj loading="lazy" do głównej grafiki widocznej bez przewijania. Opóźnia to LCP — Largest Contentful Paint, jedną z metryk Core Web Vitals — i bezpośrednio szkodzi pozycjom.

9. Podawaj width i height przy każdym obrazie

Kiedy przeglądarka nie zna rozmiaru obrazu przed jego wczytaniem, nie rezerwuje na niego miejsca w layoucie — a gdy grafika się pojawi, treść strony „podskakuje”. To zjawisko Google mierzy jako CLS (Cumulative Layout Shift), kolejną metrykę Core Web Vitals.

Rozwiązanie: zawsze deklaruj width e height w znaczniku obrazu:

Wartości nie muszą odpowiadać rozmiarowi wyświetlania — wyznaczają jedynie proporcje, dzięki którym przeglądarka zarezerwuje właściwe miejsce jeszcze przed wczytaniem pliku.

10. Stosuj obrazy responsywne z srcset

Atrybut srcset pozwala udostępnić kilka wersji tego samego obrazu dla różnych rozmiarów ekranu. Przeglądarka sama wybiera najodpowiedniejszą — mniejszą na telefon, większą na komputer. W serwisach z dużym ruchem mobilnym potrafi to zmniejszyć transfer o 40–60%.

11. Zadbaj o obraz wyróżniający dla Open Graph i social mediów

Gdy ktoś udostępnia adres na WhatsAppie, Instagramie, LinkedInie czy gdziekolwiek indziej, grafika w podglądzie pochodzi ze znaczników Open Graph. Bez nich platforma wybiera dowolny obraz ze strony — zwykle z marnym skutkiem.

Zawsze ustawiaj znacznik og:image z grafiką 1200×630 pikseli na każdej ważnej podstronie:

Dobrze zaprojektowany podgląd — z czytelnym tytułem, identyfikacją wizualną marki i trafną grafiką — wyraźnie podnosi klikalność udostępnianych linków.

12. Patrz na kontekst całej strony

Google nie ocenia obrazów w oderwaniu od reszty. Bierze pod uwagę całość: tekst wokół grafiki, tytuł strony, kontekst semantyczny, pozostałe elementy wizualne, podpis pod obrazem, a nawet treść linków prowadzących do strony. Zdjęcie czerwonego buta na stronie o modzie damskiej ma zupełnie inny kontekst niż ta sama grafika w serwisie kulinarnym.

Dobre praktyki kontekstowe:

• Umieszczaj grafiki blisko tekstu, który je opisuje albo do którego się odnoszą
• Dodawaj widoczne podpisy pod obrazami, kiedy tylko się da
• Upewnij się, że temat grafiki pasuje do tematu strony
• Formułuj tytuł strony i nagłówki tak, by wzmacniały temat głównych grafik

Lista kontrolna SEO obrazów

• ☑ Opisowa nazwa pliku ze słowami kluczowymi (z myślnikami, bez upychania)
• ☑ Atrybut alt opisowy i osadzony w kontekście przy każdym obrazie
• ☑ Format dobrany do treści: WebP lub JPG do zdjęć, PNG/SVG do logo i ikon
• ☑ Wymiary dopasowane do rzeczywistego rozmiaru wyświetlania (maks. 2× dla Retiny)
• ☑ Zastosowana kompresja — waga poniżej celów dla danego typu
• ☑ width e height zadeklarowane w każdym znaczniku <img>
• ☑ loading="lazy" przy grafikach poniżej pierwszego ekranu
• ☑ Grafika LCP bez lazy loadingu, z fetchpriority="high" jeśli to możliwe
• ☑ Skonfigurowana mapa witryny dla obrazów (albo sprawdzone, czy robi to wtyczka)
• ☑ Znacznik meta og:image ustawiony na wszystkich ważnych podstronach
• ☑ Dane strukturalne przy zdjęciach produktów, tam gdzie mają zastosowanie
• ☑ Grafiki osadzone w kontekście: tekst, podpisy i trafne nagłówki

Najczęściej zadawane pytania