SEO obrazów: jak optymalizować grafiki pod Google w 8 krokach

·

SEO obrazów: jak optymalizować grafiki pod Google w 8 krokach

W tym poradniku dowiesz się, jak zrobić SEO obrazów w 8 krokach, żeby grafiki trafiały do Grafiki Google i nie spowalniały strony. SEO obrazów to optymalizacja plików graficznych i kodu, w którym są osadzone, tak by Google mógł je znaleźć, zrozumieć i szybko wyświetlić. Kroki: tag img, nazwa pliku, alt, waga i format, wymiary i lazy loading, kontekst, mapa witryny obrazów, martwe adresy.

Poradnik jest dla właściciela strony i początkującego SEO-wca, głównie na WordPressie. Zalecenia, nazwy atrybutów i progi pochodzą z dokumentacji Google Search Central i web.dev i są aktualne na październik 2026.

Przed publikacją sprawdziłem obrazy na bynajmniej.pl crawlem Screaming Frog (14.10.2026, 441 wewnętrznych URL-i) i wyniki podaję w krokach jako przykłady: 6 obrazków powyżej 2 MB, 26 powyżej 100 KB, 52 obrazki z pustym altem i 6 bez atrybutu alt.

SEO obrazów w skrócie: definicja i zakres

SEO obrazów (image SEO, pozycjonowanie grafiki) to zestaw działań, dzięki którym obraz jest indeksowany w Google, pojawia się w Grafice Google i jako miniatura przy wynikach tekstowych, a przy tym nie pogarsza Core Web Vitals. Optymalizacja obrazów obejmuje dwie warstwy: warstwę zrozumienia (nazwa pliku, alt, tekst wokół obrazu, dane strukturalne) i warstwę wydajności (waga pliku, format, wymiary, priorytet ładowania).

Według galerii elementów wizualnych Google Search Central obraz ze strony może się pokazać w trzech miejscach: jako obraz przy wyniku tekstowym, jako wynik obrazowy przy zapytaniach o obrazy i jako miniatura w Grafice Google. Każde z tych miejsc wymaga, żeby Google najpierw znalazł plik i powiązał go ze stroną.

Optymalizacja obrazów pod SEO w 8 krokach wygląda tak:

  1. Osadź obraz w tagu <img src>, nie jako tło CSS.
  2. Nadaj plikowi krótką, opisową nazwę.
  3. Napisz alt, który opisuje obraz w kontekście strony.
  4. Zmniejsz wagę pliku i wybierz format (AVIF, WebP, JPEG, PNG, SVG).
  5. Ustaw width i height, lazy loading poniżej pierwszego ekranu i fetchpriority dla obrazu LCP.
  6. Umieść obraz przy powiązanym tekście i wskaż obraz preferowany strony.
  7. Dodaj obrazy do mapy witryny XML, jeśli Google może ich nie znaleźć.
  8. Napraw obrazy zwracające 404 i trzymaj jeden URL dla tego samego pliku.

Elementy SEO obrazów i wpływ na wyniki

Elementy optymalizacji obrazów różnią się tym, na co wpływają. Tabela zbiera, co który element robi według dokumentacji Google i web.dev (stan na październik 2026).

ElementNa co wpływaZalecenie z dokumentacji
Tag img z atrybutem srcznalezienie i indeksacja obrazuGoogle nie indeksuje obrazów z CSS
Nazwa plikuzrozumienie tematu obrazukrótka i opisowa, nie IMG00023.JPG
Atrybut altzrozumienie obrazu i dostępność„najważniejszy atrybut metadanych”, bez upychania słów
Format i waga plikuLCP i transfer danychAVIF lub WebP skracają czas pobierania
width i heightCLSna wszystkich tagach img
loading i fetchpriorityLCPnigdy lazy loading dla obrazu LCP
og:image, primaryImageOfPagewybór obrazu przy wyniku i w Discoverbez logo, min. 1200 px szerokości w Discover
Mapa witryny obrazówodkrycie obrazówtylko image:image i image:loc

Jak zrobić SEO obrazów: 8 kroków

Krok 1. Osadź obraz w tagu img, nie w CSS

Dokumentacja Google Search Central o SEO obrazów (aktualizacja z 2.03.2026) mówi wprost: Google znajduje obrazy w atrybucie src elementu <img>, także wewnątrz <picture>, a obrazów ustawionych jako tło CSS nie indeksuje. Obrazy responsywne w srcset lub <picture> zawsze potrzebują zapasowego adresu w src, bo część przeglądarek i crawlerów tych atrybutów nie obsługuje.

Obraz w tle sekcji „hero” zbudowanej w page builderze zwykle jest właśnie tłem CSS. Jeśli taki obraz ma się pojawiać w Grafice Google, przenieś go do bloku Obraz albo tagu img.

Krok 2. Nadaj plikowi opisową nazwę

Google Search Central zaleca krótkie, opisowe nazwy plików i odradza nazwy typu image1.jpg czy IMG00023.JPG. Dla polskiej strony dobra nazwa to np. rower-gravel-na-szutrze.jpg. Nazwę zmieniam przed wgraniem pliku do WordPressa, bo późniejsza zmiana adresu zostawia stary URL bez pliku.

