Szybkość ładowania od dawna jest jednym z najważniejszych czynników podczas optymalizacji witryny , a zarówno odwiedzający, jak i wyszukiwarki uważają, że czas potrzebny na wywołanie strony jest ważnym kryterium oceny. Smukły i skompresowany kod lub wykorzystanie mechanizmów buforowania są częścią wypróbowanych i przetestowanych rozwiązań zapewniających szybką obecność w sieci, podobnie jak użycie skompresowanych obrazów . Te ostatnie – jako elementy designu i tła – występują w wielu projektach w dużych ilościach, a ich wpływ na czas ładowania jest często niedoceniany.
Z problemem tym poradził sobie m.in. gigant wyszukiwarek Google , który w 2010 roku zaprezentował własny , bezlicencyjny format obrazu dla szybszych stron internetowych – WebP. Ale co dokładnie kryje się za formatem internetowym, który powstał z kodeka wideo VP8? A jak wypada w bezpośrednim porównaniu z ustalonymi zmiennymi, takimi jak JPEG?
Co to jest WebP?
30 września 2010 r. firma Google ogłosiła wydanie nowego otwartego standardu kompresji stratnej grafiki 24-bitowej w Internecie. Format wideo VP8 służył jako wzór dla formatu o nazwie WebP,i to zostało opracowane przez firmę On2 Technologies, którą Google kupił w tym samym roku. W następnym okresie Google rozszerzyło format WebP o takie funkcje, jak tryb kompresji bezstratnej, przezroczystość (kanał alfa) i animacje. Chrome obsługuje format kompresji od końca 2010 roku, podobnie jak przeglądarka Opera. Jednak do tej pory nadal istnieje wiele różnych przeglądarek – takich jak Safari i Firefox – które do tej pory obsługiwały WebP tylko eksperymentalnie i nie oferują wsparcia w swoich regularnych wydaniach. Według własnych informacji Microsoft pracuje obecnie nad wsparciem dla swojej przeglądarki Edge.
Jakie cechy wyróżnia WebP?
WebP zawsze służył redukcji obrazów w Internecie do jak najmniejszego rozmiaru pliku. Według informacji Google obrazy i grafika w formacie WebP są o około 30 procent mniejsze niż pliki PNG lub JPEG o tej samej jakości obrazu. Podczas gdy oba te klasyczne formaty internetowe opierają się na różnych metodach kompresji – PNG jest bezstratny, a JPEG stratny – WebP umożliwia obie opcje. Dzięki tej elastyczności format nadaje się zarówno do zdjęć, jak i małych obrazków i grafik. Funkcje kompresji, a także inne główne cechy formatu WebP można podsumować w następujący sposób:
- Kompresja (stratna) : Kompresja stratna z WebP wykorzystuje kodowanie klatek kluczowych VP8.
- Kompresja (bezstratna) : Kompresja bezstratna z WebP opiera się na różnych technikach przekształcania parametrów i danych obrazu. Wykorzystywany jest tutaj również algorytm LZ77.
- Przezroczystość : 8-bitowy kanał alfa oferowany przez format WebP może być również używany do stratnej kompresji RGB.
- Metadane : WebP może zawierać metadane EXIF i XMP, które są zwykle generowane przez kamery.
- Profil kolorów : format Google może zawierać osadzone profile ICC (zestawy danych opisujące spektrum kolorów).
- Animacje : format WebP umożliwia zapisywanie sekwencji obrazów.
Jak działa stratna kompresja WebP?
Kompresja stratna z WebP wykorzystuje tę samą metodę, co kodek blokowy VP8, do przewidywania klatek – tj. pojedynczych obrazów. Każda ramka jest więc podzielona na mniejsze segmenty, które są również określane jako makrobloki . W obrębie tych makrobloków koder może przewidzieć nadmiarowe informacje o ruchu i kolorze oraz odjąć je od bloku. Wynik tej predykcyjnej kompresji składa się z pozostałych informacji o bloku i oddzielnych informacji nadmiarowych (zazwyczaj zawierających wiele wartości zerowych). Jest kwantyfikowany i kodowany entropijnie (prezentacja znaków za pomocą określonego wzorca bitowego). Faza kwantyfikacji jest tutaj jedynym procesem, w którymbity są faktycznie odrzucane jako stratne.
Zasady działania kompresji bezstratnej z WebP
W przypadku bezstratnej kompresji WebP pierwszy krok polega na przekształceniu obrazu. W tym celu można zastosować następujące techniki:
| Przekształcenie przewidywania przestrzennego | WebP wykorzystuje 13 różnych trybów przewidywania, które wykorzystują fakt, że sąsiednie piksele często ze sobą korelują. Bieżąca wartość piksela jest przewidywana na podstawie już zdekodowanych pikseli, a kodowana jest tylko pozostała wartość. |
|---|---|
| Transformacja kolorów | Celem transformacji kolorów jest dekorelacja wartości RGB każdego pojedynczego piksela. Tutaj obraz jest najpierw podzielony na bloki, zanim czerwony (R) zostanie przekształcony na podstawie zielonego (G) i niebieskiego (B) na podstawie zielonego i czerwonego. Zielona wartość jest utrzymywana bez zmian. |
| Odejmij zieloną transformację | Oprócz ogólnej transformacji kolorów możliwy jest wariant, w którym wartości zielone są odejmowane od wartości czerwonej i niebieskiej. |
| Transformacja indeksowania kolorów | Jeśli jest zbyt mało unikalnych wartości pikseli, format WebP zapewnia również opcję transformacji indeksowania kolorów. Liczba unikalnych wartości ARGB w obrazie staje się wtedy bardziej określona i tworzy alokację tych wartości, jeśli liczba jest zbyt mała. Ta alokacja służy do zastąpienia wartości pikseli odpowiednim indeksem. |
| Kodowanie kolorowej pamięci podręcznej | Bezstratna kompresja WebP może wykorzystywać fragmenty obrazu, które już widzieliśmy, do rekonstrukcji nowych pikseli . Jeśli nie ma tu odpowiednich trafień, lokalny bufor kolorów z 32 ostatnio używanymi kolorami służy tutaj jako punkt wyjścia. Jest to stale aktualizowane. |
Przetworzone parametry i dane obrazu są kodowane entropijnie, przy czym wykorzystywany jest wariant algorytmu LZ77. Wykorzystuje to małe wartości dla pikseli bliskich przestrzennie.
Co wyróżnia animowany WebP?
Dzięki wsparciu animowanych obrazów WebP jest atrakcyjną alternatywą dla GIF lub APNG. W grę wchodzą mocne strony, takie jak 24-bitowa głębia kolorów i 8-bitowy kanał alfa , a także wysoki stopień kompresji. Umożliwia to format WebP w przeciwieństwie do konkurencyjnych formatów, a także bezstratną i stratną kompresję animacji. Animowany WebP jest również przekonujący pod względem dekodowania: ponieważ metadane WebP zapisują, czy każda ramka zawiera wartości alfa, dekoder nie musi konwertować każdej ramki indywidualnie, aby otrzymać te informacje.
WebP vs. JPEG: WebP radzi sobie dobrze w porównaniu z innymi formatami obrazów
JPEG lub JPG jest dla prezentacji zdjęć i dużych obrazów w sieci WWW tym, czym Google dla świata wyszukiwarek. Nawet ćwierć wieku po jego wydaniu nie można sobie wyobrazić, że format obrazu nie pojawia się na scenie internetowej. Największą zaletą w odniesieniu do formatów takich jak PNG – który jest równomiernie rozłożony, ale używany głównie w mniejszych obrazach i grafice, takich jak logo, ikony itp. – jest bez wątpienia, że JPEG zapewnia znaczną oszczędność pamięci dzięki stratnej kompresji.
Jednak w tym kluczowym szczególe WebP okazuje się wydajniejszy i bardziej elastyczny . Z jednej strony format Google oferuje zarówno bezstratną, jak i stratną metodę kompresji, z drugiej zaś oszczędność pamięci dla obrazów w formacie WebP przewyższa tę dla obrazów JPEG o tej samej wartości. Fakt, że JPEG dopuszcza obrazy o maksymalnym rozmiarze do 65 535 x 65 535 pikseli, podczas gdy limit WebP wynosi tylko 16 383 x 16 383 pikseli, można zignorować w świetle dziedziny zastosowania (Web).Notatka
Przewaga kompresji, którą WebP ma w porównaniu z JPEG, jest tracona przy bardzo silnej kompresji (od około 90 procent stopnia kompresji). Chociaż takie skompresowane obrazy JPEG są jednak bardzo rozpikselowane, podobne przykłady w formacie WebP mają określoną wartość dodaną.
Podobne do porównania WebP i JPEG jest porównanie WebP i GIF , gdzie format od Google również wykazuje przekonującą przewagę pod względem jakości i kompresji. Problem polega jednak na braku wsparcia dla WebP z przeglądarek takich jak Firefox czy Microsoft Edge. Do tej pory użytkownicy tych przeglądarek internetowych nie widzą obrazów i animacji w WebP, dlatego prawie żaden operator witryn nie polega na tym formacie.
Podstawowe dane do porównania „WebP i JPEG” w formie tabeli:
| WebP | JPEG | |
|---|---|---|
| Uwolnienie | 2010 | 1992 |
| Rozszerzenia plików) | .webp | .jpeg, .jpg |
| Maksymalna rozdzielczość (w pikselach) | 16 383 x 16 383 | 65 535 x 65 535 |
| Kompresja (bezstratna) | TAk | Nie |
| Kompresja (stratna) | TAk | TAk |
| Przejrzystość (kanał alfa) | TAk | Nie |
| Spektrum kolorów RGB | TAk | TAk |
| Możliwe animacje | TAk | Nie |
| Wspieranie aplikacji | ograniczone (w tym Chrome, Opera, Gmail i IrfanView) | uniwersalny |
Jak można otwierać i konwertować pliki WebP?
Pliku w formacie WebP nie można jeszcze otworzyć za pomocą zwykłych programów do przeglądania obrazów w systemach Windows, Linux i macOS Jeśli chcesz wyświetlić animacje lub obrazy , które zostały zakodowane za pomocą WebP, istnieją różne opcje.
Jeśli w Twoim systemie jest zainstalowana przeglądarka Chrome lub Opera , możesz po prostu przeciągnąć dany plik do otwartego okna w dowolnej przeglądarce. Ponieważ te przeglądarki natywnie obsługują WebP, możesz przeglądać zawartość, którą chcesz otworzyć, bez konieczności korzystania z dodatkowego oprogramowania. Jednak to rozwiązanie nie jest zbyt wygodne – szczególnie jeśli chcesz obejrzeć kilka obrazów lub animacji. Jeśli nie chcesz pracować z różnymi oknami przeglądarki i przełączać się między nimi, łatwiej jest użyć IrfanView , darmowej przeglądarki zdjęć, która po zainstalowaniu oficjalnego pakietu wtyczek oferuje również obsługę WebP. Jednak program jest dostępny tylko dla systemu Windows .
Ponadto w oficjalnej strefie deweloperskiej WebP Google oferuje szereg własnych rozwiązań do pracy z WebP – przede wszystkim bibliotekę libwebp , którą można wykorzystać do zaimplementowania kodowania i dekodowania WebP we własnych programach. Ponadto w bezpłatnej kolekcji do pobrania znajdują się następujące narzędzia:
- cwebp umożliwia kompresję pola obrazu za pomocą WebP. Możliwe formaty wejściowe to PNG, JPEG i TIFF . W opcjach narzędzi możesz określić, czy używać kompresji bezstratnej, czy stratnej.
- dwebp to narzędzie, za pomocą którego można przekształcić istniejące pliki WebP do innych formatów, takich jak PNG (opcja standardowa), BMP, TIFF czy PGM.
- Z vwebp ,Google dostarcza własne rozwiązanie do wyświetlania obrazów i animacji WebP w oparciu o OpenGL.
- webpmux to decydujące narzędzie do pracy z rozszerzonym WebP. Możesz tworzyć animacje w formacie WebP, na przykład za pomocą programu, lub rozszerzać pliki graficzne o metadane i profile ICC.
- Dzięki gif2webp konwertujesz istniejące pliki GIF do WebP. Podobnie jak w przypadku zwykłej kompresji obrazu, możliwe jest kodowanie zarówno bezstratne, jak i stratne.
