Jak zaoszczędzić na przesyłanych danych, czyli WebP w akcji

WebP jest formatem oferującym kompromis pomiędzy PNG a JPG. Wspiera przeźroczystość oraz bezstratną oraz stratną kompresję.

W zależności od zdjęcia, dzięki WebP można zaoszczędzić sporo kilobajtów, które pobiera użytkownik. Bez kompresji rozmiar obrazów PNG zmniejsza się 26% a w przypadku kompresji JPG 25-34%, a wg niektórych danych, nawet do 85%.

Wsparcie WebP przez przeglądarki internetowe jest bardzo dobre. Praktycznie każda nowoczesna przeglądarka obsługuje go w pełni. Oczywiście poza Internet Explorerem.

Ze względu na to, że odwiedzający naszą stronę mogą mieć starsze wersje przeglądarek, albo o zgrozo używać IE, warto dodać obsługę starszych formatów. Przeglądarka internetowa automatycznie wybierze pierwszy z góry z obsługiwanych formatów, kolejność wewnątrz taga picture jest ważna.

Przeglądarka spróbuje wczytać webp a gdy to się nie uda to wczyta jpg.

See the Pen
Untitled by Tomasz Wikło (@studioleopard)
on CodePen.0

WebP istnieje w trzech głównych wersjach. Podstawowej ze stratną kompresją. Rozszerzoną z bezstratną (i stratną) kompresją oraz wsparciem przeźroczystości (kanał alpha). “Animowanej” co oznacza, że możemy zastąpić stary i wysłużony format gif jego nowszym odpowiednikiem.

Jak skonwertować zdjęcia do WebP?

Istnieje wiele sposobów skonwertowania kolekcji zdjęć. Najłatwiejszym jest użycie graficznych aplikacji takich jak XnConvert.

Konwertowanie do WebP za pomocą XnConvert

Wystarczy zaznaczyć zdjęcia, przenieść je do zakładki Input:

Ustawić wynikowy Format na WEBP – WebP w zakładce Output:

Opcjonalnie możemy przejść do ustawień formatu WebP (Settings), gdzie znajdziemy takie opcje jak wynikową jakość oraz co najciekawsze, możemy ustawić jakiego rozmiaru skonwertowane zdjęcia nie mogą przekroczyć (File size (kbytes)). Jest to bardzo przydatne, gdy mamy np. galerię zdjęć i chcemy aby każde zdjęcie miało nie więcej niż 400 kb.

W głównym oknie aplikacji klikamy przycisk Convert znajdujący się w dolnej, prawej części okna. Aktywowana zostanie zakładka Status, w której będziemy mogli śledzić postęp konwertowanych plików a na końcu podsumowanie, czyli ile plików i w jakim czasie zostało skonwertowanych.

Konwertowanie do WebP za pomocą skryptu

Nieco trudniejszym sposobem na skonwertowanie zdjęć, jest utworzenie skryptu, który skonwertuje wszystkie pliki będące w katalogu.

“#!/bin/bash for F in *.jpg; do cwebp $F -o basename ${F%.jpg}.webp; done”

W skrypcie zastosowana jest komenda cwebp. W systemach debiano-podobnych uzyskamy powyższą komendę, instalując w systemie pakiet o nazwie webp:

“sudo apt install webp.”

Konwertowanie do WebP za pomocą simple-webp-converter w projekcie webowym

Jeszcze innym sposobem na skonwertowanie zdjęć, głównie w przypadku projektów webowych jest zastosowanie simple-webp-converter. Po zainstalowaniu np. za pomocą yarn add -D simple-webp-converter możemy dodać skrypt npm w package.json, który automatycznie skonwertuje nam zdjęcia tworząc ich kopie.

See the Pen
webp package.json by Tomasz Wikło (@studioleopard)
on CodePen.0

Wszystkie zdjęcia PNG i JPG znajdujące się w katalogu src/ jak można zobaczyć na zrzucie ekranu, zostały skonwertowane do .webp po uruchomieniu skryptu za pomocą yarn run webp.

Kliknij aby pobrać kod źródłowy.

WebP nie jest formatem bez wad. Dla przykładu nie wspiera progresywnego ładowania. Aby można było go zobaczyć musi zostać załadowany w całości. Dla odróżnienia format JPG wspiera progresywane ladowanie, może zostać wstępnie załadowany z bardzo niską jakością i stopwniowo zwiększać swoją jakość podczas przesyłąnych danych. Końcowy użytkownik może mieć wrażenie, że obrazek został wczytany szybciej niż faktycznie to nastąpiło.

A czy Ty używasz już formatu WebP? Jeżeli nie, co Ciebie powstrzymuje? Który ze sposobów konwertowania zdjęć przypadł Ci najbardziej do gustu? Zastosowanie XnConvert czy bardziej programistyczne podejście?

Opublikowano 6 lipca 2022 w kategorii html, poradnik, strona www.