Wpływ kompresji rastra na wydajność aplikacji mapowej

Wpływ kompresji rastra na wydajność aplikacji mapowej*

Alternatywą dla technologii opartych na bazach danych są publikacje rastrowe, które pomimo swoich ograniczeń mogą znaleźć zastosowanie w prezentacji danych mających odniesienie przestrzenne. Wydajność przeglądarki obrazów może mieć szczególny wpływ na komfort jej użytkowania.

* Król, K., Bitner, A. (2019). Impact of raster compression on the performance of a map application. Geomatics, Landmanagement and Landscape (GLL), 3, 41-51. DOI: 10.15576/GLL/2019.3.41

Obraz cyfrowy można zapisać w pamięci komputera w postaci pliku graficznego. Wybór formatu zależy np. od planowanego przeznaczenia obrazu. W przypadku grafiki rastrowej możliwe jest zapisanie pliku w jednym z wielu formatów, spośród których najpopularniejsze są BMP, JPG, GIF, TIF oraz PNG. Innym, rzadziej stosowanym formatem jest format WebP [Ginesu i in. 2012]. W założeniu WebP ma być nowym otwartym standardem dla skompresowanej grafiki w Internecie, jako alternatywa dla takich formatów jak JPG. Postawiono pytanie badawcze: w jakim stopniu zastosowanie rastrów zapisanych w formacie WebP wpływa na wydajność aplikacji mapowej? Odpowiedź na to pytanie może dostarczyć argumentów przemawiających za wyborem najefektywniejszej metody kompresji plików graficznych.

Celem pracy jest analiza zależności występujących między stopniem kompresji rastra a wydajnością aplikacji mapowej. Badania przeprowadzono w sposób nieformalny, w warunkach zwykłego użytkowania, w formie testów ad-hoc. Pomiar wykonano przy pomocy trzech aplikacji automatyzujących testy: (1) Cloudinary Website Speed Test Image Analysis Tool, (2) GTmetrix oraz (3) Dareboost. Wykazano, że w aplikacjach bazujących na mapach rastrowych, które mają charakter poglądowy, tymczasowy i jednocześnie doraźny (typu ad-hoc maps) zachowanie wysokiej jakości obrazów kosztem wydajności aplikacji nie znajduje uzasadnienia.

Materiały i metody

Testom poddano prototypową aplikację, którą utworzono przy pomocy HTML, CSS, plików graficznych oraz komponentu Mapbox: Zoomable jQuery Map Plugin (MIT License) [Mohler 2019]. Komponent Mapbox: Zoomable jQuery Map Plugin wybrano z uwagi na niewielkie wymagania sprzętowe oraz brak ograniczeń względem rozmiaru prezentowanych obrazów. Zasadniczą częścią aplikacji są pliki rastrowe w dowolnym formacie, nałożone na siebie jeden na drugi w oknie roboczym aplikacji. Plugin Mapbox umożliwia przeglądanie grafik rastrowych, w tym chwytanie i przeciąganie obszaru mapy. Efekt typu „zoom” jest tu realizowany poprzez wywołanie poszczególnych wariantów rastra, jeden po drugim.

Badania przeprowadzono w sposób nieformalny, w warunkach zwykłego użytkowania, w formie testów ad-hoc. Testy ad-hoc (eksploracyjne) to najmniej formalna metoda testowania m.in. aplikacji internetowych. Ten typ testów może mieć spontaniczny charakter, pozwala zapoznać się z charakterem testowanej aplikacji i przeprowadzany jest bez tworzenia formalnego planu testów. Testy typu ad-hoc są pomocne przy planowaniu innych rodzajów testów, w tym formalnych tzn. przeprowadzanych w warunkach laboratoryjnych [Król 2016]. Pomiar wykonano przy pomocy trzech aplikacji: (1) Cloudinary Website Speed Test Image Analysis Tool, (2) GTmetrix oraz (3) Dareboost.

Testom wydajności poddano 3 warianty aplikacji internetowej. Aplikacja w pierwszym i w drugim wariancie prezentowała obrazy (raster files) w wersji pierwotnej, wygenerowane w postaci plików JPG oraz PNG z warstwy wektorowej GIS. Następnie rastry te skompresowano za pomocą narzędzia Cloudinary i zapisano w formacie WebP.

Kompresji danych ma znaczenie

