Image SEO 2026 — alt, lazy loading, WebP i AVIF (kompletny przewodnik)

Image SEO w 2026 to nie tylko alt text — to kombinacja Core Web Vitals (LCP), formatów (AVIF/WebP), lazy loadingu, accessibility i ruchu z Google Images. Niezoptymalizowany obraz = strata pozycji w SERP, strata ruchu z Google Images, strata 30% użytkowników na slow load.

TL;DR — Image SEO

Element	Co zrobić	Impact
Format	AVIF > WebP > JPG (Next.js auto)	-50% rozmiaru
Alt text	Opis konkretny + naturalny	Accessibility + Google Images
Lazy loading	loading="lazy" poniżej viewport	LCP improvement
Sizes/srcset	Responsive images	Mobile speed
Wymiary	width + height attributes	CLS prevention
CDN	Cloudflare / Vercel Edge	Global delivery
Filename	descriptive-with-keyword.webp	Google Images
Schema	ImageObject w Article schema	Rich results

---

Dlaczego image SEO ma znaczenie?

Trzy fronty:

1. Core Web Vitals — LCP

Obrazy są często Largest Contentful Paint — największym elementem above-the-fold. Wolny obraz LCP = niska pozycja w SERP po marcu 2026 (kiedy Google obniżył próg LCP z 2.5s do 2.0s).

2. Google Images traffic

10-30% ruchu organic dla niektórych branż (e-commerce, real estate, food, fashion) pochodzi z Google Images. Niezoptymalizowane obrazy = brak tej widoczności.

3. Accessibility = E-E-A-T

Strony bez alt text są niedostępne dla niewidzących. Google używa accessibility jako sygnału E-E-A-T (Trustworthiness). Strony z dobrym accessibility mają wyższe pozycje.

Formaty obrazów 2026

AVIF (preferowany)

• Kompresja: 30-50% mniejsze niż WebP, 50-70% mniejsze niż JPG przy tej samej jakości
• Wsparcie przeglądarek: 95%+ w 2026 (Chrome, Firefox, Safari 16+, Edge)
• Use case: wszystkie nowe obrazy

WebP (fallback)

• Kompresja: 25-35% mniejsze niż JPG
• Wsparcie: 99%+ przeglądarek
• Use case: fallback dla AVIF

JPG (last resort)

• Kompresja: baseline
• Wsparcie: 100%
• Use case: legacy compatibility, fallback

PNG

• Use case: TYLKO logo, ikony z transparency. Dla zdjęć JPG/WebP/AVIF.

SVG

• Use case: wektorowa grafika (logo, ikony, ilustracje). Zerowa waga przy wysokich rozdzielczościach.

Implementacja w Next.js

Next.js Image Component automatycznie:

• Generuje WebP + AVIF
• Lazy loading native
• Responsive srcset
• Width/height = no CLS

import Image from 'next/image'

<Image
  src="/blog/post-cover.jpg"
  alt="Konkretny opis obrazu z kontekstem SEO"
  width={1200}
  height={630}
  priority={false}  // true dla above-the-fold LCP
  placeholder="blur"
  blurDataURL="..."
/>

Dla above-the-fold: priority={true} (preload, no lazy) + dimensions. Dla below-the-fold: domyślnie lazy.

Alt text — best practices

Złe alt text

<!-- Zbyt generyczne -->
<img alt="image1" />

<!-- Pusty (jeśli obraz dekoracyjny — OK, ale lepiej alt="") -->
<img alt="" />

<!-- Keyword stuffing -->
<img alt="seo agencja seo warszawa pozycjonowanie seo google" />

<!-- Niepotrzebny prefix -->
<img alt="Image of a laptop on a desk" />

Dobre alt text

<!-- Konkretny opis -->
<img alt="Wykres pokazujący wzrost ruchu organicznego z 1000 do 5000/mies. po 6 miesiącach SEO" />

<!-- Z kontekstem branżowym -->
<img alt="Panel Google Search Console — raport Performance pokazujący 30% wzrost CTR" />

<!-- Naturalny język -->
<img alt="Marcin Godula, CEO ARDURA Lab, prezentuje strategię GEO na konferencji" />

Zasady

1. Konkretny opis — co dokładnie jest na obrazie
2. Kontekst — dlaczego ten obraz jest w treści
3. Naturalny język — bez keyword stuffing
4. Krótki — 80-125 znaków idealne
5. Pomiń „image of" — screenreader już mówi „obraz"
6. Dekoracyjne obrazy — alt="" (pusty)

Lazy loading

Native lazy loading (recommended)

<img src="image.jpg" loading="lazy" alt="..." />

Wsparcie: 96%+ przeglądarek w 2026. Google respektuje native lazy loading bez problemów.

Above-the-fold = NIE lazy

