Dlaczego warto wziąć to pod uwagę?
Pliki WebP są mniejsze niż ich odpowiedniki w formatach JPEG i PNG – zwykle zmniejszenie rozmiaru pliku o 25–35%. Zmniejsza to rozmiar strony poprawia wydajność.
- YouTube odkrył, że przejście na miniatury WebP zaowocowało 10% szybsze ładowanie stron.
- Facebook miał(a) 25–35% oszczędności w przypadku plików JPEG i 80% w przypadku plików PNG, zaczęli korzystać z WebP.
WebP jest doskonałym zamiennikiem plików JPEG, PNG i GIF. Ponadto WebP oferuje zarówno kompresję bezstratną, jak i stratną. W przypadku kompresji bezstratnej brak danych przepada. Kompresja stratna zmniejsza rozmiar pliku, ale kosztem może obniżając jakość obrazu.
Konwertuj obrazy do formatu WebP
Użytkownicy zwykle korzystają z jednej z tych metod konwersji obrazów do WebP: narzędzie wiersza poleceń cwebp lub wtyczka Imagemin WebP (npm przesyłka). Wtyczka Imagemin WebP jest zasadniczo najlepszym wyborem, jeśli projekt korzysta z kompilacji skryptów lub narzędzi do tworzenia (np.Webpack lub Gulp), natomiast interfejs wiersza poleceń to dobry wybór. w przypadku prostych projektów lub jeśli wystarczy konwertować obrazy tylko raz.
Podczas konwertowania obrazów do formatu WebP możesz ustawić różne ale większość osób nie potrzebuje już jest ustawienie jakości. Możesz określić poziom jakości od 0 (najgorsza) do 100 (najlepsza). Warto się tym pobawić – znajdź który poziom jest właściwym kompromisem między jakością obrazu a rozmiarem pliku na do Twoich potrzeb.
Użyj cwebp
Przekonwertuj jeden plik przy użyciu domyślnych ustawień kompresji cwebp:
cwebp images/flower.jpg -o images/flower.webp
Przekonwertuj pojedynczy plik z użyciem poziomu jakości 50:
cwebp -q 50 images/flower.jpg -o images/flower.webp
Przekonwertuj wszystkie pliki w katalogu:
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
Użyj Imagemin
Możesz używać wtyczki Imagemin WebP samodzielnie lub z ulubionym narzędziem do kompilacji (Webpack/Gulp/Grunt/etc.). Zwykle wymaga to dodania ok. 10 wierszy kodu do lub w pliku konfiguracji narzędzia do kompilacji. Oto kilka przykładów, jak to zrobić w przypadku Webpack, Gulp oraz Brudny.
Jeśli nie korzystasz z żadnego z tych narzędzi, możesz użyć samego programu Imagemin jako
skrypt Node. Ten skrypt przekonwertuje pliki w katalogu images i
zapisz je w katalogu compressed_images.
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*'], {
destination: 'compressed_images',
plugins: [imageminWebp({quality: 50})]
}).then(() => {
console.log('Done!');
});
Wyświetlaj obrazy WebP
Jeśli witryna obsługuje tylko standard WebP przeglądarek, możesz przestać czytać. W przeciwnym razie wyświetlanie formatu WebP w nowszych przeglądarkach, a obrazu zastępczego w starszych:
Przed:
html
<img src="flower.jpg" alt="">
Po:
html
<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>
<picture>
<source>,
oraz <img>,
m.in. w kolejności względem siebie – wszystkie
aby osiągnąć pożądany efekt końcowy.
<picture>
Tag <picture> zawiera kod dla co najmniej 0 tagów <source> i 1 tagu <img>.
<source>
Tag <source> określa zasób multimedialny.
Przeglądarka używa pierwszego z listy źródła w obsługiwanym formacie. Jeśli przeglądarka nie obsługuje żadnego z formatów wymienionych w tagach <source>, wczytuje obraz określony w tagu <img>.
<img>
Dzięki tagowi <img> kod działa w przeglądarkach
które nie obsługują tagu <picture>.
Jeśli przeglądarka nie będzie obsługiwać tagu <picture>,
Ignoruj tagi, których nie obsługuje. Dlatego tylko „widzi”
<img src="flower.jpg" alt=""> i wczytuje ten obraz.
Odczytywanie nagłówka HTTP Accept
Jeśli korzystasz z backendu aplikacji lub serwera WWW, który umożliwia przepisywanie żądań, możesz odczytać wartość nagłówka HTTP Accept, by poinformować o obsługiwanych alternatywnych formatach obrazów:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
Odczytywanie nagłówka żądania i przepisywanie odpowiedzi na podstawie jego zawartości upraszcza znaczniki obrazów. Znaczniki <picture> mogą być dość długie w przypadku wielu źródeł. Poniżej znajduje się reguła dla serwera Apache mod_rewrite, która może obsługiwać alternatywne rozwiązania WebP:
RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]
Jeśli wybierzesz tę metodę, musisz ustawić nagłówek odpowiedzi HTTP Vary, tak by pamięci podręczne rozpoznawały, że obraz może być wyświetlany z różnymi typami treści:
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Content-Type"
</IfModule>
</FilesMatch>
Powyższa reguła przepisywania spowoduje wyszukanie wersji WebP dowolnego obrazu JPEG lub PNG. Jeśli zostanie znaleziona alternatywna wersja WebP, zostanie ona wyświetlona z odpowiednim nagłówkiem Content-Type. Pozwoli Ci to używać znaczników obrazów podobnych do tych, które są wyświetlane w przypadku automatycznej obsługi WebP:
<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">
Zweryfikuj użycie WebP
Za pomocą narzędzia Lighthouse można było sprawdzić, czy wyświetlane są wszystkie obrazy z witryny w formacie WebP. Przeprowadzenie audytu wydajności Lighthouse (Lighthouse > Opcje > Wydajność) i sprawdź wyniki narzędzia Wyświetlaj obrazy w nowej generacji. formatów reklam. Lighthouse wyświetli listę wszystkich obrazów, które nie są wyświetlane WebP