Badania nad szeroką gamą systemów hipertekstowych wykazały, że użytkownicy oczekują czasu reakcji krótszego niż jedna sekunda przy przechodzeniu z jednej strony na drugą. Umożliwia to swobodne poruszanie się w przestrzeni informacyjnej. Aplikacje internetowe powinny być zatem projektowane z myślą o ich wydajności. Aby rozmiary witryn były jak najmniejsze, grafika powinna być ograniczona do rozsądnego minimum (adekwatnie do funkcji, jaką ma spełniać witryna), podobnie jak liczba komponentów składowych witryny, a efekty multimedialne powinny być używane tylko wtedy, gdy naprawdę zwiększają zrozumienie informacji [Nielsen 1997].

Wydajność aplikacji internetowych zależy od kilku zasadniczych czynników, w tym od wydajności serwera (hostingu), optymalnego kodu źródłowego oraz połączenia internetowego. Prędkość przesyłu danych uzależniona jest od konfiguracji usługi. Dotyczy to również wydajności serwera. Jednak nawet najszybszy serwer może okazać się niewykorzystany, jeżeli kod źródłowy aplikacji, tj. sposób jej utworzenia, nie będzie optymalny. Na wydajność aplikacji mogą wpłynąć także komponenty wykorzystane do jej utworzenia, w tym różne skrypty i biblioteki. Ponadto powolne wczytywanie aplikacji internetowych bywa często spowodowane zastosowaniem dużych plików graficznych [Nielsen 2010]. Można temu zaradzić poprzez ich kompresję. Zastosowanie kompresji może znacząco zmniejszyć rozmiar pliku [Brailovskiy i Plotkin 2008].

Czym jest kompresja danych?

Kompresję można zdefiniować jako proces przekształcenia źródłowego zbioru danych w reprezentację o mniejszej liczbie bajtów. Proces odwrotny (czyli rekonstrukcja oryginalnego zbioru danych) jest nazywany dekompresją. Efektywność kompresji jest rozumiana jako minimalizacja rozmiaru danych skompresowanych w stosunku do zbioru oryginalnego [Boniecki i in. 2009].

Zasadniczo metody kompresji można podzielić na bezstratne i stratne. W kompresji bezstratnej, ciąg danych uzyskany po transformacji jest identyczny ze zbiorem źródłowym. Kompresję bezstratną można zatem nazwać odwracalną lub bezstratną numerycznie. Algorytmy bezstratne są stosowane, gdy obraz jest traktowany jako dokument, czyli m.in. w przypadku obrazów medycznych będących podstawą dla diagnozy, jak również wtedy, gdy obraz będzie podlegał dalszemu przetwarzaniu [Starosolski 2004]. Wynikiem kompresji bezstratnej mogą być pliki PNG (Portable Network Graphics), które powstają z myślą o publikacji w Internecie.

Do kompresji typowych obrazów powszechnie stosowane są algorytmy stratne. Kompresja stratna nie pozwala odtworzyć danych źródłowych z dokładnością do jednego bitu. Dlatego określana jest jako kompresja stratna numerycznie lub nieodwracalna [Boniecki i in. 2009]. W przypadku typowych obrazów utrata informacji następująca w procesie kompresji-dekompresji pozostaje w większości przypadków niedostrzegalna dla ludzkiego oka, przez co może być tolerowana. Dlatego też algorytmy stratne są określane jako „wizualnie bezstratne”. Przykładem kompresji stratnej, która powoduje zmiany w zapisywanym obrazie jest kompresja do pliku JPG (Joint Photographic experts Group). Nie zawsze jednak (nieznaczne) pogorszenie się jakości obrazu ma znaczenie. Każdy obraz zawiera tzw. szum. Zmiana obrazu nieprzekraczająca poziomu szumu nie ma znaczenia dla jakości obrazu. Jeżeli nie analizuje się samego szumu, to zastosowanie kompresji stratnej zmieniającej obraz na poziomie nieprzekraczającym szumu zapewnia taką samą jakość obrazu (dla odbiorcy) jak kompresja bezstratna [Borawski 2011]. Kompresja obrazu może stać się zauważalna, jeżeli zostaną zmienione warunki obserwacji lub obraz zostanie poddany dalszemu przetworzeniu [Boniecki i in. 2009].

Wyniki i wnioski

Wynikiem implementacji skryptu Mapbox: Zoomable jQuery Map Plugin [Mohler 2019] była aplikacja internetowa umożliwiająca przeglądanie mapy rastrowej. Za podkład mapowy posłużyła mapa glebowo-rolnicza Gminy Proszowice utworzona przy pomocy oprogramowania QGIS. Gmina Proszowice jest położona w północnej części woj. małopolskiego (Polska) na terenie Płaskowyżu Proszowickiego [Król i Prus 2017].

