Optymalizacja obrazów dla SEO — ALT tagi, formaty, lazy loading

Obrazy zjadają Twoją stronę — i pozycje w Google

Według HTTP Archive obrazy stanowią ponad 5 MB danych na stronie przy 90. percentylu. To najcięższy pojedynczy typ zasobu, który pobiera przeglądarka. Jeśli nie optymalizujesz obrazów, płacisz za to podwójnie: wolniejszym ładowaniem (a więc gorszym LCP i Core Web Vitals) oraz utratą ruchu z Google Images.

Google Images odpowiada za około 20–25% wszystkich wyszukiwań w Google. To ogromne źródło ruchu, które większość stron po prostu ignoruje — bo nie ma poprawnych ALT tagów, nie stosuje nowoczesnych formatów, a obrazy ważą więcej niż powinny.

W tym artykule pokażę Ci, jak zoptymalizować obrazy pod kątem SEO i wydajności. Konkretnie, bez lania wody — gotowe do wdrożenia techniki, które stosujemy sami.

ALT tagi: Google nie widzi obrazów — czyta tekst

Algorytm Google rozpoznaje zawartość obrazów coraz lepiej, ale atrybut alt nadal pozostaje podstawowym sposobem, w jaki wyszukiwarka rozumie, co przedstawia grafika. Brak ALT to utracona szansa na ranking w Google Images i problem z dostępnością (accessibility) — czytniki ekranu nie odczytają treści obrazu osobom niewidomym.

Jak pisać dobre ALT tagi?

Zasada jest prosta: opisz, co widać na obrazie, w kontekście strony. Nie upychaj słów kluczowych na siłę — Google wprost ostrzega przed keyword stuffingiem w atrybutach alt.

Porównaj:

<!-- Źle — brak ALT -->
<img src="IMG_4832.jpg">

<!-- Źle — keyword stuffing -->
<img src="buty.jpg" alt="buty sportowe buty do biegania tanie buty sklep buty online">

<!-- Źle — zbyt ogólnie -->
<img src="buty.jpg" alt="zdjęcie">

<!-- Dobrze — opisowo i naturalnie -->
<img src="buty-do-biegania-nike-pegasus.jpg"
     alt="Buty do biegania Nike Pegasus 41 w kolorze niebieskim na białym tle">

Zasady pisania ALT:

1. Bądź konkretny — „Dalmatyńczyk aportujący piłkę na plaży" zamiast „pies".
2. Uwzględnij kontekst strony — jeśli obraz ilustruje poradnik o pieczeniu chleba, napisz „Ciasto chlebowe wyrastające w misce przykrytej ściereczką", nie „jedzenie".
3. Ogranicz długość do 125 znaków — czytniki ekranu ucinają dłuższe opisy.
4. Nie zaczynaj od „Zdjęcie..." albo „Obraz..." — to redundantne, przeglądarka wie, że to obrazek.
5. Obrazy dekoracyjne → pusty alt — ozdobne separatory, tła, ikony czysto estetyczne oznacz alt="", żeby czytniki je pominęły.

Co daje poprawny ALT w praktyce?

• Ranking w Google Images — Google indeksuje obraz i wyświetla go w wynikach wyszukiwania obrazów.
• Lepszy kontekst dla algorytmu — Google lepiej rozumie treść strony, co wspiera ranking organiczny.
• Dostępność (WCAG) — Twoja strona jest zgodna z wymogami dostępności.
• Fallback — gdy obraz się nie załaduje, użytkownik widzi opis zamiast pustego kwadratu.

Nazwy plików: pierwsze 100 milisekund SEO obrazu

Zanim Google zobaczy ALT, widzi nazwę pliku. IMG_00234.jpg nie mówi nic. buty-do-biegania-nike-pegasus-41.jpg mówi wszystko.

Zasady nazewnictwa:

• Używaj myślników zamiast podkreśleń (czerwone-buty.jpg, nie czerwone_buty.jpg)
• Opisuj zawartość krótko i po polsku (lub w języku docelowej grupy)
• Unikaj polskich znaków w nazwie pliku — lodzkie-rzemioslo.jpg, nie łódzkie-rzemiosło.jpg
• Zachowaj spójną konwencję w całym serwisie

