Optymalizacja obrazów SEO: alt teksty, WebP/AVIF, lazy loading i więcej

Optymalizacja obrazów pod kątem SEO to zestaw działań technicznych i contentowych, które pomagają wyszukiwarkom zrozumieć wizualną zawartość strony, przyspieszają jej ładowanie i poprawiają pozycje zarówno w wynikach organicznych, jak i w Grafice Google. Prawidłowo zoptymalizowane obrazy generują dodatkowy ruch z wyszukiwania grafik, poprawiają Core Web Vitals i zwiększają ogólną widoczność strony.

Według danych Google obrazy pojawiają się w około 20% zapytań wyszukiwania — ogromny potencjał ruchu, który większość stron traci przez brak tekstów alt i przestarzałe formaty plików.

Czym jest optymalizacja obrazów SEO?

Optymalizacja obrazów SEO to proces przygotowania zawartości wizualnej strony tak, aby wyszukiwarki mogły ją poprawnie odczytać, zaindeksować i uszeregować. Obejmuje: opisowe teksty alt, nowoczesne formaty plików (WebP, AVIF), właściwe nazewnictwo plików, kompresję bez straty jakości, atrybuty wymiarów zapobiegające CLS, responsywne srcset, znaczniki Schema.org oraz Image Sitemap.

Google nie „widzi” obrazów tak jak człowiek. Analizuje sygnały tekstowe otaczające obraz: atrybut alt, nazwę pliku, tytuł strony, podpisy i dane strukturalne. Dlatego właściwie wypełnione metadane tekstowe są podstawą widoczności obrazu w wyszukiwarce.

Teksty alt: jak je pisać poprawnie

Tekst alt (atrybut alt znacznika <img>) pełni dwie funkcje: dostępność dla osób z wadami wzroku (czytniki ekranu) i SEO (główny sygnał trafności dla robota wyszukiwarki).

Zasady pisania tekstu alt

• Opisuj zawartość obrazu — nie „photo1.jpg”, ale „Przykład tekstu alt wyświetlanego w czytniku ekranu”
• Uwzględniaj słowo kluczowe naturalnie — nie spam, lecz organiczna integracja: „Proces kompresji obrazu WebP w Squoosh”
• Do 125 znaków — czytniki ekranu obcinają po tym progu
• Nie zaczynaj od „Obraz…” lub „Zdjęcie…” — przeglądarki już wiedzą, że to obraz
• Obrazy dekoracyjne — używaj alt="" (pusty, ale atrybut jest obowiązkowy)

Czego unikać

• Nie powielaj tekstu alt słowo w słowo w podpisie lub nazwie pliku
• Nie wypełniaj alt słowami kluczowymi oddzielonymi przecinkami: „seo obrazy, tekst alt, format webp”
• Nie pisz identycznego tekstu alt dla różnych obrazów na tej samej stronie

Nowoczesne formaty: WebP i AVIF

Format pliku obrazu bezpośrednio wpływa na rozmiar pliku, szybkość ładowania i wskaźniki Core Web Vitals — a co za tym idzie na pozycje w wyszukiwarce.

WebP

WebP to format od Google (2010). Zalety: o 25–35% mniejszy niż JPEG przy tej samej jakości; o 26% mniejszy niż PNG z przezroczystością. Obsługiwany przez 95%+ przeglądarek. To minimalny standard dla każdej nowej strony.

AVIF

AVIF (AV1 Image File Format) to kolejna generacja po WebP. Kompresja lepsza o 40–50% niż JPEG. Obsługiwana w Chrome 85+, Firefox 93+, Safari 16+. Starsze przeglądarki wymagają WebP jako fallback.

Prawidłowe użycie z elementem <picture>

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Opisowy tekst alt" width="800" height="600">
</picture>

Ten wzorzec serwuje AVIF nowoczesnym przeglądarkom, WebP tym obsługującym tylko WebP, a JPEG starszym. Atrybut alt umieszcza się tylko w końcowym <img>.

Lazy Loading: prawidłowa implementacja

Lazy loading odracza ładowanie obrazów: przeglądarka nie ładuje obrazu, dopóki nie pojawi się w widoku. Przyspiesza to początkowe ładowanie strony i poprawia LCP.

Implementacja

<img src="image.webp" alt="Opisowy tekst alt" loading="lazy" width="800" height="600">

