Image SEO - kompletna optymalizacja obrazów dla wyszukiwarek
Obrazy to często pomijany element SEO, a mogą generować znaczący ruch z Google Images. Poza tym, zoptymalizowane obrazy poprawiają szybkość strony i user experience. Poznaj wszystkie aspekty Image SEO - od nazw plików po nowoczesne formaty.
Krótka odpowiedź
Nazwy plików i alt text
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:
```html
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
Formaty i kompresja obrazów
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:
```html
```
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)
Wymiary, lazy loading i responsywność
Określaj wymiary:
```html
```
- Zapobiega CLS (layout shift)
- Przeglądarka rezerwuje miejsce przed załadowaniem
- Używaj też CSS aspect-ratio
Lazy loading:
```html
```
- Native lazy loading (no JS needed)
- Ładuje obrazy gdy zbliżają się do viewport
- NIE dla obrazów above the fold (LCP)
Responsive images:
```html
srcset="photo-400.webp 400w,
photo-800.webp 800w,
photo-1200.webp 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1200px) 800px,
1200px"
alt="...">
```
- Różne rozmiary dla różnych ekranów
- Oszczędza bandwidth na mobile
- Ważne dla Core Web Vitals
Preload dla LCP image:
```html
```
Google Images i advanced SEO
Image sitemap:
```xml
```
- Pomaga Google odkryć obrazy
- Szczególnie dla JS-rendered images
Schema ImageObject:
```json
{
"@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