Kraknij sobie obrazki – ile można zyskać zmniejszając grafiki Krakenem?

Łącza są coraz szybsze, dyski coraz większe, możliwości przeglądarek rosną i można odnieść wrażenie, że nie musimy już tak przejmować się ilością danych przesłanych przy przeglądaniu stron. Webdeweloperzy wiedzą jednak, że w środowiskach mobilnych rozmiar strony ma ogromne znaczenie. Google też stopniowo przyzwyczaja nas do optymalizacji, biorąc pod uwagę szybkość ładowania stron w algorytmie wyznaczającym pozycję strony na liście wyników wyszukiwania.

Redukcja rozmiaru grafik jest w takich sytuacjach kluczowa, a nie jest to zadanie łatwe. Algorytmy kompresji w różnych programach graficznych pozwalają na zmniejszenie rozmiaru, ale wyniki, jakie można osiągnąć, często nie są zadowalające. Warto więc sięgać po narzędzia opracowane specjalnie z myślą o zmianie rozmiaru plików graficznych. Jednym z ciekawszych graczy na tym zatłoczonym już polu jest webowy Kraken.io, którego możliwości sprawdziliśmy.

W darmowej wersji Kraken pozwala odchudzić pliki, których rozmiar nie przekracza 1 MB, co często wystarcza do optymalizacji stron czy skórek dla CMS-ów. Abonament PRO, kosztujący od 5 do 79 dolarów, poszerza możliwości platformy zależnie od potrzeb i ceny. Narzędzie to można obsługiwać z poziomu przeglądarki, a w płatnej wersji dostępna jest także wtyczka do popularnego Wordpressa oraz API dla deweloperów, pozwalające automatycznie zmniejszać hurtowe ilości grafik. Przeglądarkowy interfejs pozwala wysłać do usługi kilka plików na raz i pobrać ich przetworzone wersje w postaci archiwum ZIP, a w wersji płatnej także zapisać bezpośrednio na Dropboksie czy innych popularnych chmurach. Abonament daje także dostęp do skalowania obrazów i optymalizacji całych stron po podaniu odnośnika. Ogromną zaletą Krakena jest możliwość wyboru redukcji rozmiaru obrazów między stratną i bezstratną. Obsługiwane formaty to JPG, PNG i GIF.

Jak Kraken poradzi sobie z obrazami? Wystarczy porównać pliki wynikowe z tym, co może zapisać powszechnie używany przez grafików Photoshop bądź popularny TinyPNG, dostępny także jako wtyczka dla wspomnianego programu firmy Adobe. W teście wzięły udział zdjęcia zapisane w formacie JPG (jakość 100%) o rozmiarze 1000 na 662 piksele, zrzuty ekranu z systemów OS X i Android zapisane w formacie PNG, GIF-y oraz ikony w różnych rozmiarach.

Kompresja stratna w Krakenie pozwoliła zaoszczędzić 66,64% objętości plików. Algorytm Krakena dobiera stopień kompresji tak, by strata jakości nie była mocno widoczna i robi to dość dobrze.

Zapisując te same zdjęcia w formacie JPG w Photoshopie, aby uzyskać ten sam rozmiar, trzeba sięgnąć po kompresję JPG i ustawić ją na pożądanym poziomie (dla wykorzystanych zdjęć było to między między 40 i 80). Proces jest dość żmudny i pokazuje, ile czasu można oszczędzić korzystając z Krakena czy jemu podobnych narzędzi. Przemieszczanie suwaków pokazuje również, że Kraken dobrze dobiera stopień kompresji do treści obrazu – odrobinę większa już znacząco „niszczy obraz”, odrobinę mniejsza zaś daje efekty niewiele lepsze. Po zastosowaniu kompresji można zauważyć niedoskonałości, szczególnie na wyraźnych krawędziach i na styku kontrastujących kolorów, ale jest to trudne bez przyglądania się obrazom w powiększeniu.

PNG powstał jako format z założenia bezstratny, więc pozornie nie ma tu wielkiego pola do popisu. Nie brak jednak sprytnych narzędzi, które pozwolą odzyskać cenne bajty. Krakena można na tym polu zestawić z TinyPNG, którego również można obsłużyć z poziomu przeglądarki. Nowszy Kraken w większości przypadków pozwala zaoszczędzić kilka bajtów mniej, co oczywiście przełoży się na minimalnie wolniejsze ładowanie strony, ale algorytmy dopasowujące paletę barw są lepsze niż u przytoczonego konkurenta. Wycinanie „zbędnych” informacji negatywnie odbija się na większości gradientów i płynnych przejściach, za co winić należy redukcję palety dostępnych barw. Podobne wyniki daje zapis plików w formacie PNG z 8-bitową (lub mniejszą) głębią koloru w programach graficznych.

Zrzuty ekranu z systemu OS X były kompresowane w podobnym stopniu i testowane narzędzia zmniejszały je o 60-70%, zależnie od zawartości. Podczas gdy TinyPNG pozwala wyciąć minimalnie więcej danych, Kraken zachowuje kolory bliższe oryginałom. Przy kompresji ikony programu ArtRage również okazało się, że Kraken lepiej radzi sobie z dopasowaniem indeksowanych kolorów od TinyPNG. W tym przypadku Kraken wygenerował plik o 338 bajtów mniejszy od konkurenta.

Przy małych i nieskomplikowanych grafikach również można sporo odzyskać. Ikona Steam o wymiarach 32×32 piksele, po zapisaniu w Photoshopie (PNG24) zajmująca 2489 bajtów, została przez TinyPNG skompresowana do rozmiaru 1614 bajtów, przez Krakena zaś do 1617 bajtów. Duża, o rozmiarze 128×128 pikseli z 11826 bajtów do odpowiednio 4004 i 4008 kilobajtów.

Kompresja bezstratna w Krakenie nie daje już tak imponujących wyników, ale pozwala zachować oryginalny wygląd. Większość wykorzystanych w teście obrazów wizualnie ani trochę nie różni się od oryginałów, ale jest mniejsza o 10-20%.

Jeśli zaś chodzi o kompresję GIF-ów, nie ma tu wielkiego pola do popisu. Redukcja rozmiaru plików zapisanych w tym formacie jest znikoma, jeśli w ogóle jest możliwa.

Jak widać, zwłaszcza przy zmniejszaniu plików zapisanych w formacie JPG przy niewielkiej stracie jakości można zyskać naprawdę dużo miejsca. Narzędzi, które w tym pomogą, nie brakuje. Poza przywołanymi tutaj Kraken.io i TinyPNG warto spojrzeć w kierunku konsolowego PNGCRUSH. W naszej bazie programów również nie brak wartych uwagi narzędzi, jak RIOT (Radical Image Optimization Tool) oraz bazujący na potężnej bibliotece ImageMagick program Converseen. Łącza przyspieszają, dyski rosną, ale optymalizacja zawsze jest mile widziana.