To drobna rzecz, ale w skali setek obrazów na stronie robi różnicę. Google traktuje nazwę pliku jako „lekką wskazówkę" dotyczącą tematu grafiki.

Formaty obrazów: WebP i AVIF vs stara gwardia

Wybór formatu to jedna z najłatwiejszych optymalizacji z największym efektem. Konwersja z JPEG/PNG na nowoczesny format daje oszczędność 25–50% rozmiaru pliku przy tej samej jakości wizualnej.

Porównanie formatów

| Cecha | JPEG | PNG | WebP | AVIF | |-------|------|-----|------|------| | Typ kompresji | Stratna | Bezstratna | Stratna i bezstratna | Stratna i bezstratna | | Oszczędność vs JPEG | — | Większy plik | 25–34% mniejszy | 50%+ mniejszy | | Przezroczystość (alpha) | Nie | Tak | Tak | Tak | | Animacje | Nie | Nie (APNG tak) | Tak | Tak | | Wsparcie przeglądarek | 100% | 100% | ~97% | ~96% | | Najlepsze zastosowanie | Zdjęcia | Grafiki z przezroczystością, loga | Zdjęcia, grafiki — uniwersalny | Zdjęcia, złożone grafiki | | Szybkość kodowania | Szybka | Szybka | Szybka | Wolniejsza | | Szybkość dekodowania | Szybka | Szybka | Szybka | Wymaga więcej CPU |

WebP — bezpieczny wybór na dziś

WebP jest wspierany przez 97% przeglądarek (w tym Safari od wersji 16). Oferuje stratną i bezstratną kompresję, obsługuje przezroczystość i animacje. W porównaniu z JPEG daje 25–34% mniejsze pliki, a bezstratny WebP jest 26% mniejszy niż PNG.

Jeśli musisz wybrać jeden format do wdrożenia — wybierz WebP. Działa wszędzie, konwersja jest szybka, a narzędzia powszechnie go obsługują.

AVIF — przyszłość, która już działa

AVIF to format oparty na kodeku wideo AV1. W testach daje 50–65% oszczędności w porównaniu z JPEG przy porównywalnej jakości. Przykład: zdjęcie zachodu słońca ważące 560 KB w JPEG po konwersji do AVIF waży 101 KB — to 82% mniej.

Wsparcie przeglądarek wynosi ~96% (Chrome 85+, Firefox 93+, Safari 16.4+, Edge 121+). Jedyne zastrzeżenia: AVIF wolniej się koduje (co ma znaczenie przy generowaniu dynamicznym) i wymaga nieco więcej CPU do dekodowania.

Jak wdrożyć nowoczesne formaty?

Użyj elementu <picture> z fallbackiem:

<picture>
  <source srcset="produkt.avif" type="image/avif">
  <source srcset="produkt.webp" type="image/webp">
  <img src="produkt.jpg" alt="Niebieskie buty do biegania Nike Pegasus 41"
       width="800" height="600" loading="lazy">
</picture>

Przeglądarka wybierze pierwszy obsługiwany format — AVIF, jeśli go obsługuje, potem WebP, a na końcu JPEG jako fallback. Zero JavaScriptu, działa od razu.

Kompresja: mniejszy plik, ta sama jakość

Sam format to nie wszystko. Nawet WebP można zapisać ze zbyt wysoką jakością i stracić większość korzyści. Zasada kciuka: jakość 75–85% dla stratnej kompresji daje optymalny stosunek rozmiaru do jakości wizualnej. Różnicę między 85% a 100% zobaczy jedynie pixel-peeper z monitorem za 5000 zł.

Narzędzia do kompresji

Dla pojedynczych obrazów:

• Squoosh — narzędzie Google, konwersja w przeglądarce, podgląd A/B
• TinyPNG — PNG i JPEG, API do automatyzacji

Dla pipeline'ów (automatycznie):