Pliki rastrowe przygotowano w trzech pakietach po pięć obrazów w każdym, każdy obraz w różnej rozdzielczości (tab. 2). Takie przygotowanie obrazów miało zwiększyć użyteczność aplikacji i zagwarantować relatywnie duże obciążenie klienta (klient to urządzenie wraz z odpowiednim oprogramowaniem typu klient, umożliwiające obsługę aplikacji stworzonej w architekturze klient-serwer). W pierwszym pakiecie znalazły się pliki JPG o łącznym rozmiarze ok. 7MB, w drugim zaś pliki PNG o łącznym rozmiarze ok. 11MB. Trzeci pakiet zawierał pliki zapisane w formacie WebP o łącznym rozmiarze około 5MB.

Tabela 2. Atrybuty rastrów składających się na każdy z wariantów aplikacji

Plik rastrowy	Rozmiar (px)	Rozmiar plików JPG (KB)	Rozmiar plików PNG (KB)	Rozmiar plików WebP (KB)
1	841×595	119	328	97
2	1753×1240	423	887	237
3	3507×2480	1197	2046	872
4	5261×3720	2168	3242	1507
5	7015×4960	3309	4453	2135
Łącznie	n/d	7216	10956	4848

Źródło: badania własne

Kompresja plików już skompresowanych

Testy wykonane przy pomocy aplikacji Website Speed Test potwierdziły, że największe możliwości kompresji obrazów wystąpiły w przypadku plików PNG. Możliwe było ich przekształcenie do formatu WebP i zredukowanie ich objętości nawet o 60% (tab. 3). Kompresja rastrów przygotowanych w formacie JPG oraz WebP według Website Speed Test nie dałaby już tak dużych korzyści. Wynika to z faktu, że są to rozszerzenia plików już skompresowanych. Byłaby to zatem swoista „kompresja plików już skompresowanych”. Pomimo stosunkowo dużych możliwości w zakresie redukcji objętości obrazów, wydajność wszystkich aplikacji, bez względu na typ zastosowanych rastrów została oceniona jako dobra. Wnioskować można, że wynika to z charakteru aplikacji, którą utworzono w formie niewielkiego komponentu.

Tabela 3. Wyniki testów wydajności wykonanych przy pomocy Website Speed Test

Wskaźnik	Wariant I (JPG)	Wariant II (PNG)	Wariant III (WebP)
Page Image Score	B (Good)
Total Images Analyzed	10
Image Weight Comparison, Current Images (MB)	1.8	3.3	1.2
Image Weight Comparison, Potential after Smart Compression (MB)	1.4	1.2	1.1
Potential Compressed Weight (%)	76.9 (23.1)	63.1 (36.9)	94.2 (5.8)

Źródło: badania własne

Wartości wskaźników PageSpeed Score oraz YSlow są naliczane w odmienny sposób. Analizując wartości pomiarów wskaźnika YSlow wnioskować można, że przy jego naliczaniu nie są brane pod uwagę wielkości plików graficznych – wartości tego wskaźnika były jednakowe, bez względu na rozmiar pakietu obrazów (tab. 4). Szczególną uwagę zwraca wielkość wskaźnika PageSpeed Score naliczona w przypadku aplikacji wykorzystującej pliki PNG. Analiza pomiarów skłania do wniosku, że wartość PageSpeed Score zależy m.in. od wielkości plików graficznych składających się na aplikację.

Tabela 4. Measurement results for selected performance indices (desktop mode)

Analysis tool	GTmetrix PageSpeed Score (%)	GTmetrix YSlow (%)	GTmetrix Fully Loaded Time (s)	Dareboost Performance grade (%)	Dareboost Speed Index (points)	F-Score
Type of the variable	S (X1)	S (X2)	D (X3)	S (X4)	D (X5)
Wariant I (JPG)	64	77	3.5	58	1042	2.98
Wariant II (PNG)	24	77	3.7	59	1788	1.33
Wariant III (WebP)	86	77	3.1	61	1159	4.84

Źródło: badania własne

Niskiej wartości wskaźnika YSlow w przypadku aplikacji wykonanej w drugim wariancie (pliki PNG) towarzyszy niska wartość wskaźnika Speed Index (pomiar w trybie desktop, Paris, France). Warto też zauważyć, że w każdym przypadku wartość Speed Index przekroczyła zalecane 1000 jednostek. Skłania to do wniosku, że w przypadku aplikacji wykonanej w wariancie drugim (pliki PNG) o niskiej wydajności przesądziło zastosowanie dwóch rastrów, z których wielkość jednego sięgała prawie 4.5MB. Dla porównania jego odpowiednik z rozszerzeniem WebP był ponad dwukrotnie mniejszy.

