Optymalizacja obrazów nie kończy się na kompresji. Dobre wdrożenie łączy opis alternatywny, właściwe wymiary, responsywne źródła i sposób ładowania dopasowany do miejsca, w którym grafika pojawia się na stronie.
W skrócie
Opisuj obraz alt-em wtedy, gdy niesie informację. Nie ładuj pliku 2400 px do kafelka 320 px. Zachowaj wymiary w HTML, korzystaj z nowoczesnych formatów i nie ustawiaj lazy loadingu na głównym obrazie LCP bez sprawdzenia efektu.
Alt opisuje funkcję lub znaczenie obrazu
Tekst alternatywny jest przede wszystkim elementem dostępności. Powinien przekazywać informację, którą użytkownik traci, gdy obrazu nie widzi. Dekoracyjne grafiki mogą mieć pusty alt, a zdjęcie produktu powinno opisywać to, co faktycznie przedstawia.
Rozdziel rozmiar pliku od wymiarów obrazu
Dwa zdjęcia mogą wyglądać podobnie, ale jedno ważyć kilkukrotnie więcej przez niepotrzebną rozdzielczość lub nieefektywny format. WordPress generuje warianty rozmiarów — warto zadbać, aby szablon wybierał wersję dopasowaną do miejsca wyświetlania.
Nowoczesny format pomaga, ale nie naprawi złego źródła
WebP czy AVIF potrafią zmniejszyć transfer, ale nadal można stworzyć bardzo ciężki plik, jeśli grafika jest przesadnie duża. Format, kompresja i wymiary powinny być optymalizowane razem.
Lazy loading jest świetny poniżej pierwszego ekranu
Odkładanie ładowania obrazów, których użytkownik jeszcze nie widzi, ogranicza niepotrzebny transfer na starcie. Inaczej wygląda sytuacja z obrazem hero będącym kandydatem do LCP — jego zbyt późne załadowanie może pogorszyć odczuwaną szybkość.
Zarezerwuj miejsce na obraz
Atrybuty wymiarów lub właściwy aspect-ratio pomagają przeglądarce zarezerwować przestrzeń przed pobraniem grafiki. Dzięki temu zawartość nie przeskakuje po pojawieniu się obrazu i łatwiej utrzymać dobry CLS.
Najważniejszy wniosek
Najlepszy obraz to nie najmniejszy plik za wszelką cenę, tylko właściwy plik dla konkretnego miejsca: czytelny, dostępny i załadowany we właściwym momencie.
Źródło do dalszej weryfikacji: Google Search Central – SEO Starter Guide.