Dylemat Nowoczesnej Sieci: Potrzeba Nowego Formatu Obrazów

Przez dziesięciolecia internet opierał się na trójcy formatów graficznych: JPEG dla fotografii, PNG dla grafik z przezroczystością i GIF dla prostych animacji. Każdy z nich był mistrzem w swojej dziedzinie, ale żaden nie potrafił wszystkiego. Stratna kompresja JPEG była fantastyczna dla zdjęć, ale tworzyła brzydkie artefakty wokół ostrych linii w grafikach. PNG był idealny dla logo i ikon dzięki bezstratnej kompresji i przezroczystości, ale tworzył bardzo duże pliki dla treści fotograficznych. GIF był niekwestionowanym królem animacji, ale był ograniczony do zaledwie 256 kolorów i brakowało mu prawdziwej przezroczystości.

W miarę jak internet ewoluował w kierunku bogatszych, szybszych i bardziej mobilnych doświadczeń, ograniczenia tych starszych formatów stawały się coraz bardziej widoczne. Szybkość ładowania strony stała się kluczowym czynnikiem dla doświadczenia użytkownika i rankingów w wyszukiwarkach, a obrazy często były najcięższymi elementami strony internetowej. Świat potrzebował nowego, wszechstronnego formatu obrazów, który mógłby połączyć najlepsze cechy swoich poprzedników: wysoką kompresję JPEG, bezstratną wierność i przezroczystość alfa formatu PNG oraz możliwości animacji GIF, wszystko to w jednym, zoptymalizowanym pakiecie. W 2010 roku Google podjęło to wyzwanie i wprowadziło WebP.

WebP: Rodzina Algorytmów w Jednym Kontenerze

Genialność WebP polega na tym, że nie jest to pojedynczy algorytm kompresji. Jest to elastyczny format kontenera, oparty na Resource Interchange File Format (RIFF), który może przechowywać dane obrazu skompresowane na kilka różnych sposobów. To czyni go "scyzorykiem szwajcarskim" dla obrazów internetowych, pozwalając programistom wybrać najlepszą metodę kompresji dla danego obrazu, a nawet łączyć metody w jednym pliku.

Pojedynczy plik $.webp$ może być jednym z następujących:

• Obraz Stratny: Ten tryb bezpośrednio konkuruje z JPEG, często osiągając o 25-34% mniejszy rozmiar pliku przy tej samej jakości wizualnej. Używa zaawansowanej metody kompresji predykcyjnej opartej na kodeku wideo VP8.
• Obraz Bezstratny: Ten tryb konkuruje z PNG. Kompresja bezstratna WebP zazwyczaj jest w stanie osiągnąć o 26% mniejszy rozmiar pliku niż PNG. Używa zupełnie innego zestawu zaawansowanych technik do idealnego odtwarzania pikseli.
• Obraz z Przezroczystością: WebP obsługuje pełny 8-bitowy kanał alfa, zapewniając 256 poziomów przezroczystości, tak jak PNG. Kluczową zaletą jest to, że może łączyć stratnie skompresowany kanał kolorów (RGB) z idealnie bezstratnym kanałem alfa, co jest trybem hybrydowym znacznie bardziej wydajnym niż to, co mogą zaoferować starsze formaty.
• Obraz Animowany: WebP obsługuje animacje, działając jako nowoczesny następca GIF. Może łączyć wiele klatek z cechami trybów stratnych i bezstratnych, pozwalając na animacje z 24-bitowym kolorem i przezroczystością, wszystko to przy ułamku rozmiaru pliku równoważnego GIFa.

Analiza 1: Stratna Kompresja WebP

Metoda stratnej kompresji WebP wywodzi się z kompresji wewnątrzklatkowej kodeka wideo VP8, tej samej technologii, która napędza wideo WebM. Dzieli podstawową strukturę opartą na blokach z JPEG, ale używa bardziej zaawansowanej techniki zwanej kodowaniem predykcyjnym do redukcji danych. Zamiast kodować surowe dane pikseli bloku, najpierw próbuje przewidzieć, jak ten blok będzie wyglądał na podstawie jego sąsiadów, a następnie koduje tylko różnicę, czyli "błąd", od tego przewidywania.