Krok 3. Napisz alt, który opisuje obraz

Atrybut alt Google nazywa najważniejszym atrybutem metadanych obrazu. Przykład z dokumentacji Google pokazuje stopniowanie: brak altu, potem upychanie słów kluczowych, potem samo „puppy”, a wzorcowy alt to „Dalmatian puppy playing fetch”. Po polsku: nie „pies szczeniak psy dalmatyńczyk tanio”, tylko „szczeniak dalmatyńczyka aportuje piłkę”.

Pusty alt (alt="") jest poprawny tylko dla obrazów czysto dekoracyjnych. Według poradnika W3C WAI o obrazach dekoracyjnych pusty alt każe czytnikowi ekranu pominąć obraz. Na bynajmniej.pl crawl Screaming Frog znalazł 52 obrazki z pustym altem i 6 bez atrybutu alt. Każdy z tych obrazków przejrzę i dopiszę alt wszędzie tam, gdzie obraz niesie treść, a nie dekorację.

Puste i brakujące alty najszybciej znajdziesz w Screaming Frog w zakładce Images, filtry „Missing Alt Text” i „Missing Alt Attribute”. Raport Images w Screaming Frog pokazuje też stronę, na której obraz jest osadzony.

Krok 4. Zmniejsz wagę pliku i wybierz format

Waga obrazów to najczęściej największa część transferu strony. Według web.dev w 90. percentylu strony wysyłają ponad 5 MB obrazów, na desktopie i na mobile. Google obsługuje w wyszukiwarce formaty BMP, GIF, JPEG, PNG, WebP, SVG i AVIF, a rozszerzenie pliku musi pasować do jego rzeczywistego typu.

Na bynajmniej.pl 6 obrazków ma ponad 2 MB, a 26 ponad 100 KB. Najcięższe to PNG wygenerowane w ChatGPT w 2025 roku, po 2,5–3,7 MB; plik czym-tak-naprawde-zajmuje-sie-specjalista-seo.png waży 3,7 MB. Ilustracja z generatora AI zapisana jako PNG to zdjęciowa grafika w formacie przeznaczonym do przezroczystości i prostych grafik. Takie ilustracje konwertuję do WebP albo AVIF i skaluję do szerokości, w jakiej motyw je wyświetla.

Dobór formatu robię według treści obrazu:

Rodzaj obrazuFormatUwagi
Zdjęcie, ilustracja z generatora AIAVIF lub WebP, awaryjnie JPEGAVIF w WordPressie od wersji 6.5
Zrzut ekranu z tekstemWebP lub PNGPNG tylko gdy WebP rozmywa litery
Logo, ikona, diagramSVGinline SVG potrzebuje elementu title
Grafika z przezroczystościąWebP lub PNGWebP też obsługuje przezroczystość
Animacjawideo zamiast GIFzalecenie insightu „Improve image delivery”

WordPress od wersji 5.3 skaluje obrazy większe niż 2560 px w szerokości lub wysokości i zostawia oryginał w katalogu uploads, co opisuje notatka WordPress Core o dużych obrazach. Próg zmienia filtr big_image_size_threshold. Obsługa AVIF w WordPressie 6.5 działa tylko wtedy, gdy Imagick lub GD na serwerze obsługuje AVIF; sprawdzisz to w Narzędzia → Zdrowie witryny → Informacje → Obsługa mediów (WordPress Core, AVIF w 6.5).

Ciężkie obrazy na konkretnej stronie pokazuje insight „Improve image delivery” w panelu Performance w Chrome DevTools. Według dokumentacji Chrome DevTools insight „Improve image delivery” porównuje wagę pliku z liczbą pikseli i pomija obrazy, na których oszczędność wynosi mniej niż 4 KiB.

Krok 5. Ustaw wymiary, lazy loading i fetchpriority

Atrybuty width i height na każdym tagu img rezerwują miejsce na obraz i chronią przed skokami układu (CLS), co zaleca web.dev. Atrybut loading="lazy" odkłada ładowanie obrazów poza pierwszym ekranem i działa tylko na tagach img i iframe, nie na tłach CSS.

Obraz, który jest największym elementem pierwszego ekranu (element LCP), traktuj odwrotnie. Poradnik web.dev o optymalizacji LCP mówi „Never lazy-load your LCP image” i zaleca fetchpriority="high" na obrazie LCP, ale na najwyżej jednym lub dwóch obrazach na stronie. Cel to LCP do 2,5 sekundy dla co najmniej 75% odsłon.

Krok 6. Daj obrazowi kontekst i wskaż obraz preferowany

Google Search Central zaleca umieszczanie obrazu blisko powiązanego tekstu, na stronie o tym samym temacie co obraz. Zdjęcie roweru w akapicie o rowerach mówi Google więcej niż to samo zdjęcie w galerii na końcu wpisu.

