Jak zoptymalizować obrazy pod szybkość strony (WebP vs AVIF) | We.Inc
Wybierz właściwy format, skaluj przez srcset, ładuj leniwie właściwe obrazy i nigdy hero. W zestawie generator znaczników picture, srcset i fetchpriority.
Jak zoptymalizować obrazy na stronę internetową
Optymalizacja obrazów sprowadza się do czterech kroków: wybierz format pasujący do obrazu, eksportuj tylko szerokości w pikselach, których potrzebuje układ, skompresuj każdy plik i kontroluj, kiedy się ładuje. Serwuj AVIF lub WebP z zapasowym JPEG, wymień szerokości w srcset, ładuj leniwie obrazy poniżej pierwszego ekranu, a obrazowi hero daj zamiast tego fetchpriority high.
Jaki format do jakiego obrazu
Obraz
Najlepszy format
Zapasowy
Zdjęcie
AVIF lub WebP
JPEG
Zrzut ekranu z tekstem
WebP bezstratny lub PNG
PNG
Logo, ikona, proste kształty
SVG
PNG
Krótka animacja
Wideo (MP4 lub WebM)
Animowany WebP
Obrazy to zwykle najcięższa część strony, a hero jest często elementem mierzonym jako Largest Contentful Paint. Większość oszczędności daje kilka ustawień wybranych raz: format, szerokości, jakość i sposób ładowania. Generator poniżej pisze poprawne znaczniki dla tych wyborów, a lista kontrolna pod nim obejmuje resztę.
Wybierz format z tabeli: zdjęcia do AVIF lub WebP, płaska grafika do SVG.
Przeskaluj do trzech do pięciu szerokości, które obejmują ekrany od telefonów po duże monitory.
Skompresuj każdy plik, sprawdzając wynik w pełnym rozmiarze pod kątem rozmycia i pasm.
Wygeneruj znaczniki generatorem, oznaczając hero jako wysoki priorytet, a resztę jako leniwe.
Uruchom test szybkości strony i sprawdź audyty związane z obrazami, aby potwierdzić efekt.
Nigdy nie ładuj leniwie hero ani żadnego obrazu widocznego przy pierwszym malowaniu; web.dev ostrzega, że opóźnia to Largest Contentful Paint.
Zawsze ustawiaj width i height, żeby przeglądarka zarezerwowała miejsce, a układ się nie przesuwał.
Usuwaj metadane aparatu przy eksporcie; dane o lokalizacji i urządzeniu dodają bajty i mogą ujawnić prywatne informacje.
Tła CSS używaj tylko do dekoracji; obrazy z treścią należą do tagów img z tekstem alternatywnym.
Porównuj ustawienia jakości na oko przy powiększeniu 100%, bo właściwa liczba różni się między enkoderami.
Najczęściej zadawane pytania
WebP czy AVIF: którego używać?
Oba są lepsze od JPEG przy zdjęciach. AVIF to nowszy format i często kompresuje mocniej, a WebP koduje się szybciej i dłużej jest obsługiwany. Bezpieczny wzorzec to element picture oferujący najpierw AVIF, potem WebP, a w tagu img JPEG dla starszych przeglądarek.
Co robi atrybut sizes?
Mówi przeglądarce, jak szeroko obraz zostanie narysowany, zanim powstanie układ, żeby mogła wybrać właściwy plik z srcset. Bez sizes przeglądarka zakłada, że obraz wypełnia cały viewport, i może pobrać znacznie większy plik niż potrzeba.
Czy każdy obraz powinien mieć loading lazy?
Tylko obrazy poniżej pierwszego ekranu. Leniwe ładowanie czeka, aż przeglądarka ustali, gdzie jest obraz, a takiego opóźnienia nie chcesz dla niczego, co ludzie widzą od razu.
Jak mocno kompresować?
Obniżaj jakość, aż w pełnym rozmiarze ledwo zobaczysz różnicę, a potem cofnij się o jeden stopień. Zdjęcia z dużą ilością szczegółów dobrze ukrywają kompresję; gładkie gradienty, niebo i tekst szybciej pokazują artefakty.
Czy do optymalizacji obrazów potrzebuję wtyczki lub usługi?
Nie. Możesz skalować i konwertować w edytorze lub darmowym narzędziu w przeglądarce, a znaczniki napisać ręcznie. Usługi pomagają, gdy masz tysiące obrazów lub pliki wgrywane przez użytkowników do automatycznego przetwarzania.
Najpierw format
Przewodnik po formatach web.dev ujmuje to tak: wybieraj grafikę wektorową, gdy obraz to kształty i tekst, a do zdjęć używaj nowoczesnego formatu rastrowego. PNG zachowuje każdy piksel dokładnie, co pasuje do zrzutów ekranu, ale niepotrzebnie powiększa zdjęcia.
Element picture pozwala oferować nowe formaty bez psucia starych przeglądarek. Przeglądarka bierze pierwsze źródło, którego typ rozumie, a w razie potrzeby wraca do img w środku.
Właściwy rozmiar na każdym ekranie
web.dev zauważa, że wysyłanie obrazów w rozmiarze desktopowym na telefony może zużyć od dwóch do czterech razy więcej danych niż trzeba, i sugeruje trzy do pięciu rozmiarów na obraz. Wymień je z deskryptorami szerokości w srcset i opisz układ w sizes.
Zmierz renderowaną szerokość w swoim układzie zamiast zgadywać. Karta zajmująca jedną trzecią ekranu na desktopie i pełną szerokość na telefonach potrzebuje wartości sizes, która mówi dokładnie to.
Kolejność ładowania
Leniwe ładowanie oszczędza transfer na długich stronach, więc dodaj loading lazy obrazom niżej na stronie. Głównemu obrazowi na pierwszym ekranie dodaj fetchpriority high, aby był pobierany przed mniej ważnymi plikami.
decoding async pozwala przeglądarce narysować tekst, zanim skończy dekodować duży obraz. To tylko wskazówka i przeglądarki mogą ją zignorować.
Lista kontrolna optymalizacji obrazów
Co sprawdzić i dlaczego
Sprawdzenie
Jak
Dlaczego pomaga
Nowoczesny format
picture ze źródłami AVIF i WebP
Mniejsze pliki przy tym samym wyglądzie
Responsywne szerokości
srcset z deskryptorami w plus sizes
Telefony pomijają pliki w rozmiarze desktopowym
Kompresja
Jakość dobrana na oko do typu obrazu
Mniej bajtów na piksel
Wymiary
atrybuty width i height
Zapobiega przesunięciom układu
Leniwe ładowanie
loading="lazy" tylko poniżej pierwszego ekranu
Oszczędza dane na długich stronach
Priorytet hero
fetchpriority="high" na głównym obrazie
Szybszy Largest Contentful Paint
Tekst alternatywny
Opisuj obrazy z treścią; pusty alt dla dekoracji
Dostępność i wyszukiwanie grafiki
Wzorce znaczników do skopiowania
AVIF i WebP z zapasowym JPEG
Przeglądarka używa pierwszego obsługiwanego typu źródła. img niesie rozmiar, tekst alternatywny i wskazówki ładowania dla każdego formatu.
Hurtowe skalowanie i konwersja z sharp
Mały skrypt Node z pakietem sharp: każdy JPEG w ./src staje się trzema szerokościami WebP w ./out.
Cedrowy taras z wbudowaną ławką o zachodzie słońca
Generator znaczników obrazu
Ustaw nazwę pliku, szerokości, formaty i miejsce obrazu na stronie. Generator pisze znaczniki picture i img z właściwymi wskazówkami ładowania.