Największą wartość wskaźnika F-Score uzyskała aplikacja, do której utworzenia wykorzystano pliki WebP, najgorszy zaś aplikacja, którą utworzono bazując na plikach PNG. Przesądziły o tym wartości pomiarów GTmetrix PageSpeed Score oraz Dareboost Speed Index. W tym miejscu warto jednak zauważyć, że badania dotyczyły wydajności aplikacji na urządzeniach stacjonarnych (tryb desktop). Testy przeprowadzone na urządzeniach przenośnych (pomiar w trybie mobile: Galaxy S6, Android, Paris, France) potwierdziły odnotowane wcześniej zależności. Najmniejszą, czyli najkorzystniejszą wartość wskaźnika Mobile Speed Index odnotowano w przypadku aplikacji, którą wykonano w oparciu o pliki WebP, najgorszą zaś w przypadku aplikacji prezentującej obrazy w formacie PNG. Jest to związane wielkością plików składowych aplikacji.

W przypadku urządzeń mobilnych wydajność aplikacji mapowej nie przesądza o jej użyteczności. Owszem, czas renderowania się aplikacji ma istotne znaczenie, jednak nawet szybko wczytana aplikacja może być trudna w obsłudze. Równie istotne co wydajność są kwestie projektowe, takie jak: wykorzystanie czcionek o odpowiednim rozmiarze, tak aby nie utrudniały odczytania tekstu oraz umiejscawianie elementów aktywnych (np. przycisków nawigacji) w optymalnej odległości od siebie. Synergia braku wydajności oraz błędów projektowych mogą prowadzić do tego, że aplikacja będzie bezużyteczna, co może być raportowane np. dużym współczynnikiem odrzuceń (bounce rate).

Podsumowanie

Wskaźniki wydajności mają wartość poglądową, syntetyczną. Wyniki ich pomiaru nie powinny być traktowane bezwzględnie. Wynika to ze złożoności relacji zachodzących w ekosystemie internetowym pomiędzy witryną internetową (złożoną z komponentów), serwerem danych oraz jakością połączenia internetowego. Testy wydajności mogą być jednak pomocne w doborze pliku rastrowego do określonego zastosowania. W praktyce przydatna może być także znajomość tematu oraz pogłębiona analiza jakościowa, dotycząca nie tylko wydajności poszczególnych komponentów, ale także wydajności całego serwisu. Okazuje się bowiem, że pomimo iż pliki WebP cechuje dobra jakość przy niewielkim rozmiarze pliku, format ten nie cieszy się dużą popularnością i nie jest powszechnie stosowany. Nie zmieniło tego nawet zastosowanie plików WebP w najpopularniejszych serwisach społecznościowych oraz wsparcie Google. W praktyce może się zatem okazać, że zastosowanie WebP może przynieść pewne korzyści w zakresie wydajności, jednak nie będą one rzeczywiście odczuwalne dla użytkowników. Ponadto mogą się pojawić problemy z ich wyświetleniem przez wybrane przeglądarki internetowe.

Wybór rozszerzenia spośród JPG, PNG, WebP lub innego może zależeć od oczekiwanej wydajności aplikacji, ale także od oczekiwanej „jakości wizualnej” samego obrazu. Otóż jakość wizualna była najmniejsza w przypadku rastrów JPG, co przejawiało się w postaci nieznacznych artefaktów powstałych na skutek kompresji danych, czyli wad obrazu w postaci rozmazania czy też rozmycia konturów, braku ostrości. Niedoskonałości te były wyraźniejsze na obrazach o mniejszych rozdzielczościach, gdzie występowało większe zagęszczenie krawędzi obiektów. Jednocześnie jednak niedoskonałości te mogły być w ogóle niezauważalne dla przeciętnego użytkownika. Można zatem wysnuć przypuszczenie, że w aplikacjach bazujących na mapach rastrowych, które mają charakter jedynie poglądowy, tymczasowy i jednocześnie doraźny (typu ad-hoc maps) zachowanie wysokiej jakości obrazów kosztem wydajności aplikacji nie znajduje uzasadnienia.

Literatura
Spis literatury dostępny jest w publikacji:

Król, K., Bitner, A. (2019). Impact of raster compression on the performance of a map application. Geomatics, Landmanagement and Landscape (GLL), 3, 41-51. DOI: 10.15576/GLL/2019.3.41