Image SEO - kompletna optymalizacja obrazów dla wyszukiwarek

Nazwy plików:
- Opisowe, ze słowami kluczowymi
- Małe litery, myślniki zamiast spacji
- Dobre: `czerwone-buty-sportowe-nike.jpg`
- Złe: `IMG_1234.jpg`, `obraz(1).png`

Alt text (tekst alternatywny):
- Opisz co jest na obrazku
- Dla użytkowników niewidomych (screen readers)
- Naturalnie wpleć słowo kluczowe
- Max ~125 znaków

Przykład dobrego alt:

<img src="czerwone-buty-nike.jpg" 
     alt="Czerwone buty sportowe Nike Air Max na białym tle">

Czego unikać w alt:
- Keyword stuffing ("buty buty sportowe buty nike buty")
- "Obrazek", "zdjęcie" na początku
- Pusty alt dla ważnych obrazów
- Za długie opisy

Kiedy używać pustego alt:
- Obrazy dekoracyjne (ikony, tła)
- `alt=""` mówi screen readerom żeby pominąć
- Nie pomijaj atrybutu całkowicie

Nowoczesne formaty:

WebP:
- 25-35% mniejszy niż JPEG/PNG
- Wsparcie: 97%+ przeglądarek
- Obsługuje przezroczystość
- Rekomendowany standard

AVIF:
- 50% mniejszy niż JPEG
- Wsparcie: ~85% przeglądarek
- Wolniejsze enkodowanie
- Przyszłość, ale fallback potrzebny

Fallback dla starszych przeglądarek:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Opis obrazu">
</picture>

Kompresja:
- Lossy: 80-85% jakości to sweet spot
- Target: <100KB dla content images
- Hero images: <200KB
- Thumbnails: <30KB

Narzędzia:
- Squoosh (web app, najlepsza kontrola)
- TinyPNG/TinyJPG
- ImageOptim (Mac)
- ShortPixel (WordPress plugin)

Określaj wymiary:

<img src="photo.webp" width="800" height="600" alt="...">

Lazy loading:

<img src="photo.webp" loading="lazy" alt="...">

Responsive images:

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

Preload dla LCP image:

<link rel="preload" as="image" href="hero.webp">

Image sitemap:

<url>
  <loc>https://example.com/page/</loc>
  <image:image>
    <image:loc>https://example.com/images/photo.jpg</image:loc>
    <image:caption>Opis zdjęcia</image:caption>
  </image:image>
</url>

Schema ImageObject:

{
  "@type": "ImageObject",
  "contentUrl": "https://example.com/image.jpg",
  "description": "Opis obrazu",
  "name": "Nazwa obrazu"
}

Dla e-commerce - Product images:
- Schema Product z image property
- Wiele zdjęć produktu
- Wysokiej jakości, white background

Google Images ranking factors:
- Alt text i kontekst na stronie
- Jakość i oryginalność obrazu
- Autorytet strony
- Mobile-friendliness strony
- SafeSearch classification

Prawa autorskie:
- Używaj własnych zdjęć lub licencjonowanych
- Google Image Search pokazuje licencje (IPTC metadata)
- Watermarki nie blokują indeksacji, ale szkodzą UX