Predykcja Oparta na Blokach

Koder dzieli obraz na makrobloki, zazwyczaj $16 \times 16$ pikseli. Dla każdego bloku koder próbuje przewidzieć jego zawartość, używając wartości pikseli z już zakodowanych bloków bezpośrednio powyżej i po lewej stronie. H.264 był pionierem tej techniki, ale VP8 (a tym samym WebP) używa własnego, udoskonalonego zestawu trybów predykcji. Koder testuje wiele trybów predykcji dla każdego bloku i wybiera ten, który daje najmniejszy błąd, co będzie najłatwiejsze do skompresowania.

Dla części obrazu związanej z jasnością (lumą), makroblok jest dalej dzielony na mniejsze podbloki $4 \times 4$. Dla każdego z tych małych bloków koder może wybrać jeden z kilku trybów predykcji:

• Predykcja Pionowa: Wypełnia blok, kopiując w dół rząd pikseli znajdujący się bezpośrednio nad nim. Działa dobrze dla krawędzi i wzorów pionowych.
• Predykcja Pozioma: Wypełnia blok, kopiując w poprzek kolumnę pikseli znajdującą się bezpośrednio po jego lewej stronie. Skuteczne dla krawędzi poziomych.
• Predykcja DC: Oblicza średnią wartość pikseli z rzędu powyżej i kolumny po lewej stronie, i wypełnia cały blok tym jednym średnim kolorem. Używane dla płaskich, jednolitych obszarów.
• Tryb TrueMotion: Bardziej złożony tryb, który używa dwuwymiarowego gradientu opartego na górnych i lewych sąsiadach do wypełnienia bloku, doskonały dla płynnych przejść.
• Dostępnych jest również kilka dodatkowych trybów kątowych do przewidywania wzorów diagonalnych.

Po dokonaniu predykcji koder oblicza rezydualną, która jest blokiem różnic piksel po pikselu między oryginalnym blokiem a blokiem przewidywanym. Ponieważ przewidywanie jest często bardzo dobre, ten blok rezydualny jest w większości wypełniony wartościami bliskimi zera.

Transformacja, Kwantyzacja i Kodowanie

Blok rezydualny jest następnie przetwarzany w sposób podobny do JPEG:

1. Transformacja: Blok rezydualny jest poddawany Dyskretnej Transformacie Kosinusowej (DCT), która przekształca go we współczynniki częstotliwości.
2. Kwantyzacja: To jest krok stratny. Współczynniki są dzielone przez wartości z tablicy kwantyzacji i zaokrąglane. Detale o wysokiej częstotliwości są zaokrąglane agresywnie, co sprawia, że wiele współczynników staje się zerami.
3. Kodowanie Entropijne: Wynikowy rzadki zbiór współczynników jest następnie kompresowany bezstratnie w celu utworzenia ostatecznego strumienia danych dla tego bloku. WebP używa adaptacyjnego schematu kodowania arytmetycznego, który jest ogólnie bardziej wydajny niż kodowanie Huffmana w JPEG.

Analiza 2: Bezstratna Kompresja WebP

Tryb bezstratny WebP to zupełnie inna bestia, niezwiązana z kodekiem VP8. Został zaprojektowany od podstaw, aby być bardziej wydajnym niż PNG. Osiąga to, stosując większy zestaw nowoczesnych technik kompresji bezstratnej.

Zaawansowane Transformacje Predykcyjne

Podobnie jak PNG, WebP Lossless używa filtrowania predykcyjnego. Przetwarza obraz piksel po pikselu i przewiduje wartość następnego piksela na podstawie jego sąsiadów. Następnie koduje tylko różnicę (rezydualną). Jednak WebP ma szerszy zestaw predyktorów i może nawet używać różnych predyktorów dla różnych części obrazu, dostosowując się do lokalnej zawartości.

