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ędził 25–35% w przypadku plików JPEG i 80% mniej w przypadku plików PNG po przejściu na 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.
Konwertuj obrazy do formatu 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ą trzeba się martwić, jest ustawienie jakości. Możesz określić poziom jakości od 0 (najgorsza) do 100 (najlepsza). Warto poeksperymentować z tym i znaleźć odpowiedni dla siebie poziom kompromisu między jakością obrazu a rozmiarem pliku.
Użyj cwebp
Przekonwertuj jeden plik 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 korzystasz z żadnego z tych narzędzi do kompilacji, możesz użyć samego programu Imagemin jako skryptu węzła. Ten skrypt przekonwertuje pliki z katalogu images i zapisze 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, nie musisz czytać dalej. W przeciwnym razie wyświetlaj WebP w nowszych przeglądarkach, a obraz zastępczy 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>
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 źródła w wymienionym formacie. Jeśli przeglądarka nie obsługuje żadnego z formatów wymienionych w tagach <source>, wczyta obraz określony przez tag <img>.
<img>
Dzięki tagowi <img> kod działa w przeglądarkach, które nie obsługują tagu <picture>.
Jeśli przeglądarka nie obsługuje tagów <picture>, ignoruje 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
Odczytywanie nagłówka żądania i przepisywanie odpowiedzi na podstawie jego zawartości upraszcza znaczniki obrazu. <picture> markup może być dość długi, jeśli pochodzi z 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 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 wyż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ą WebP. Uruchom audyt Lighthouse (Lighthouse > Opcje > Wydajność) i sprawdź wyniki audytu Wyświetlaj obrazy w formatach nowej generacji. Lighthouse wyświetli listę wszystkich obrazów, które nie są wyświetlane przez WebP.