SEO obrazów: alt, WebP, srcset i LCP
W skrócie
Obrazy to zwykle największy ładunek strony i częsty element LCP. Zasady: opisowy alt (treść, nie „obraz1”), format WebP lub AVIF, srcset pod gęstość ekranu, width/height w HTML, a lazy-loading tylko poniżej linii zgięcia. Lazy na hero to najczęstszy błąd, który sam dodaje sekundy do LCP.
Google indeksuje obrazy (Google Grafika) i używa ich w rozumieniu strony, ale dla rankingu strony WWW ważniejsze jest, czy obraz nie zabija Core Web Vitals. LCP to często zdjęcie hero albo baner produktu. Audyto w pakiecie Standard i PRO rozbija obrazy: alt, srcset, format, lazy.
Alt: treść dla ludzi, Google i AI
- Opisz, co widać i po co obraz jest na stronie („Sklep Magento - karta produktu z wariantem koloru”), nie keyword stuffing.
- Dekoracja (tło, separator):
alt="". - CTA jako obraz: alt = treść przycisku.
- To samo dotyczy dostępności - WCAG 2.2.
Format, wymiary, srcset
| Temat | Zrób | Unikaj |
|---|---|---|
| Format | WebP lub AVIF z fallbackiem | PNG 4000 px na ikonę |
| Wymiary HTML | width i height (rezerwacja miejsca) | Brak wymiarów → CLS |
| srcset / sizes | Kilka szerokości pod DPR | Jeden plik 2400 px na mobile |
| Kompresja | Wizualnie bezartefaktowa | 100% JPEG „na wszelki wypadek” |
LCP: kiedy nie wolno dawać lazy
Jeśli największy element w pierwszym ekranie to obraz, przeglądarka musi go pobrać od razu. loading="lazy" albo leniwe tło z CSS opóźnia LCP. Na Next.js daj priority / preload; na WordPressie wyłącz lazy dla hero w wtyczce obrazów. Preload bez fetchpriority bywa zbędny, jeśli LCP to tekst - najpierw zmierz, co jest LCP (PageSpeed podaje selektor).
Jak zoptymalizować obrazy krok po kroku
- 1W PageSpeed znajdź element LCP - jeśli to IMG, wyłącz na nim lazy i dodaj wymiary.
- 2Zamień ciężkie JPEG/PNG na WebP/AVIF w rzeczywistym rozmiarze wyświetlania (nie „max z Photoshopa”).
- 3Dodaj srcset i sizes, żeby mobile nie ściągał desktopowego pliku.
- 4Uzupełnij alt zgodnie z rolą obrazu; puste alt tylko na dekoracji.
- 5Włącz lazy wyłącznie pod pierwszą foldem (listing, stopka, komentarze).
- 6Sprawdź CLS: placeholdery i aspect-ratio, zanim wjedzie webfont i banner cookie.
Sitemap obrazów i nazwy plików
Google Grafika korzysta z sitemap obrazów (Yoast/RankMath potrafią ją dołączyć) i z nazw plików. hero-lcp.webp jest lepsze niż IMG_4401.JPG. Nie buduj osobnej farmy „stron pod grafiki”. Dla AI alt w HTML jest ważniejszy niż nazwa pliku - ale spójność nie szkodzi. Po wdrożeniu sprawdź w raporcie pokrycia, czy ciężkie URL-e obrazów nie zjadają crawla kosztem kategorii. Zrób darmowy audyt - zobaczysz liczbę obrazów bez alt i czy LCP to grafika.
Najczęstsze pytania
Czy alt pomaga w SEO?
Tak, w SEO obrazów i w zrozumieniu strony. Dla pozycji URL-a ważniejsze jest, by obraz nie psuł LCP/CLS. Alt ma też być zgodny z WCAG.
WebP czy AVIF?
Oba są dobre. AVIF często mniej waży, WebP ma szersze wsparcie narzędzi. Ważniejsze: właściwy rozmiar w pikselach niż wybór między dwoma nowoczesnymi formatami.
Czy lazy loading zawsze pomaga?
Nie. Na obrazie LCP szkodzi. Stosuj lazy pod foldem, nigdy na hero, które jest LCP.
Czy srcset jest potrzebny, gdy mam WebP?
Tak. Format to kompresja, srcset to dopasowanie szerokości do ekranu. Bez srcset mobilka może pobrać plik desktopowy.
Czy CDN rozwiązuje SEO obrazów?
CDN skraca TTFB i transfer, ale nie doda altów ani wymiarów. Najpierw HTML i wagi plików, potem CDN.
Ile obrazów bez alt to problem?
Już kilka treściowych bez alt na szablonie (karta produktu, artykuł) jest warte naprawy. W audytach często widać dziesiątki na listingach.
Sprawdź swoją stronę w 60 sekund
Wydajność, SEO, dostępność i bezpieczeństwo w jednym raporcie. Pierwszy audyt za darmo.
Zrób darmowy audyt