Obraz o szerokości 1920 pikseli na stronie pobierają w całości także użytkownicy telefonów, a na ekranie i tak jest skalowany do 390 pikseli — pięciokrotnie więcej transferu i wolniejsze wczytywanie bez żadnego pożytku. Atrybut srcset pozwala przeglądarce wybrać wersję pasującą do ekranu, ale pod warunkiem, że te wersje wcześniej przygotujesz.
Dlaczego jeden obraz nie wystarczy
Wskaźnik LCP w Core Web Vitals to zwykle duży obraz widoczny na pierwszym ekranie. Jeśli telefonowi podasz plik o szerokości 1920 i wadze 400 KB, LCP rzadko zmieści się w 2,5 sekundy; wersja o szerokości 480 i wadze 40 KB na tym samym łączu ładuje się o rząd wielkości szybciej. Sygnał Google dotyczący komfortu strony odczytuje tę liczbę wprost.
Z drugiej strony obraz o szerokości 768 na dużym monitorze stacjonarnym wygląda miękko. Stąd kilka rozmiarów, z których wybiera sama przeglądarka.
Praktyczna tabela punktów przełamania
Punkty przełamania wyznacza szerokość, w jakiej obraz jest wyświetlany na stronie, a nie okno przeglądarki. Dla dwóch najczęstszych przypadków — banerów na całą szerokość i ilustracji w artykule:
- Obrazy na pełną szerokość (sekcja główna, banery): 480, 768, 1200, 1920. Telefon, tablet, laptop, duży monitor.
- Ilustracje w artykule (kolumna treści do około 800): 400, 800, 1200; wersja 1200 obsługuje ekrany 1,5x–2x.
- Miniatury i karty (wyświetlane w szerokości około 300): 300 i 600.
Więcej stopni nie znaczy lepiej. Każdy to kolejny eksport i kolejny plik do przechowywania, a przeglądarki tolerują niedopasowanie, więc najlepszy jest odstęp 1,5–2 razy. Cztery stopnie pokrywają ponad dziewięć na dziesięć kombinacji urządzeń.
Czy potrzebne są wersje 2x
Ekrany Retina i większość telefonów działa z gęstością 2x–3x; obraz wyświetlany w szerokości 400 potrzebuje tam 800 pikseli, żeby wyglądał ostro. Większe stopnie z tabeli już pełnią rolę wersji 2x dla mniejszych — 768 to 2x dla telefonu o szerokości 390, a 1200 to 2x dla kolumny o szerokości 600.
Osobny zestaw „@2x” nie jest więc potrzebny. Zachowaj między stopniami odstęp około dwukrotny, a przeglądarka sama wybierze wyższą wersję zależnie od gęstości.
Format: najpierw WebP, JPG jako rezerwa
Przy tej samej jakości WebP jest o 25–35 procent mniejszy od JPG i obsługują go wszystkie nowoczesne przeglądarki. Wyeksportuj WebP w każdym rozmiarze i zostaw JPG jako rezerwę przez element picture dla starych przeglądarek; jeśli dla twoich odbiorców przeglądarki sprzed 2020 roku przestały mieć znaczenie, wystarczy sam WebP.
AVIF jest jeszcze mniejszy, ale w przeglądarce koduje się znacznie wolniej, co przy dużych paczkach daje się we znaki. Kompromisy opisuje szczegółowo tekst AVIF, WebP czy JPEG.
Wsadowy eksport całego zestawu
Wrzuć pliki źródłowe do narzędzia Przetwarzanie wsadowe obrazów i uruchamiaj je raz dla każdego stopnia, zmieniając szerokość i przyrostek:
- Rozmiar: szerokość 480, „Pozwól powiększać małe obrazy” wyłączone, wynik WebP w jakości 80 procent, przyrostek -480.
- Te same ustawienia dla 768 z przyrostkiem -768; potem 1200; potem 1920.
- Dla rezerwowego JPG przełącz wynik na JPG, zostaw przyrostki i uruchom jeszcze raz.
Każdy przebieg trwa sekundy, a w ZIP-ie od razu są pliki hero-480.webp, hero-768.webp i kolejne, gotowe do wrzucenia do folderu z obrazami. Nie włączaj powiększania, żeby oryginał o szerokości 1000 pikseli nie został rozciągnięty do 1920.
Chcesz zobaczyć różnicę w wadze dla poszczególnych stopni na jednym obrazie? Otwórz pojedynczy plik w narzędziu Zmiana rozmiaru obrazu.
Zapis w HTML
Dla obrazu na pełną szerokość:
<img src="hero-1200.jpg"
srcset="hero-480.webp 480w, hero-768.webp 768w, hero-1200.webp 1200w, hero-1920.webp 1920w"
sizes="100vw" width="1920" height="1080" alt="...">Dla ilustracji w artykule ustaw sizes zgodnie z rzeczywistą szerokością, na przykład sizes="(max-width: 840px) 100vw, 800px". Zawsze podawaj width i height, żeby przeglądarka zarezerwowała miejsce i strona nie „skakała”.
Gdy to zrobisz, dodaj wskazówki o leniwym ładowaniu i kompresji z artykułu jak przyspieszyć ładowanie obrazów — i część wyniku wydajności związana z obrazami będzie praktycznie wyczerpana.