Opisuj i odchudzaj obrazy, by wspierały tekst
Opis
To kryterium sprawdza obrazy na stronie. Spośród obrazów treściowych (widocznych, o wymiarach co najmniej 50 × 50 px, nieoznaczonych jako dekoracyjne) co najmniej 90% musi mieć tekst alternatywny, a 90% – zadeklarowane wymiary. Co najmniej 80% obrazów rastrowych musi być w formacie WebP lub AVIF (pliki SVG się nie liczą), a żaden obraz nie może przekraczać 500 KB.
iPand sprawdza, czy tekst alternatywny istnieje, a nie czy jest trafny, i nie ocenia jakości wizualnej obrazów.
Dlaczego to ważne dla AI
Robot, który czyta tekst strony, widzi obraz tylko przez jego tekst alternatywny. Google wykorzystuje go razem z widzeniem komputerowym i treścią strony, by zrozumieć, co przedstawia obraz, i zaleca wspieranie tekstu obrazami dobrej jakości. Obrazy często też najbardziej zwiększają rozmiar strony.
- Precyzyjny tekst alternatywny mówi, co przedstawia obraz: produkt, miejsce, osobę.
- WebP i AVIF kompresują znacznie lepiej niż JPEG i PNG: strona ładuje się szybciej.
- Zadeklarowane wymiary rezerwują miejsce na obraz i zapobiegają przesuwaniu się strony podczas ładowania.
Jak to poprawić
- 1 Opisz każdą grafikę w tekście alternatywnym Wypełnij atrybut alt każdego użytecznego obrazu krótkim zdaniem: „Niebieski elektryczny rower towarowy przed warsztatem” zamiast „image1” czy listy słów kluczowych. W przypadku obrazu czysto dekoracyjnego zostaw pusty alt (alt=""): taki obraz nie jest liczony.
- 2 Przekonwertuj obrazy do WebP lub AVIF Eksportuj zdjęcia i ilustracje do formatu WebP lub AVIF w programie graficznym albo za pomocą wtyczki CMS. Jeśli chcesz zachować JPEG jako wersję zapasową, podaj oba formaty w elemencie <picture>: przeglądarka pobierze tylko pierwszy format, który potrafi odczytać.
- 3 Odchudź ciężkie obrazy Żaden obraz nie powinien przekraczać 500 KB. Dopasuj rozmiar każdego obrazu do jego wielkości na ekranie, skompresuj go i udostępnij kilka rozmiarów za pomocą srcset i sizes, by urządzenia mobilne dostawały odpowiednią wersję.
- 4 Zadeklaruj szerokość i wysokość Dodaj do każdego tagu <img> atrybuty width i height zgodne z proporcjami obrazu albo zarezerwuj miejsce właściwością CSS aspect-ratio. Przeglądarka zachowa wtedy miejsce na obraz podczas ładowania, nawet jeśli arkusz stylów później dopasuje jego rozmiar.
Do zapamiętania
Opisane, lekkie obrazy z zadeklarowanymi wymiarami pomagają wyszukiwarkom zrozumieć stronę i przyspieszają jej ładowanie. iPand sprawdza te cztery punkty przy każdej analizie; trafność tekstów alternatywnych warto sprawdzić samodzielnie.
