Dlaczego warto wziąć to pod uwagę?
Obrazy WebP są mniejsze od odpowiedników w formatach JPEG i PNG – zwykle o 25–35%. Zmniejsza to rozmiary stron i poprawia wydajność.
- Zespół YouTube stwierdził, że przejście na miniatury WebP spowodowało 10% szybsze wczytywanie stron.
- Facebook zaoszczędzył 25–35% miejsca na dysku w przypadku plików JPEG i 80% w przypadku plików PNG, gdy przeszedł na format WebP.
WebP to doskonały zamiennik obrazów JPEG, PNG i GIF. Dodatkowo WebP oferuje zarówno kompresję bezstratną, jak i stratną. W przypadku kompresji bezstratnej nie dochodzi do utraty danych. Kompresja stratna zmniejsza rozmiar pliku, ale może to wiązać się z obniżeniem jakości obrazu.
Konwertowanie obrazów na WebP
Zwykle do konwertowania obrazów na format WebP używa się jednego z tych narzędzi: narzędzie wiersza poleceń cwebp lub wtyczka Imagemin WebP (pakiet npm). Wtyczka WebP Imagemin jest zwykle najlepszym rozwiązaniem, jeśli Twój projekt korzysta ze skryptów kompilacji lub narzędzi do kompilacji (np. Webpack lub Gulp), natomiast interfejs wiersza poleceń jest dobrym wyborem w przypadku prostych projektów lub jeśli obrazy trzeba przekonwertować tylko raz.
Podczas konwertowania obrazów na format WebP możesz ustawić wiele różnych ustawień kompresji, ale w przypadku większości użytkowników jedyną rzeczą, o którą musisz się martwić, jest ustawienie jakości. Możesz określić poziom jakości od 0 (najgorszy) do 100 (najlepszy). Warto poeksperymentować z tymi ustawieniami, aby znaleźć poziom, który najlepiej odpowiada Twoim potrzebom pod względem kompromisu między jakością obrazu a rozmiarem pliku.
Używanie cwebp
Konwertowanie pojedynczego pliku przy użyciu domyślnych ustawień kompresji cwebp:
cwebp images/flower.jpg -o images/flower.webp
Konwertowanie pojedynczego pliku z poziomem jakości 50:
cwebp -q 50 images/flower.jpg -o images/flower.webp
Konwertowanie wszystkich plików w katalogu:
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
Używanie Imagemin
Wtyczki Imagemin WebP można używać samodzielnie lub z ulubionym narzędziem do kompilacji (np. Webpack, Gulp, Grunt). Zwykle wymaga to dodania około 10 wierszy kodu do skryptu kompilacji lub pliku konfiguracyjnego narzędzia do kompilacji. Oto przykłady tego, jak to zrobić w przypadku Webpack, Gulp i Grunt.
Jeśli nie używasz żadnego z tych narzędzi do kompilacji, możesz użyć Imagemin jako skryptu Node. Ten skrypt konwertuje pliki w katalogu images i zapisuje 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świetlanie obrazów w formacie WebP
Jeśli Twoja witryna obsługuje tylko przeglądarki zgodne z WebP, możesz przestać czytać. W przeciwnym razie wyświetlaj format WebP w nowszych przeglądarkach, a w starszych – obraz zapasowy:
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>
Tagi <picture>, <source> i <img>, w tym ich kolejność względem siebie, współdziałają ze sobą, aby osiągnąć ten końcowy wynik.
<picture>
Tag <picture> stanowi otoczkę dla 0 lub więcej tagów <source> i jednego tagu <img>.
<source>
Tag <source> określa zasób multimedialny.
Przeglądarka używa pierwszego wymienionego źródła w obsługiwanym formacie. Jeśli przeglądarka nie obsługuje żadnego z formatów wymienionych w tagach <source>, wczyta obraz określony przez tag <img>.
<img>
Ten kod działa w przeglądarkach, które nie obsługują tagu <picture>, dzięki tagowi <img>.
Jeśli przeglądarka nie obsługuje tagu <picture>, zignoruje tagi, których nie obsługuje. Dlatego „widzi” tylko tag <img src="flower.jpg" alt=""> i wczytuje to zdjęcie.
Odczytywanie nagłówka HTTP Accept
Jeśli masz backend aplikacji lub serwer WWW, który umożliwia przekształcanie żądań, możesz odczytać wartość nagłówka HTTP Accept, który podaje, jakie alternatywne formaty obrazów są obsługiwane:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
Odczytanie nagłówka żądania i przepisanie odpowiedzi na podstawie jego zawartości upraszcza znaczniki obrazu. <picture> markup może być dość długi, jeśli korzystasz z wielu źródeł. Poniżej znajduje się reguła Apache mod_rewrite, która może wyświetlać alternatywne wersje 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 zdecydujesz się na tę opcję, musisz ustawić nagłówek odpowiedzi HTTP Vary, aby zapewnić pamięci podręcznej zrozumienie, ż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>
Podana powyżej reguła przekierowania będzie szukać wersji WebP żądanego obrazu JPEG lub PNG. Jeśli zostanie znaleziona alternatywa WebP, zostanie ona wyświetlona z odpowiednim nagłówkiem Content-Type. Dzięki temu możesz używać znaczników obrazów podobnych do tego z automatycznym obsługą formatu WebP:
<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">
Weryfikacja wykorzystania formatu WebP
Lighthouse może służyć do sprawdzania, czy wszystkie obrazy w witrynie są wyświetlane za pomocą formatu WebP. Przeprowadź audyt skuteczności w Lighthouse (Lighthouse > Opcje > Skuteczność) i sprawdź wyniki audytu Przesyłaj obrazy w nowych formatach. Lighthouse wyświetli listę wszystkich obrazów, które nie są wyświetlane w formacie WebP.