• Sharp (Node.js) — najszybsza biblioteka do konwersji i kompresji obrazów
• Pillow (Python) — dojrzała biblioteka z obsługą WebP i AVIF
• imagemin — pluginy do Webpack/Vite

# Konwersja całego katalogu na WebP za pomocą cwebp (Google)
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

# Lub za pomocą Sharp w Node.js (jednolinijkowy)
npx sharp-cli --input "*.jpg" --output converted/ --format webp --quality 80

Dla CMS (WordPress, Shopify):

• Wtyczki jak ShortPixel, Imagify czy EWWW automatycznie konwertują upload na WebP/AVIF i serwują odpowiedni format na podstawie nagłówka Accept przeglądarki.

Lazy loading: ładuj tylko to, co widzi użytkownik

Lazy loading to technika, w której obrazy poniżej widocznego obszaru (below the fold) ładowane są dopiero gdy użytkownik zbliża się do nich podczas scrollowania. Zamiast pobierać 30 obrazów przy wejściu na stronę, przeglądarka pobiera 3–4 widoczne, a resztę doładowuje na żądanie.

Implementacja jest banalna

<!-- Obrazy poniżej foldu — lazy loading -->
<img src="produkt-2.webp"
     alt="Czarny plecak turystyczny 40L"
     width="600" height="400"
     loading="lazy">

<!-- Hero image / obraz LCP — NIE stosuj lazy loading! -->
<img src="hero-banner.webp"
     alt="Kolekcja wiosna 2026 — buty do biegania"
     width="1200" height="600"
     loading="eager"
     fetchpriority="high">

Atrybut loading="lazy" jest wspierany natywnie przez Chrome, Firefox, Edge i Safari (od 15.4). Nie potrzebujesz żadnej biblioteki JS.

Krytyczna zasada: nie lazy-loaduj obrazu LCP

To najczęstszy błąd. Obraz hero, który jest elementem LCP (Largest Contentful Paint), musi załadować się natychmiast. Jeśli dodasz mu loading="lazy", przeglądarka celowo opóźni jego pobranie — a Twój wynik LCP dramatycznie się pogorszy.

Jak to działa w Chrome? Przeglądarka stosuje próg odległości od viewportu:

• Na 4G: 1250 px od widocznego obszaru
• Na 3G i wolniejszych: 2500 px

Obrazy w tym promieniu zaczynają się pobierać z wyprzedzeniem. Testy Chrome pokazują, że 97,5% lazy-loaded obrazów na 4G jest w pełni załadowanych w ciągu 10 ms od momentu, gdy stają się widoczne. Użytkownik nie zauważy różnicy.

Chcesz szybko sprawdzić, które obrazy na Twojej stronie powinny mieć lazy loading? Lighthouse w SiteSpector automatycznie wykrywa obrazy bez odpowiednich atrybutów i podpowiada, co zmienić.

Responsywne obrazy: jeden obraz, wiele rozmiarów

Serwowanie obrazu 2400 px szerokości na telefonie z ekranem 375 px to marnotrawstwo. Przeglądarka pobiera megabajty danych, żeby wyświetlić obraz pomniejszony do 20% oryginału.

Rozwiązanie to atrybut srcset z deskryptorami szerokości:

<img srcset="produkt-400w.webp 400w,
             produkt-800w.webp 800w,
             produkt-1200w.webp 1200w,
             produkt-1600w.webp 1600w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            33vw"
     src="produkt-800w.webp"
     alt="Czerwona kurtka outdoorowa z membraną Gore-Tex"
     width="800" height="1000"
     loading="lazy">

Przeglądarka sama wybierze optymalny rozmiar na podstawie szerokości viewportu i gęstości pikseli ekranu. Na iPhonie pobierze wariant 400w zamiast 1600w — oszczędzając 75% transferu.

Zawsze podawaj width i height

To kluczowe dla CLS (Cumulative Layout Shift). Bez wymiarów przeglądarka nie wie, ile miejsca zarezerwować na obraz — a gdy ten się załaduje, cały layout się przesuwa. Użytkownicy nienawidzą tych „skoków", a Google je karze. Więcej o tym w naszym przewodniku po Core Web Vitals.

