Używaj obrazów WebP

Katie Hempenius
Katie Hempenius
X

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 utratą jakości obrazu.

Konwertowanie obrazów na WebP

Zwykle do konwertowania obrazów na format WebP używa się jednego z tych narzędzi: cwebp narzędzia wiersza poleceń lub wtyczki Imagemin WebP (pakiet npm). Jeśli Twój projekt korzysta ze skryptów kompilacji lub narzędzi do kompilacji (np. Webpack lub Gulp), najlepszym wyborem będzie zazwyczaj wtyczka Imagemin WebP, natomiast interfejs wiersza poleceń to dobre rozwiązanie w przypadku małych 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żyj konta 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:

<img src="flower.jpg" alt="">

Po:

<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 inaczej w zależności od nagłówka Accept:

<FilesMatch ".(jpe?g|png)$">
  <IfModule mod_headers.c>
    Header set Vary "Accept"
  </IfModule>
</FilesMatch>

Poprzednia reguła przekształcania 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łanie obrazów w formatach nowej generacji. Lighthouse wyświetli listę wszystkich obrazów, które nie są wyświetlane w formacie WebP.