Obraz, który Google ma pokazać przy wyniku strony, wskazujesz przez primaryImageOfPage ze schema.org, właściwość image na mainEntity albo meta tag og:image. Dokumentacja Google odradza jako obraz preferowany logo, obrazy z tekstem i skrajne proporcje. Dla Google Discover dokumentacja Discover (aktualizacja z 9.03.2026) wymaga obrazów o szerokości co najmniej 1200 px i ustawienia max-image-preview:large w meta tagu robots.

Krok 7. Dodaj obrazy do mapy witryny XML

Mapa witryny obrazów pomaga Google znaleźć obrazy, których nie odkryje przy zwykłym crawlu, np. ładowane skryptem. Według dokumentacji Google o mapach witryny obrazów (aktualizacja z 10.12.2025) wymagane są tylko tagi <image:image> i <image:loc>, a jeden <url> może zawierać do 1000 obrazów. Tagi <image:caption>, <image:title>, <image:geo_location> i <image:license> Google wycofał w 2022 roku.

Obrazy z CDN na innej domenie też mogą trafić do mapy witryny obrazów, jeśli obie domeny są zweryfikowane w Google Search Console.

Krok 8. Napraw martwe obrazy i trzymaj stałe adresy

Obraz zwracający 404 nie trafi do Grafiki Google, a link do niego to strata zasobów crawlera. Na bynajmniej.pl 60 wewnętrznych URL-i zwraca kody 4xx i są to głównie obrazki z wpisów z lat 2008–2009, np. /wp-content/uploads/2009/06/kaspar.jpg. Stary adres http://www.bynajmniej.pl/wp-content/uploads/2009/06/kaspar.jpg przechodzi przez 301 i kończy się na 404. Jak taki błąd naprawić, opisuję w poradniku o błędzie 404.

Google Search Central zaleca też, żeby ten sam obraz użyty na wielu stronach miał zawsze ten sam URL. Jeden adres pozwala Google użyć pliku z pamięci podręcznej i oszczędza crawl budget na dużych serwisach.

Czego nie robić przy optymalizacji obrazów

  • Nie upychaj słów kluczowych w alcie. Google podaje alt pełen słów kluczowych jako przykład złej praktyki. Alt „seo seo pozycjonowanie seo” to nie optymalizacja, tylko wiadomość dla czytnika ekranu, której nikt nie chce usłyszeć.
  • Nie lazy-loaduj obrazu LCP. Lazy loading na pierwszym ekranie opóźnia LCP.
  • Nie dodawaj do mapy witryny tagów image:caption i image:title. Google wycofał te tagi w 2022 roku.
  • Nie wrzucaj PNG z generatora AI bez konwersji. Plik 3,7 MB na bynajmniej.pl to dokładnie ten przypadek.
  • Nie blokuj katalogu uploads w robots.txt, jeśli obrazy mają być w Grafice Google. Do wyłączenia obrazów strony z indeksu służy reguła noimageindex w meta tagu robots (dokumentacja robots meta).

Jak sprawdzić SEO obrazów na własnej stronie

Przegląd obrazów zaczynam od crawla w Screaming Frog (darmowa wersja do 500 URL-i): zakładka Images z filtrami wagi powyżej 100 KB i brakującego altu, a zakładka Response Codes pokazuje obrazy z kodem 4xx. Potem sprawdzam najważniejsze szablony stron w PageSpeed Insights i insight „Improve image delivery” w Chrome DevTools. Pełną kolejność przeglądu strony opisuję w poradniku jak zrobić audyt SEO.

Ruch z Grafiki Google widać w Google Search Console w raporcie Skuteczność po zmianie filtra „Typ wyszukiwania” na „Grafika”.

FAQ: najczęstsze pytania o SEO obrazów

Jak pozycjonować zdjęcia w Google?

Zdjęcia pozycjonujesz przez osadzenie ich w tagu img, opisową nazwę pliku, alt opisujący obraz i umieszczenie zdjęcia przy powiązanym tekście. Google Search Central dodaje do tego szybkie ładowanie, dane strukturalne i mapę witryny obrazów.

Ile powinno ważyć zdjęcie na stronie?

Google nie podaje limitu wagi zdjęcia na stronie. Ja traktuję 100 KB jako próg do sprawdzenia, a pliki powyżej 2 MB jako błąd do naprawy, bo spowalniają LCP.

Jaki format obrazów wybrać pod SEO?

Google indeksuje BMP, GIF, JPEG, PNG, WebP, SVG i AVIF, więc format nie decyduje o indeksacji. Format decyduje o wadze: według web.dev AVIF i WebP skracają czas pobierania obrazu, a SVG pasuje do logo i ikon.

Czy alt jest czynnikiem rankingowym?

Dokumentacja Google Search Central nazywa alt najważniejszym atrybutem metadanych przy tworzeniu tekstu alternatywnego, bo alt pomaga Google zrozumieć temat obrazu. Alt służy też czytnikom ekranu, więc pusty alt zostaw tylko dla dekoracji.

Czy Google indeksuje obrazy w tle CSS?

Google nie indeksuje obrazów ustawionych w CSS, np. przez background-image. Obraz, który ma się pojawiać w Grafice Google, musi być w atrybucie src tagu img.

Komentarze

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet do redukcji spamu. Dowiedz się, w jaki sposób przetwarzane są dane Twoich komentarzy.