Pierwszy obraz w viewport (LCP candidate) nie powinien być lazy:

<!-- Hero image — eager + priority -->
<img src="hero.jpg" loading="eager" fetchpriority="high" alt="..." />

<!-- Below-fold — lazy -->
<img src="content-image.jpg" loading="lazy" alt="..." />

W Next.js: priority={true} na hero, default lazy na resto.

JS-based lazy loading (legacy)

<img data-src="image.jpg" class="lazyload" alt="..." />

Wymaga JavaScript wykonującego load. Googlebot nie wykonuje całego JS — może nie zobaczyć obrazu. Migrate na native.

Responsive images — srcset i sizes

Mobile widzi małe obrazy, desktop duże. Ten sam plik dla obu = waste.

<img
  src="image-1200.webp"
  srcset="
    image-400.webp 400w,
    image-800.webp 800w,
    image-1200.webp 1200w,
    image-1600.webp 1600w
  "
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="..."
/>

Browser wybiera najlepszy rozmiar. Next.js robi to automatycznie z <Image />.

Width + height = no CLS

Zawsze podaj width i height:

<!-- Dobre — browser rezerwuje miejsce -->
<img src="image.jpg" width="1200" height="630" alt="..." />

<!-- Złe — browser nie wie rozmiaru, layout shift po load -->
<img src="image.jpg" alt="..." />

Bez wymiarów = CLS (Cumulative Layout Shift) > 0.1 = niska Page Experience score.

Filename SEO

Google Images analizuje nazwy plików. Złe vs dobre:

❌ IMG_20260501_143022.jpg ❌ image.jpg ❌ img-1.jpg

✅ seo-audit-checklist-2026.webp ✅ marcin-godula-ceo-ardura-lab.webp ✅ wykres-wzrostu-ruchu-organic.webp

Zasady: lowercase, hyphens (nie underscores), descriptive, max 60 znaków, opcjonalnie 1 keyword.

CDN i image delivery

Pliki obrazów powinny być serwowane z CDN (geograficznie blisko użytkownika):

• Cloudflare (free + Pro plan)
• Vercel Edge Network (z Next.js)
• Cloudinary (image-specific CDN z transformacjami)
• imgix (similar)

CDN = -200-500ms LCP improvement (zależnie od lokalizacji użytkownika vs serwera origin).

Schema.org dla obrazów

W Article schema dodaj ImageObject:

{
  "@type": "Article",
  "image": {
    "@type": "ImageObject",
    "url": "https://example.com/image.jpg",
    "width": 1200,
    "height": 630
  }
}

To pomaga w rich results (np. obraz przy artykule w SERP).

Google Images optymalizacja

Aby pojawić się wysoko w Google Images:

1. Filename z keyword (descriptive)
2. Alt text kompletny
3. Otaczający tekst — title page, H1, body content związane tematycznie z obrazem
4. Schema ImageObject — w Article / Product
5. Resolution — minimum 800x800px (Google preferuje high-res)
6. Format — WebP/AVIF (loaduje szybciej, lepsza pozycja)
7. Sitemap.xml z image entries

Najczęstsze błędy

1. Brak alt text — ARIA naruszenie + zerowa szansa Google Images
2. Generic filenames (IMG_xxx.jpg)
3. Brak dimensions — CLS issue
4. JS-only lazy load — Googlebot nie widzi obrazów
5. Ten sam rozmiar dla mobile/desktop — wolne mobile
6. JPG zamiast WebP/AVIF — 50% większe pliki
7. No CDN — wolne ładowanie
8. Hero image lazy load — LCP fail

Audyt obecnych obrazów

# Screaming Frog → Images Tab
# Filtry: Missing Alt Text, Over 100KB, Non-Indexable

# Lub PageSpeed Insights:
# pagespeed.web.dev → "Properly size images" + "Defer offscreen images"

Cel po audycie:

• 100% obrazów z alt text
• 0 obrazów >100KB poza specjalnymi
• 100% lazy loading below fold
• 100% width+height attributes

Podsumowanie

Image SEO 2026:

1. Format AVIF/WebP zamiast JPG/PNG
2. Alt text konkretny, naturalny
3. Lazy loading native (loading="lazy")
4. Width + height zawsze
5. Responsive srcset/sizes
6. CDN dla delivery
7. Filename descriptive
8. Schema ImageObject w Article

W Next.js większość z tego masz „za darmo" przez <Image />. W innych stackach (WordPress, custom) wymaga wdrożenia.

Niezoptymalizowane obrazy to dziś najczęstszy „silent killer" CWV. Optymalizacja = często +0.5s w LCP = wzrost pozycji o 5-10 średnio.

Audyt SEO technicznego zawsze obejmuje obrazy. Zamów, sprawdzimy obecny stan.