Zdjęcia na stronie: format, rozmiar, lazy loading i wymiary
Zdjęcia na stronę zapisuj w formacie WebP albo AVIF, w rozmiarze zbliżonym do tego, w jakim się wyświetlają, i z atrybutami width i height. Leniwe ładowanie (loading="lazy") włączaj tylko dla zdjęć niżej na stronie, nigdy dla głównego zdjęcia pierwszego ekranu.
- Według Google zdjęcia WebP stratne są o 25–34% mniejsze od porównywalnych JPEG przy tej samej jakości, a bezstratne o 26% mniejsze od PNG.
- web.dev ostrzega, żeby nigdy nie ustawiać leniwego ładowania dla głównego zdjęcia pierwszego ekranu, bo zawsze opóźnia to wskaźnik LCP.
- web.dev zaleca podawać atrybuty width i height przy każdym obrazku albo rezerwować miejsce w CSS, żeby układ nie przeskakiwał podczas ładowania.
- Google opisuje tekst alternatywny (alt) jako najważniejszy atrybut obrazka; pomaga zrozumieć zdjęcie wyszukiwarce i osobom, które go nie widzą.
Format: JPG, PNG, WebP czy AVIF
Format to sposób zapisu pliku. JPG i PNG znają wszyscy, ale ważą sporo. WebP i AVIF to nowsze formaty, które przy tej samej jakości dają mniejsze pliki. Google podaje, że WebP stratny jest o 25–34% mniejszy od porównywalnego JPEG, a WebP bezstratny o 26% mniejszy od PNG.
AVIF zwykle kompresuje jeszcze mocniej. web.dev pisze, że Google i inni widzieli oszczędności ponad 50% względem JPEG, choć wynik zależy od zdjęcia i ustawień. Wyszukiwarka grafiki Google obsługuje oba formaty, a także JPG, PNG, GIF, BMP i SVG.
| Rodzaj grafiki | Format |
|---|---|
| Zdjęcie: realizacja, zespół, produkt | WebP albo AVIF |
| Grafika z przezroczystym tłem | WebP (obsługuje przezroczystość) albo PNG |
| Logo i ikony | SVG, czyli grafika wektorowa, ostra w każdym rozmiarze |
| Zrzut ekranu z dużą ilością tekstu | WebP albo PNG |
Rozmiar: nie wysyłaj zdjęcia z aparatu
Zdjęcie prosto z telefonu ma często 4000 pikseli szerokości i kilka megabajtów. Na stronie wyświetla się w miejscu szerokim na 800 albo 1200 pikseli. Klient pobiera wtedy kilka razy więcej danych, niż widzi.
Zasada jest prosta: plik ma być mniej więcej tak duży, jak miejsce, w którym się pokazuje, z zapasem na ekrany o dużej gęstości. Atrybut srcset pozwala podać kilka wersji tego samego zdjęcia, a przeglądarka wybierze właściwą dla ekranu. Google opisuje ten sposób w dokumentacji o obrazach.
Do zmniejszania i konwersji wystarczy darmowe narzędzie Squoosh od Google Chrome Labs (https://squoosh.app). W WordPressie robią to wtyczki do optymalizacji obrazów, a wiele hostingów i Cloudflare robi to automatycznie.
Leniwe ładowanie: tak dla zdjęć niżej, nie dla pierwszego ekranu
Atrybut loading="lazy" każe przeglądarce pobrać zdjęcie dopiero wtedy, gdy klient zbliży się do niego podczas przewijania. To dobre dla galerii, realizacji i zdjęć w dole strony. Strona startuje szybciej i zużywa mniej danych.
Dla głównego zdjęcia u góry strony to błąd. web.dev pisze wprost: nigdy nie ustawiaj leniwego ładowania dla elementu LCP, czyli największego elementu pierwszego ekranu. Przeglądarka zacznie go pobierać później, niż mogłaby. Temu zdjęciu daj odwrotnie: fetchpriority="high". web.dev radzi nadawać wysoki priorytet najwyżej jednemu albo dwóm zdjęciom.
Wymiary width i height: koniec ze skaczącą stroną
Gdy obrazek nie ma podanych wymiarów, przeglądarka nie wie, ile miejsca mu zostawić. Najpierw wyświetla tekst, potem doładowuje zdjęcie i wszystko przesuwa się w dół. To psuje wskaźnik CLS, a klient klika nie to, co chciał.
Rozwiązanie podaje web.dev: dodaj do każdego obrazka atrybuty width i height albo zarezerwuj miejsce w CSS właściwością aspect-ratio. Przykład: <img src="realizacja.webp" width="1200" height="800" alt="…">. Zdjęcie dalej może się skalować do szerokości ekranu, a przeglądarka zna jego proporcje.
Tekst alternatywny: krótki opis tego, co widać
Atrybut alt to opis obrazka dla tych, którzy go nie widzą: czytników ekranu, wolnych łączy i wyszukiwarki. Google pisze, że używa go razem z rozpoznawaniem obrazu i treścią strony, żeby zrozumieć, co jest na zdjęciu. Odradza upychanie w nim słów kluczowych.
Pisz, co widać i po co to jest: „Łazienka po remoncie: płytki w kolorze piasku i kabina bez brodzika”. Grafika czysto ozdobna, na przykład tło albo ozdobnik, dostaje pusty opis alt="". Wtedy czytnik ekranu ją pominie.
Jak sprawdzić to samemu
- W Chrome naciśnij F12, otwórz zakładkę Network (Sieć), wybierz filtr Img i odśwież stronę. Posortuj po kolumnie Size: na górze zobaczysz najcięższe zdjęcia.
- Kliknij prawym przyciskiem duże zdjęcie i otwórz je w nowej karcie. Jeśli ma kilka tysięcy pikseli szerokości, a na stronie zajmuje pół ekranu, jest za duże.
- W zakładce Elements kliknij główne zdjęcie u góry strony. Nie powinno mieć loading="lazy", a powinno mieć width i height.
- Wklej adres do PageSpeed Insights (https://pagespeed.web.dev) i przejrzyj część diagnostyczną. Uwagi o obrazach pokazują, ile danych da się zaoszczędzić.
Co sprawdza bezpłatny skan
- Na stronie głównej sprawdza pierwsze zdjęcie w kodzie strony. Gdy stoi przed pierwszym nagłówkiem H2 albo w sekcji oznaczonej jako hero czy banner, skan uznaje je za główne. Jeśli takie zdjęcie ma loading="lazy", zgłasza błąd krytyczny. Kolejnych zdjęć z pierwszego ekranu ta reguła nie sprawdza.
- Ostrzega, gdy więcej niż jedno zdjęcie nie ma atrybutów width i height, oraz gdy więcej niż dwa mają w src rozszerzenie .jpg, .png albo .bmp zamiast WebP, AVIF albo SVG. Zdjęcie w elemencie
<picture>ze źródłem WebP albo AVIF liczy jako nowoczesne, nawet gdy zapasowy<img>wskazuje plik .jpg. - Informuje, gdy więcej niż cztery zdjęcia niżej na stronie ładują się od razu, bez loading="lazy".
- Na stronie głównej i sprawdzonych podstronach liczy obrazki bez atrybutu alt; pusty alt="" uznaje za poprawny.
Skan sprawdza stronę główną i do 3 podstron. Wynik dostajesz w około minutę.
Kiedy zlecić to komuś: Gdy zdjęć są setki, na przykład w sklepie albo galerii realizacji, ręczna konwersja nie ma sensu. JFlow Labs może ustawić automatyczne zmniejszanie i konwersję do WebP albo AVIF, w wycenie osobnej od audytu. Zobacz pełny audyt.
Pytania i odpowiedzi
Czy WebP działa we wszystkich przeglądarkach?
Tak. Google podaje, że WebP obsługują Chrome, Safari, Firefox, Edge i Opera. Jeśli chcesz mieć zapas, element <picture> pozwala podać WebP albo AVIF i zwykły JPG jako wersję zapasową. Google opisuje ten sposób w dokumentacji o obrazach.
Ile może ważyć zdjęcie na stronie?
Nie ma jednej liczby. Liczy się to, żeby plik nie był większy niż miejsce, w którym się wyświetla, i żeby był w nowoczesnym formacie. Najważniejsze jest główne zdjęcie u góry, bo od niego zależy wskaźnik LCP.
Czy zdjęcie w tle z CSS jest gorsze od zwykłego obrazka?
Dla Google tak: wyszukiwarka nie indeksuje obrazów ustawionych w CSS. Ważne zdjęcia, które mają być widoczne w wyszukiwarce grafiki, wstawiaj jako znacznik <img> z opisem alt.
Czy loading="lazy" spowalnia stronę?
Zdjęć niżej na stronie nie spowalnia, a wręcz przyspiesza start strony. Spowalnia tylko wtedy, gdy ustawisz go na zdjęciu widocznym od razu po wejściu, szczególnie na głównym zdjęciu pierwszego ekranu.
Źródła
- Google for Developers: An image format for the Web (WebP)
- web.dev: Using AVIF to compress images on your site
- web.dev: Browser-level image lazy loading
- web.dev: Optimize Largest Contentful Paint
- web.dev: Optimize resource loading with the Fetch Priority API
- web.dev: Optimize Cumulative Layout Shift
- Google Search Central: Image SEO best practices