Używaj obrazów WebP

Katie Hempenius
Katie Hempenius
X

Dlaczego warto wziąć to pod uwagę?

Obrazy WebP są mniejsze niż ich odpowiedniki w formacie JPEG i PNG i zwykle zmniejszają rozmiar pliku o 25–35%. Zmniejsza to rozmiar strony i zwiększa jej wydajność.

WebP to doskonały zamiennik obrazów JPEG, PNG i GIF. Ponadto technologia WebP oferuje kompresję bezstratną i stratną. W ramach kompresji bezstratnej żadne dane nie są tracone. Kompresja stratna zmniejsza rozmiar pliku, ale kosztem potencjalnego pogorszenia jakości obrazu.

Konwertuj obrazy na WebP

Użytkownicy zwykle konwertują obrazy do formatu WebP za pomocą narzędzia wiersza poleceń cwebp lub wtyczki Imagemin WebP (pakietu npm). Wtyczka Imagemin WebP jest zwykle najlepszym wyborem, jeśli w projekcie używasz skryptów kompilacji lub narzędzi do kompilacji (np. Webpack lub Gulp), natomiast interfejs wiersza poleceń to dobry wybór w przypadku prostych projektów lub jeśli wystarczy przekonwertować obrazy tylko raz.

Przy konwertowaniu obrazów do formatu WebP możesz skonfigurować różne ustawienia kompresji, ale dla większości użytkowników jedyną rzeczą, na którą trzeba zwrócić uwagę, jest ustawienie jakości. Możesz określić poziom jakości od 0 (najgorszy) do 100 (najlepszy). Warto się z tym poeksperymentować i zastanowić się, który poziom będzie odpowiednim kompromisem między jakością obrazu a rozmiarem pliku.

Użyj cwebp

Przekonwertuj pojedynczy plik, używając domyślnych ustawień kompresji programu cwebp:

cwebp images/flower.jpg -o images/flower.webp

Przekonwertuj pojedynczy plik, używając 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

Wtyczkę Imagemin WebP możesz używać samodzielnie lub z ulubionym narzędziem do kompilacji (Webpack/Gulp/Grunt itp.). Zwykle wymaga to dodania ok. 10 wierszy kodu do skryptu kompilacji lub pliku konfiguracji narzędzia do kompilacji. Oto przykłady, jak można to zrobić w przypadku pakietu Webpack, Gulp i Grunt.

Jeśli nie korzystasz z żadnego z tych narzędzi do tworzenia, możesz użyć samej aplikacji 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świetlaj obrazy WebP

Jeśli Twoja witryna obsługuje tylko przeglądarki zgodne z WebP, nie możesz czytać dalej. W przeciwnym razie udostępniaj WebP w nowszych przeglądarkach i 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ą, aby osiągnąć ten wynik.

<picture>

Tag <picture> zawiera opakowanie dla 0 lub więcej tagów <source> i 1 tagu <img>.

<source>

Tag <source> określa zasób multimedialny.

Przeglądarka używa pierwszego z wymienionych źródeł w obsługiwanym formacie. Jeśli przeglądarka nie obsługuje żadnego z formatów wymienionych w tagach <source>, ponownie wczytuje obraz określony w tagu <img>.

<img>

To dzięki tagowi <img> kod działa w przeglądarkach, które nie obsługują tagu <picture>. Jeśli przeglądarka nie obsługuje tagu <picture>, zignoruje tagi, których nie obsługuje. Dzięki temu „widzi” tylko tag <img src="flower.jpg" alt=""> i wczytuje ten obraz.

Odczytywanie nagłówka HTTP Accept

Jeśli masz backend aplikacji lub serwer WWW, który umożliwia przepisywanie żądań, możesz odczytać wartość nagłówka HTTP Accept, który informuje, jakie alternatywne formaty obrazów są obsługiwane:

Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8

Odczytanie tego nagłówka żądania i przepisanie odpowiedzi na podstawie jego zawartości ma zaletę uproszczenia znaczników graficznych. W przypadku wielu źródeł znaczniki <picture> mogą być dość długie. Poniżej znajdziesz regułę Apache mod_rewrite, która może obsługiwać 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 wybierzesz tę trasę, musisz ustawić nagłówek odpowiedzi HTTP Vary, aby pamięć podręczna zrozumieła, ż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 będzie szukać wersji WebP każdego żądanego obrazu JPEG lub PNG. Jeśli zostanie znaleziona wersja alternatywna WebP, wyświetli się z prawidłowym nagłówkiem Content-Type. Pozwoli Ci to korzystać ze znaczników obrazów podobnych do tych w przypadku automatycznej obsługi formatu WebP:

<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">

Sprawdzanie użycia WebP

Narzędzie Lighthouse pozwala sprawdzić, czy wszystkie obrazy w witrynie są wyświetlane przez WebP. Przeprowadź audyt wydajności Lighthouse (Lighthouse > Opcje > Wydajność) i sprawdź wyniki kontroli Udostępniaj obrazy w formatach nowej generacji. Lighthouse wyświetli wszystkie obrazy, które nie są wyświetlane w WebP.