eCommerce transfer-friendly — kilka słów o kompresji WebP

Dla wielu wprowadzona ostatnio aktualizacja edrone, która pozwala na automatyczną konwersję obrazów na format WebP we wspieranych funkcjonalnościach, wydaje się zmianą ledwie kosmetyczną. Obrazek to po prostu obrazek — ma cieszyć oko, informować, przyciągać uwagę. Jak zwykle diabeł tkwi w szczegółach, a te szczegóły w skali makro stają się… całkiem znaczące!

W dodatku nie jest taki straszny jak go, nomen omen, malują, bo ostatecznie dzięki zastosowaniu tego formatu skorzystają wszyscy — zarówno managerowie, jak i użytkownicy sklepów internetowych.

Kilka słów o WebP

WebP jest formatem obrazu, który swoją premierę miał w 2011 roku. Został on opracowany przez Google, na podstawie prac firmy On2 Technologies (później i tak wykupionej przez Google — co można nieco złośliwie nazwać naturalną koleją rzeczy). Głównym jego celem było zastąpienie bardzo popularnych, ale nie pozbawionych ograniczeń formatów (na przykład PNG, lub JPEG) jako nowego standardu, dla obrazów, które możemy znaleźć w sieci. Nie jest to z resztą szczególnym zaskoczeniem, bo sama nazwa mówi wiele o jego docelowym zastosowaniu.

Czy efekt został osiągnięty? Nie od razu, ale od 2012 śmiało można mówić o pełnej konkurencyjności względem jpeg i png, bo w tym roku został on ulepszony o możliwość bezstratnej kompresji — dzięki której mamy możliwość zachowania na przykład danych o przezroczystości. Co owa bezstratność w ogóle oznacza?

Kompresja stratna…

Żeby odpowiedzieć sobie na to pytanie, musimy wiedzieć najpierw, czym jest „stratność”. O kompresji stratnej, mówimy wtedy, gdy w jej wyniku tracimy część informacji, przez co powrót do wersji pierwotnej jest niemożliwy. Jako przykład utraconych danych, podaliśmy kanał alfa, zwany przezroczystością, ale nie są to jedyne informacje, które są pomijane, jako nieistotne.

Takim rodzajem kompresji, jest na przykład jeden z najpopularniejszych formatów — JPEG. Jej największą zaletą jest oczywiście lekkość — stosunkowo duże obrazy mogą być kompresowane do bardzo lekkich, przy zachowaniu względnie dobrej jakości. Pominięcie większości informacji, nie powoduje zauważalnego spadku jakości, ponieważ ludzkie oko i tak ich po prostu nie rejestruje. Tracimy dane o przezroczystości, ale nie jest to największym problemem tego formatu, bo i tak najlepiej sprawdza się do kompresji fotografii, które przezroczystości i tak nie posiadają.

Jak na ironię — kompresja stratna, w przypadku niektórych grafik — apli, gładkich podlewów ma tendencję do tworzenia niepożądanych gliczy zwanych częściej artefaktami — zakłóceń, przypominających odbarwienia, odcinających się od otoczenia. Proces powstawania artefaktów zależy od poziomu kompresji oraz samego obrazu.

… i bezstratna

Najpopularniejszym formatem kompresji bezstratnej jest PNG. Obraz po konwersji do tego formatu traci kilka kilobajtów, jednak możliwym jest przywrócenie go do oryginalnej formy.

Wspomniane wyżej formaty JPEG i PNG są oczywiście tylko przykładami, bo często spotykamy się z innymi formatami obrazów, takimi jak TIFF czy GIF, jednak to jotpegi i peengie, są zdecydowanie najpopularniejszymi i to je właśnie, zastąpić miał WebP.

Porównanie strat jakości obrazu, na przykładzie fragmentu diagramu architektury AVA. Lewa część ilustracji to obraz po kompresji PNG. Z prawej strony kompresja JPEG na poziomie jakości 1, z widocznymi artefaktami i utraconymi danymi przezroczystości.

O co właściwie tyle hałasu?

Główną zaletą WebP jest zatem redukcja rozmiaru grafik bez zauważalnego spadku jakości. O ile? To zależy od poziomu kompresji. I od formatu oczywiście.

  • Bezstratna kompresja WebP zmniejsza wagę obrazka o około 26% w porównaniu do jego rozmiaru w PNG.
  • Dla kompresji stratnej osiągamy zmniejszenie wagi od 25 do około 34% w porównaniu do obrazka w formacie JPEG. 
  • Zarówno kompresja stratna, jak i bezstratna, pozwala zachować dane o przezroczystości, natomiast skutkuje to nieznacznym wzrostem wagi obrazka.

Znaczna redukcja wagi skutkuje wzrostem prędkości strony. Jakim? To już bardzo mocno zależy od konstrukcji samej strony, ale na pewno wystarczająco, by stała się atrakcyjniejsza w oczach robotów Google. YouTube twierdzi, że po konwersji wszystkich miniatur na WebP, serwis przyspieszył o około 10%.

Abstrahując od prędkości ładowania — samo użycie formatu WebP umieszcza stronę wyżej w wynikach wyszukiwania WebP to w końcu wynalazek Google, więc nie powinno dziwić, że moloch faworyzuje swoje rozwiązania.

Jakie oszczędności generuje WebP ogólnie?

W roku 2018 całkowity ruch w sieciach stacjonarnych i mobilnych osiągnął wartość około 1,6 zettabajta, czyli tryliard (1021) bajtów. Google podaje, że 60-65% tej wartości to dane o obrazach. Bardziej obrazowo: 60% z 1 600 000 000 000 000 000 000 bajtów. Teraz odlicz sobie od tego jeszcze 30%. To w dalszym ciągu bardzo duża liczba, prawda? 

WebP w edrone

Konwersja obrazków do formatu WebP odbywa się w edrone automatycznie i bezwiednie. Oznacza to, że z definicji Twoje ilustrację będą przekształcane do WebP tam, gdzie jest to możliwe. Jeśli przeglądarka lub urządzenie klienta, nie obsługuje WebP, wyświetlone im obrazy będą w formacie pierwotnym (co w roku 2020 jest już mało prawdopodobne ze względu na powszechne wsparcie dla tego formatu w przeglądarkach Chrome, Firefox, Opera, czy Edge).

O czym jeszcze warto wspomnieć? 

Obrazki po konwersji serwujemy wprost z własnych serwerów, odciążając serwery sklepów klientów. Do dystrybucji obrazów wykorzystujemy CDN — czyli rozproszony system dostarczania treści w internecie. Nie wchodząc w techniczne szczegóły, skutkuje on jeszcze płynniejszym wczytywaniem grafik i jeszcze szybszym działaniem strony. Dodatkowo — odchudzone przez kompresję koszty transferu bierzemy na siebie!

W dalszym ciągu sądzisz, że obrazek, to tylko obrazek? 😉

Marcin Lewek

view all post

By Daniele Zedda • 18 February

← PREV POST

By Daniele Zedda • 18 February

NEXT POST → 34
Share on