Atrybut loading="lazy" jest obsługiwany przez wszystkie nowoczesne przeglądarki i Googlebot. Zawsze łącz go z width i height — w przeciwnym razie lazy loading może spowodować CLS.

Ważne: NIE używaj lazy loading dla głównego obrazu

Obraz above-the-fold (zwykle hero lub okładka) musi ładować się natychmiast. Użyj loading="eager" lub pomiń atrybut loading. Jeśli Google wykryje, że element LCP ma loading="lazy", pogorszy to wynik LCP i pozycje.

Kompresja i rozmiar pliku

Nawet w formacie WebP duży plik spowalnia stronę. Polecane narzędzia:

• Squoosh (squoosh.app) — narzędzie przeglądarkowe od Google, obsługuje AVIF/WebP/JPEG/PNG
• TinyPNG / TinyJPG — kompresja online z minimalną utratą jakości
• imagemin — pakiet npm do automatyzacji w procesie budowania
• Sharp — biblioteka Node.js do masowej konwersji i kompresji

Wskazówki: obrazy artykułu — poniżej 150 KB; hero image — poniżej 200 KB; miniatury — poniżej 30 KB. Sprawdzaj przez PageSpeed Insights lub Lighthouse.

Nazewnictwo plików

Nazwa pliku to kolejny sygnał tekstowy dla Google. Źle: IMG_20240312_141523.jpg. Dobrze: optymalizacja-obrazow-seo-tekst-alt.webp.

• Używaj małych liter i myślników (nie podkreśleń)
• Uwzględnij główne słowo kluczowe lub jego wariant
• Unikaj słów funkcyjnych i znaków specjalnych
• Maksymalnie 3–5 słów — krótko i opisowo

Atrybuty width i height oraz zapobieganie CLS

Cumulative Layout Shift (CLS) — przeskakiwanie treści podczas ładowania — jest wskaźnikiem Core Web Vitals bezpośrednio wpływającym na pozycje. Główna przyczyna: przeglądarka nie zna wymiarów obrazu przed pobraniem.

Rozwiązanie: zawsze deklaruj width i height w pikselach:

<img src="image.webp" alt="Opisowy tekst alt" width="1200" height="675" loading="lazy">

Nowoczesne przeglądarki używają tych atrybutów do obliczenia proporcji i rezerwacji miejsca przed pobraniem pliku. Cel CLS: poniżej 0.1 (Good).

srcset: responsywne obrazy

Atrybut srcset pozwala przeglądarce wybrać optymalny rozmiar obrazu w zależności od szerokości ekranu. Zmniejsza to zużycie danych na urządzeniach mobilnych i przyspiesza ładowanie.

<img
  src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Opisowy tekst alt"
  width="1200" height="675"
>

W WordPress: wtyczki Smush lub ShortPixel automatycznie generują srcset dla wszystkich wgranych obrazów.

Schema.org i Image Sitemap

Schema.org ImageObject

Znaczniki ImageObject przekazują Google ustrukturyzowane metadane o obrazie: autora, licencję, opis. Szczególnie ważne dla Grafiki Google i Rich Results.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "name": "Optymalizacja obrazów SEO",
  "url": "https://example.com/images/seo-image.webp",
  "width": 1400,
  "height": 730,
  "author": { "@type": "Organization", "name": "Spilno Agency" }
}
</script>

Image Sitemap

Image Sitemap to rozszerzenie XML sitemap.xml wymieniające wszystkie obrazy witryny. Szczególnie ważny dla obrazów ładowanych przez JavaScript lub lazy loading.

<url>
  <loc>https://example.com/page/</loc>
  <image:image>
    <image:loc>https://example.com/images/seo-image.webp</image:loc>
    <image:title>Optymalizacja obrazów SEO</image:title>
  </image:image>
</url>

Checklista optymalizacji obrazów SEO