<!-- Źle — brak wymiarów, powoduje CLS -->
<img src="banner.webp" alt="...">

<!-- Dobrze — wymiary pozwalają zarezerwować miejsce -->
<img src="banner.webp" alt="..." width="1200" height="400">

<!-- Jeszcze lepiej — CSS aspect-ratio jako zabezpieczenie -->
<style>
  .hero-img { aspect-ratio: 3 / 1; width: 100%; height: auto; }
</style>
<img class="hero-img" src="banner.webp" alt="..." width="1200" height="400">

Mapa witryny dla obrazów (image sitemap)

Standardowa sitemap.xml zawiera URL-e stron. Ale Google pozwala dodać do niej informacje o obrazach, co pomaga w indeksacji — szczególnie gdy Twoje grafiki nie są osadzone w standardowym HTML-u (np. ładowane przez JavaScript).

<url>
  <loc>https://example.com/produkty/buty-do-biegania</loc>
  <image:image>
    <image:loc>https://cdn.example.com/buty-pegasus-41.webp</image:loc>
  </image:image>
  <image:image>
    <image:loc>https://cdn.example.com/buty-pegasus-41-podeszwa.webp</image:loc>
  </image:image>
</url>

Google akceptuje obrazy hostowane na innych domenach (np. CDN), ale zaleca zweryfikowanie domeny CDN w Search Console. Dla sklepów z setkami produktów, image sitemap potrafi zwiększyć liczbę zaindeksowanych grafik nawet o 30–40%.

Checklist: 10 kroków optymalizacji obrazów

Masz dużo do ogarnięcia. Oto zwięzła lista priorytetów — od najwyższego do najniższego wpływu:

1. Dodaj opisowe ALT tagi do wszystkich znaczących obrazów — opisz, co widać, z uwzględnieniem kontekstu strony.
2. Konwertuj na WebP (lub AVIF) — użyj <picture> z fallbackiem na JPEG/PNG.
3. Kompresuj z jakością 75–85% — różnica wizualna minimalna, oszczędność rozmiaru ogromna.
4. Nie lazy-loaduj obrazu LCP — hero image serwuj z loading="eager" i fetchpriority="high".
5. Dodaj loading="lazy" do reszty obrazów — wszystko poniżej foldu ładuj leniwie.
6. Podawaj width i height — zapobiegaj przesunięciom layoutu (CLS).
7. Używaj srcset dla responsywnych obrazów — nie serwuj 1600 px na telefonie.
8. Nazywaj pliki opisowo — buty-nike-pegasus.webp, nie IMG_4832.webp.
9. Dodaj obrazy do sitemap — pomóż Google znaleźć i zaindeksować Twoje grafiki.
10. Automatyzuj — narzędzia jak Sharp, ShortPixel czy pipeline CI/CD powinny konwertować i kompresować obrazy bez Twojej ingerencji.

To dużo? Nie musisz robić wszystkiego ręcznie. SiteSpector przeprowadza audyt Lighthouse dla każdej strony i wykrywa: brakujące ALT tagi, niezoptymalizowane obrazy, błędy lazy loading, brak wymiarów. Zamiast sprawdzać setki stron ręcznie, uruchom audyt i dostaniesz listę problemów posortowaną od najważniejszych.

Podsumowanie

Optymalizacja obrazów to jedno z najskuteczniejszych quick wins w SEO. Konwersja na WebP, dodanie brakujących ALT tagów i wdrożenie lazy loadingu to zmiany, które możesz wdrożyć w jeden dzień — a efekty zobaczysz w ciągu tygodnia w postaci lepszego LCP, mniejszego transferu i stopniowo rosnącej widoczności w Google Images.

Nie czekaj, aż Google zacznie karać Twoją stronę za wolne ładowanie. Uruchom darmowy audyt w SiteSpector — sprawdzisz stan obrazów, ALT tagów i Core Web Vitals w kilka minut. System wskaże Ci dokładnie, co poprawić i w jakiej kolejności.