Obrazy często stanowią największą część wagi strony. Źle przygotowane spowalniają jej ładowanie, a bez opisów są dla wyszukiwarki niezrozumiałe. Dobrze zoptymalizowane przyspieszają stronę i mogą przyciągać ruch z Grafiki Google. Poniżej opisuję, jak przygotować zdjęcia i grafiki na stronę – także w WordPressie.
Dlaczego optymalizacja obrazów jest ważna
- **Szybkość** – duży obrazek na górze strony to najczęstsza przyczyna słabego wyniku LCP w Core Web Vitals.
- **Stabilność układu** – obrazki bez określonych wymiarów przesuwają treść podczas ładowania (wskaźnik CLS).
- **Widoczność w Grafice Google** – zdjęcia mogą pojawiać się w wynikach obrazów i w bloku grafik w zwykłych wynikach.
- **Dostępność** – tekst alternatywny pozwala zrozumieć obraz osobom korzystającym z czytników ekranu.
Format pliku
- **WebP** – zwykle znacznie mniejszy od JPG i PNG przy podobnej jakości, obsługiwany przez wszystkie współczesne przeglądarki. Dobry wybór domyślny.
- **AVIF** – jeszcze lepsza kompresja, coraz szersza obsługa.
- **JPG** – zdjęcia, gdy nie możesz użyć nowszych formatów.
- **PNG** – grafiki z przezroczystością i ostrymi krawędziami, zrzuty ekranu.
- **SVG** – logotypy i ikony; skalują się bez utraty jakości.
Rozmiar i kompresja
- **Zmniejsz wymiary** do takich, w jakich obraz rzeczywiście się wyświetla. Zdjęcie 4000 px szerokości w kolumnie tekstu o szerokości 800 px to marnowanie transferu.
- **Skompresuj** – kompresja stratna z jakością ok. 75–85% jest zwykle niezauważalna dla oka.
- **Udostępnij kilka rozmiarów** (atrybut srcset), żeby telefon pobierał mniejszą wersję niż duży monitor. WordPress robi to automatycznie.
Narzędzia: Squoosh i TinyPNG w przeglądarce, a w WordPressie wtyczki takie jak ShortPixel, Imagify czy EWWW Image Optimizer, które kompresują i konwertują obrazy do WebP przy wgrywaniu.
Nazwa pliku
Nazwa pliku to wskazówka dla wyszukiwarki, co jest na zdjęciu. Zamiast IMG_4583.jpg lepiej: czerwony-rower-miejski.jpg – małe litery, bez polskich znaków, słowa rozdzielone myślnikami.
Tekst alternatywny (alt)
Najważniejszy opis obrazka dla SEO i dostępności. Opisz krótko, co przedstawia obraz w kontekście strony, np. „Czerwony rower miejski z koszykiem przed kamienicą”. Nie wpisuj listy słów kluczowych. Obrazy czysto dekoracyjne mogą mieć pusty alt. Szczegóły i przykłady w tekście o atrybucie alt.
Atrybut title (dymek po najechaniu myszą) nie ma znaczenia dla pozycji. Ważniejszy jest podpis pod zdjęciem i tekst wokół niego – Google korzysta z nich, żeby zrozumieć kontekst obrazu.
Lazy loading i wymiary
- **Leniwe ładowanie** (loading=”lazy”) opóźnia pobieranie obrazków poniżej widocznej części ekranu. WordPress dodaje je automatycznie.
- **Nie stosuj lazy loadingu dla głównego obrazka** na górze strony – opóźnia wtedy LCP. Ten obraz warto wręcz oznaczyć jako priorytetowy (fetchpriority=”high”).
- **Podawaj wymiary** (width i height), żeby przeglądarka zarezerwowała miejsce i treść nie przeskakiwała.
Grafika Google – jak zwiększyć widoczność obrazów
- Używaj własnych, unikalnych zdjęć zamiast tych samych zdjęć stockowych, które są na tysiącach stron.
- Umieszczaj obrazy blisko tekstu, który ich dotyczy, i pod ważnymi nagłówkami.
- Nie blokuj katalogu z obrazkami w robots.txt.
- Upewnij się, że obrazy są w mapie witryny – wtyczki SEO w WordPressie dodają je automatycznie do map wpisów.
- Dane strukturalne (np. Product, Recipe, Article) pomagają wyświetlać obrazy w wynikach rozszerzonych.
Jak użytkownicy szukają grafik, opisuję w tekście o wyszukiwaniu obrazów.
Jak mierzyć efekty
- **PageSpeed Insights** – pokazuje obrazy do kompresji, zmiany rozmiaru i zbyt późno ładowany element LCP.
- **Search Console → Skuteczność** – po zmianie typu wyszukiwania na „Grafika” zobaczysz wyświetlenia i kliknięcia z Grafiki Google.
- **Crawler** (np. Screaming Frog) – lista obrazów bez tekstu alternatywnego i zbyt dużych plików.
Optymalizacja obrazów to jeden z elementów technicznego SEO – pozostałe opisuję w poradniku o szybkości strony i w tekście o optymalizacji SEO stron internetowych.