Pamięć Podręczna Kolorów i Dopasowywanie Wzorców

Wyróżniającą cechą WebP Lossless jest wykorzystanie kilku zaawansowanych technik w celu eksploatacji różnych rodzajów redundancji:

• Dopasowywanie Wzorców (LZ77): Podobnie jak w algorytmie DEFLATE, wyszukuje on powtarzające się sekwencje pikseli w obrazie i zastępuje je krótszymi odwołaniami wstecznymi.
• Pamięć Podręczna Kolorów: To unikalna cecha. Koder utrzymuje małą, dynamiczną "pamięć podręczną" ostatnio używanych kolorów. Jeśli napotka piksel, którego kolor już znajduje się w pamięci podręcznej, może po prostu zapisać krótki indeks do tego wpisu w pamięci podręcznej zamiast pełnej wartości koloru. Jest to bardzo skuteczne w przypadku obrazów o ograniczonej, ale powtarzającej się palecie kolorów, co jest częste w grafice internetowej.
• Transformacja Przestrzeni Kolorów: Może zastosować odwracalną transformację, która dekoreluje kanały R, G i B (np. transformacja "odejmij zielony"). Często sprawia to, że dane w każdym kanale stają się bardziej jednolite, a tym samym bardziej kompresowalne.

Łącząc te liczne strategie, koder WebP Lossless może analizować obraz i stosować najskuteczniejszą kombinację narzędzi, aby osiągnąć wyższą gęstość kompresji niż bardziej bezpośrednie podejście PNG, czyli filtr-potem-DEFLATE.

Lepsza Przezroczystość i Animacja

Oprócz prostej kompresji, WebP został stworzony, aby rozwiązać praktyczne problemy, z jakimi borykali się programiści internetowi ze starszymi formatami, zwłaszcza w zakresie przezroczystości i animacji.

Stratny Kolor, Bezstratna Przezroczystość

Jedną z najpotężniejszych i unikalnych cech WebP jest jego zdolność do łączenia trybów kompresji. Może on przechowywać główne kanały kolorów RGB przy użyciu wysoce wydajnej kompresji stratnej (opartej na VP8), jednocześnie przechowując kanał alfa za pomocą oddzielnej, wysokiej jakości kompresji bezstratnej.

To zmienia zasady gry. Wcześniej, jeśli potrzebowałeś przezroczystości, byłeś zmuszony używać formatu PNG, który przechowywał cały obraz (zarówno kolor, jak i alfę) bezstratnie, co często skutkowało bardzo dużym plikiem dla obrazu fotograficznego. Dzięki WebP otrzymujesz to, co najlepsze z obu światów: mały rozmiar pliku formatu stratnego dla widocznych części obrazu i idealnie ostre krawędzie formatu bezstratnego dla maski przezroczystości. Jest to idealne rozwiązanie na przykład dla zdjęć produktów na stronie e-commerce lub logo z cieniami.

Animacje Następnej Generacji

Animowany GIF przez długi czas był standardem dla prostych animacji internetowych, ale był ograniczony przez limit 256 kolorów i nieefektywną kompresję. Animowany WebP stanowi nowoczesną alternatywę o znacznie lepszych możliwościach.

• Pełen Kolor: Animowany WebP obsługuje 24-bitowy kolor, pozwalając na animacje z milionami kolorów zamiast zaledwie 256.
• Przezroczystość: Obsługuje również pełny 8-bitowy kanał alfa dla animacji z częściową przezroczystością.
• Wydajna Kompresja: Plik animowanego WebP może zawierać mieszankę klatek stratnych i bezstratnych. Używa również inteligentnych technik do optymalizacji aktualizacji klatek. Dla każdej klatki może przechowywać pełną nową klatkę lub tylko prostokątny region obrazu, który uległ zmianie od poprzedniej klatki. Skutkuje to plikami animacji, które mogą być o 60-70% mniejsze od ich odpowiedników w formacie GIF.