• Wszystkie obrazy mają unikalny opisowy tekst alt (do 125 znaków)
• Teksty alt zawierają słowo kluczowe naturalnie, bez upychania
• Obrazy dekoracyjne mają alt=”” (pusty atrybut)
• Wszystkie nowe obrazy są przekonwertowane na WebP lub AVIF
• Element <picture> z AVIF + WebP + JPEG fallback używany dla kluczowych obrazów
• loading=”lazy” dla wszystkich obrazów poniżej fold
• loading=”eager” lub brak atrybutu dla hero image LCP (powyżej fold)
• Wszystkie obrazy mają atrybuty width i height
• CLS zweryfikowany przez PageSpeed Insights (< 0.1)
• Nazwy plików: małe litery, myślniki, słowo kluczowe, bez znaków specjalnych
• srcset i sizes skonfigurowane dla responsywnych obrazów
• Schema.org ImageObject dodana dla kluczowych obrazów
• Image Sitemap skonfigurowany lub włączony przez wtyczkę
• Rozmiar każdego obrazu zweryfikowany (artykuł: <150 KB, hero: <200 KB)

Orientacja SEO i GEO

Materiał jest zoptymalizowany pod klaster semantyczny „optymalizacja obrazów SEO”: teksty alt, formaty WebP/AVIF, lazy loading, kompresja, srcset, zapobieganie CLS, Schema.org i Image Sitemap. Sygnały GEO: Spilno Agency, rynki Ukrainy, Polski i anglojęzycznych odbiorców. Artykuł spełnia wymagania E-E-A-T: praktyczne doświadczenie agencji, konkretne przykłady kodu i checklista z 14 punktami.

Najczęściej zadawane pytania

Czym jest tekst alt i dlaczego ma znaczenie dla SEO?

Tekst alt (atrybut alt znacznika img) to tekstowy opis obrazu odczytywany przez roboty wyszukiwarek i czytniki ekranu dla osób z niepełnosprawnością wzroku. Dla SEO tekst alt jest głównym sygnałem trafności obrazu: Google używa go, aby zrozumieć co jest przedstawione na zdjęciu i odpowiednio je uszeregować w Grafice Google. Bez tekstu alt obraz jest praktycznie niewidoczny dla wyszukiwarek.

Który format obrazu jest lepszy dla SEO: WebP czy AVIF?

Oba formaty przewyższają JPEG i PNG pod względem kompresji przy równoważnej jakości wizualnej. WebP daje pliki mniejsze o 25–35% od JPEG przy około 95% pokryciu przeglądarek. AVIF daje pliki mniejsze o 40–50%, ale ma nieco niższe wsparcie przeglądarek. Optymalna strategia to użycie elementu picture z AVIF jako źródłem głównym i WebP jako fallback — zapewnia to kompatybilność przy maksymalnej kompresji.

Czy lazy loading wpływa na SEO?

Lazy loading (atrybut loading=”lazy” na img) nakazuje przeglądarce nie ładować obrazów dopóki nie pojawią się w widoku. Przyspiesza to początkowe ładowanie strony i poprawia LCP dla treści above-the-fold. Googlebot w pełni obsługuje lazy loading. Kluczowa zasada: NIE stosuj loading=”lazy” do głównego obrazu hero powyżej folda — użyj loading=”eager” lub pomiń atrybut, aby upewnić się, że obraz jest priorytetyzowany dla pomiaru LCP.

Dlaczego zawsze powinienem podawać atrybuty width i height dla obrazów?

Atrybuty width i height informują przeglądarkę o wymiarach obrazu przed jego pobraniem. Pozwala to przeglądarce z wyprzedzeniem zarezerwować odpowiednią przestrzeń w układzie, zapobiegając Cumulative Layout Shift (CLS) — wizualnemu przeskakiwaniu treści podczas ładowania obrazów. CLS jest wskaźnikiem Core Web Vitals, który bezpośrednio wpływa na pozycje Google. Zawsze deklaruj jawne wymiary dla wszystkich obrazów, szczególnie powyżej folda.

Czy Image Sitemap jest niezbędny?

Image Sitemap to plik XML (lub dedykowana sekcja w głównym sitemap.xml) zawierający listę wszystkich URL obrazów w witrynie wraz z metadanymi takimi jak tytuł, opis i licencja. Pomaga Google szybciej odkryć i zindeksować obrazy, szczególnie te ładowane przez JavaScript lub lazy loading. Image Sitemap jest szczególnie wartościowy dla witryn z dużą liczbą obrazów — sklepy e-commerce, portfolio fotograficzne i serwisy informacyjne.

Potrzebujesz audytu optymalizacji obrazów SEO swojej strony? Spilno Agency sprawdza teksty alt, formaty, wymiary i wydajność ładowania — i dostarcza priorytetowy plan optymalizacji.