Notatki zespołu o rzemiośle, formatach i drobnych decyzjach stojących za dobrym wynikiem.
Jak WebP osiąga mniejsze rozmiary niż PNG
WebP używa dwóch odrębnych trybów kompresji. Tryb bezstratny łączy predykcję przestrzenną i kolorystyczną z etapem kodowania entropijnego bardziej wyrafinowanym niż DEFLATE z PNG, osiągając stopień kompresji o około 26 procent lepszy na typowych obrazach według opublikowanego testu Google. Tryb stratny stosuje transformację blokową podobną do kompresji wideo, zaprojektowaną tak, by odrzucać informację percepcyjnie nieistotną, zachowując to, co oko faktycznie widzi. Dla obrazów z kanałem alfa WebP stosuje osobną podkompresję bezstratną do danych alfy, a do danych RGB kompresję stratną, dlatego stratny WebP z przezroczystością może być około trzy razy mniejszy niż PNG przy równoważnej jakości wizualnej. DEFLATE z PNG zna tylko bezstratność i nie potrafi wykorzystać percepcyjnego kompromisu, który eksploatuje tryb stratny. Różnica formatów wyjaśnia tę przepaść.
Kanał alfa w szczegółach
Zarówno PNG, jak i WebP obsługują 8-bitową przezroczystość alfa, co oznacza, że każdy piksel może przechowywać wartość krycia od 0 (w pełni przezroczysty) do 255 (w pełni nieprzezroczysty). Gdy silnik obrazów platformy odtwarza PNG jako WebP, odczytuje wartości RGBA każdego piksela i przekazuje wartości alfy wprost do etapu kompresji WebP, gdzie są zachowywane kompresją bezstratną, niezależnie od tego, jak traktowane są dane RGB. W efekcie każdy przezroczysty piksel PNG przy alfie 0, każdy półprzezroczysty między 1 a 254 i każdy nieprzezroczysty przy 255 odwzorowuje się na dokładnie ten sam stan w WebP. Dla logo z miękkimi cieniami albo tekstu z wygładzeniem na przezroczystym tle gładkość krawędzi przetrwa nienaruszona. Kontrastuje to z JPG, który w specyfikacji swojego kontenera nie ma pola alfy i musi złożyć obraz na kolorze tła przed zapisem.
Core Web Vitals a wybór formatu obrazu
Largest Contentful Paint mierzy, ile czasu zajmuje pojawienie się największego widocznego elementu strony w oknie widoku. Dla większości stron treści tym elementem jest obraz główny, a Google używa LCP jako sygnału rankingowego w swojej ocenie Core Web Vitals. Obrazy PNG to stałe źródło niepowodzeń LCP z powodu rozmiaru pliku, bo fotograficzny PNG w rozdzielczości 4K może ważyć kilka megabajtów, podczas gdy równoważny WebP w jakości bliskiej bezstratnej zwykle zajmuje ułamek tego. PageSpeed Insights wskazuje to wprost w pozycji audytu o serwowaniu obrazów w formatach nowej generacji, wymieniając PNG jako format do zastąpienia. Przeniesienie PNG leżących na krytycznej ścieżce renderowania na WebP to jedna z najbardziej opłacalnych pojedynczych zmian dla mierzonej wydajności strony. Oś czasu obsługi w przeglądarkach czyni to bezpiecznym: Chrome dodał WebP w 2011 roku, Firefox w 2019, Safari w 2020, a Edge od przebudowy na Chromium.
Wynik stratny i ustawienie bliskie bezstratnemu
Zapis WebP oferuje parametr jakości od 0 do 100, gdzie wyższe wartości zachowują więcej szczegółu kosztem większych plików. To narzędzie zapisuje przy stałym ustawieniu bliskim bezstratnemu, dostrojonym tak, by równoważyć wierność wizualną i rozmiar pliku dla typowych kategorii zasobów sieciowych: fotografii, grafiki interfejsu i ikon. Przy tym ustawieniu wynik jest percepcyjnie nieodróżnialny od źródłowego PNG przy normalnej odległości oglądania ekranu. Ściśle rzecz biorąc, część precyzji na poziomie bitów zostaje utracona względem prawdziwie bezstratnego zapisu, co oznacza, że porównanie bajt po bajcie między zdekodowanymi pikselami WebP a oryginalnymi pikselami PNG ujawni drobne różnice liczbowe. Te różnice leżą poniżej progu ludzkiego postrzegania dla treści fotograficznej. Dla obrazowania medycznego, fotografii satelitarnej czy archiwalnego przechowywania cyfrowego, gdzie wierność bezstratna jest twardym wymogiem, właściwym podejściem jest zachowanie PNG i użycie WebP wyłącznie jako eksportu do dostarczenia, a nie kopii roboczej.
Zachowanie metadanych
Potok użyty do konwersji PNG na WebP usuwa metadane EXIF, IPTC i XMP z wyniku. Odpowiada to zachowaniu obserwowanemu we wszystkich trzech głównych silnikach przeglądarek. Profile koloru ICC są obsługiwane niespójnie: Chrome i Safari zachowują znacznik profilu ICC sRGB w wyniku WebP, a Firefox usuwa wszystkie metadane, łącznie z profilem ICC. W efekcie konwertowany WebP jest bezpieczny w sRGB we wszystkich przeglądarkach, ale każdy znacznik szerokiej gamy, taki jak Display-P3, Adobe RGB czy ProPhoto RGB, obecny w źródłowym PNG, nie przetrwa w Firefoxie. Dla profesjonalnych procesów z krytycznym kolorem ta niespójność ma znaczenie, więc jeśli końcowy wynik wymaga wierności profilu koloru, konwertuj narzędziem, które wprost zapisuje dane ICC, albo nanieś znacznik profilu jako etap obróbki końcowej przy użyciu dedykowanego edytora metadanych obrazu.
Kiedy zachować PNG, a kiedy WebP wystarcza
Praktyczne drzewo decyzyjne jest krótkie. Jeśli ostatecznym celem obrazu jest strona lub aplikacja sieciowa, a środowiskiem renderowania jest dowolna przeglądarka od 2020 roku wzwyż, WebP jest właściwym formatem eksportu. Jeśli obraz musi otwierać się w aplikacji graficznej, takiej jak Figma, Sketch czy Affinity Designer, najpierw sprawdź obsługę WebP w swojej konkretnej wersji, bo ona się różni. Jeśli obraz trafia do druku, postaw na PNG lub TIFF, bo większość RIP drukarskich nie obsługuje WebP. Jeśli obraz idzie pocztą elektroniczną, bezpieczniejszy jest PNG, bo klienty pocztowe są znane z niespójności wobec nowoczesnych formatów. A jeśli obraz to plik roboczy, który edytujesz i zapisujesz wielokrotnie, trzymaj PNG jako master. WebP w jakości bliskiej bezstratnej to świetny format dostarczania, a PNG pozostaje lepszy do archiwizacji i edycji. Czysty proces trzyma PNG jako oryginał i wysyła WebP do sieci.
