WebP format - LSSnevena.lss.hr/.../racfor/2018/seminari/mostrek/seminar.pdf2 1. Uvod WebP format...
Transcript of WebP format - LSSnevena.lss.hr/.../racfor/2018/seminari/mostrek/seminar.pdf2 1. Uvod WebP format...
SVEUČILIŠTE U ZAGREBU
FAKULTET ELEKTROTEHNIKE I RAČUNARSTVA
Seminarski rad u okviru predmeta „Računalna forenzika“ [2017./2018.]
WebP format
Mirela Oštrek
Zagreb, siječanj 2018.
1
Sadržaj
1. Uvod ................................................................................................................................... 2
2. Struktura WebP datoteke ................................................................................................... 3
2.1. Zaglavlje ...................................................................................................................... 3
2.2. Struktura datoteke pri sažimanju bez gubitka ............................................................. 3
2.3. Struktura datoteke pri sažimanju s gubitkom .............................................................. 4
2.4. Prošireno zaglavlje ...................................................................................................... 4
3. Tehnike sažimanja u WebP formatu .................................................................................. 5
3.1. Sažimanje s gubitkom ................................................................................................. 5
3.2. Sažimanje bez gubitka ................................................................................................. 6
4. Podržanost WebP formata .................................................................................................. 7
5. Vizualna usporedba performansi WebP i ostalih formata ................................................. 8
6. Zaključak.......................................................................................................................... 10
Literatura .................................................................................................................................. 11
2
1. Uvod
WebP format suvremeni je otvoreni format za slike razvijan od 2010. godine. Najavljen je
kao novi standard za sažimanje slike u boji s gubitkom (engl. lossy compression) koji stvara
datoteke manje veličine, a slične ili iste kvalitete kao JPEG format [1]. Zasnovan je na
otvorenom algoritmu za sažimanje VP8 i koristi datotečni spremnik (engl. file container)
zasnovan na RIFF (Resource Interchange File Format) formatu. Firma Google koja ga razvija
procjenjuje kako 65% mrežnog prometa danas otpada na prijenos slikovnih podataka i na
temelju toga predviđa značajno povećanje brzine interneta za sve korisnike nakon prelaska na
WebP format [2]. U listopadu, 2011. WebP dobiva podršku za animaciju, ICC (International
Color Consortium) profil, XMP (Extensible Metadata Platform) metapodatke i mogućnost
slaganja slika (engl. tiling). Već sljedeće godine, implementiran je i algoritam za sažimanje bez
gubitka (engl. lossless compression) i dodana je podrška za transparentnost. Inačica 0.6.1 kao
posljednja postala je dostupna krajem studenog, 2017. [1]
Preporučuje se koristiti WebP format kao alternativa GIF formatu. U WebP formatu za
animirane slike mogu se kombinirati dvije vrste sažimanja unutar iste animacije. Također,
moguće je preskočiti određeni broj okvira i na taj način se pozicionirati na željeni okvir.
Veličina slike umanjena je za 64% u odnosu na GIF format korištenjem algoritma za sažimanje
s gubitkom i za 19% korištenjem sažimanja bez gubitka [1]. U usporedbi s PNG formatom,
WebP slike sažete bez gubitka su 26% manje. Isto tako, WebP slike sažete s gubitkom su 25-
34% umanjene u odnosu na JPEG slike s ekvivalentnim SSIM (Structural Similarity) indeksom
kvalitete. Korištenje transparentnosti uvećava sliku za samo 22% pri sažimanju bez gubitka. U
slučajevima kada je sažimanje s gubitkom prihvatljivo, rezultantna slika je obično i do tri puta
manja od odgovarajuće slike u PNG formatu [3].
3
2. Struktura WebP datoteke
U ovom poglavlju opisana je struktura WebP datoteka: osnovno i prošireno zaglavlje te
tijelo datoteke za dvije moguće vrste sažimanja. Detaljnije informacije kao i daljnja struktura
naznačenih elemenata koji nisu opisani radi jednostavnosti mogu se pronaći u [5].
2.1. Zaglavlje
Prva četiri bajta zaglavlja rezervirana su za ASCII znakove 'R', 'I', 'F' i 'F' što proizlazi iz
činjenice da WebP format koristi datotečni spremnik u RIFF formatu. Sljedeća četiri bajta
rezervirana su za informaciju o veličini datoteke. Najveća moguća vrijednost ovog polja je 232
– 10 B što znači da datoteka može biti velika skoro i do 4 GiB. Nakon podatka o veličini, slijedi
niz ASCII znakova 'W', 'E', 'B', i 'P' s obzirom da se radi o WebP formatu. Ovo se može vidjeti
na slici 1.
2.2. Struktura datoteke pri sažimanju bez gubitka
Struktura datoteke za sažimanje slike bez gubitka prikazana je na slici 2. Sa slike se isčitava
kako dio sa podacima koji su sažeti korištenjem VP8L inačice algoritma slijedi nakon
zaglavlja. Prednost ove metode jest ugrađena podrška za transparentnost, a nedostaci su da ne
podržava ostale naprednije opcije koje su dodane unutar proširenog zaglavlja.
0 1 2 3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| WebP file header (12 bytes) |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| VP8L chunk |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
0 1 2 3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 'R' | 'I' | 'F' | 'F' |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| File Size |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 'W' | 'E' | 'B' | 'P' |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
Slika 1. Zaglavlje WebP datoteke [5]
Slika 2. Struktura WebP datoteke pri sažimanju bez gubitka [5]
4
2.3. Struktura datoteke pri sažimanju s gubitkom
Nakon zaglavlja često se koristi i struktura tijela datoteke prikazana na slici 3. Ona se sastoji
od već opisanog zaglavlja i od dijela sa slikom koja je sažeta uz pomoć inačiceVP8 algoritma.
Jedna od prednosti ovakve strukture je to da ju podržavaju starije aplikacije te su datoteke
dobivene ovakvim sažimanjem tipično manje od istih datoteka dobivenih sažimanjem bez
gubitka. Koristi se u slučaju da je sliku potrebno sažeti s gubitkom te ne podržava značajke kao
što su transparentnost i ostale mogućnosti koje će biti navedene u dijelu o proširenom zaglavlju.
2.4. Prošireno zaglavlje
U konačnici, prošireno zaglavlje (slika 4) sastoji se od običnog WebP zaglavlja na koje se
redom nastavljaju: VP8X zaglavlje, Rsv (dva rezervirana bita uvijek postavljena na 0), 'I' za
ICC profil (1 bit), 'L' za transparentnost (1 bit), 'E' za EXIF metapodatke (1 bit), 'X' za XMP
metapodatke (1 bit), 'A' za animacije (1 bit), 'R' i Reserved kao bitovi koji su uvijek postavljeni
na 0 (1 + 24 bita) te širina i visina slike od kojih je oduzeta jedinica. Ovaj tip zaglavlja nužan
je za korištenje naprednijih opcija.
0 1 2 3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| WebP file header (12 bytes) |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| VP8 chunk |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
0 1 2 3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| WebP file header (12 bytes) |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| ChunkHeader('VP8X') |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|Rsv|I|L|E|X|A|R| Reserved |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| Canvas Width Minus One | ...
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
... Canvas Height Minus One |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
Slika 3. Struktura WebP datoteke pri sažimanju s gubitkom [5]
Slika 4. Prošireno zaglavlje WebP datoteke [5]
5
3. Tehnike sažimanja u WebP formatu
Poznate su dvije tehnike sažimanja slika: sažimanje s gubitkom i sažimanje bez gubitka. U
nastavku su ukratko opisane svaka od njih.
3.1. Sažimanje s gubitkom
Na slici 5 prikazan je proces sažimanja slike s gubitkom. Dijelovi koji su zaokruženi
crvenom bojom predstavljaju ključne razlike u odnosu na metodu sažimanja JPEG formata. Na
vrhu slike 5 vidljivo je kako se u početku vrši podjela slike na blokove. Na temelju prethodnog
bloka, stvara se predikcija za idući blok. Podaci koji se ponavljaju na taj način su izuzeti iz
svakog od blokova što ostavlja samo manji dio piksela (većina su nule) za daljnju obradu koja
uključuje kvantizaciju kao i entropijsko kodiranje. Bitno je napomenuti kako je korak
kvantizacije jedina točka u cijelome procesu koja nije inverzna, odnosno nepovratno gubi
podatke. Svi ostali koraci u potpunosti su invertibilni. Najznačajnija razlika u odnosu na JPEG
format je to što WebP koristi entropijsko aritmetičko kodiranje za razliku od Huffmanovog
kodiranja koje je korišteno u JPEG formatu. Ono doprinosi smanjenju sažete datoteke za 5 –
10% [6].
Slika 5. WebP sažimanje s gubitkom [6]
6
3.2. Sažimanje bez gubitka
Ovakvo sažimanje izvodi se kroz nekoliko slijednih koraka [6]:
▪ Prostorno predviđanje (engl. Spatial Prediction): Iskorištava činjenicu da su
susjedni pikseli najčešće korelirani. Slika se dijeli na pravokutne blokove piksela i
svi pikseli unutar istoga bloka koriste isti način predviđanja.
▪ Transformacija boje (engl. Color Transform): Zadržava se originalna vrijednost
zelene boje na slici, a vrijednosti crvene i plave boje transformiraju se u odnosu na
zelenu boju.
▪ Oduzimanje zelene boje (engl. Subtract Green Transform): Od crvene i plave
vrijednosti oduzimaju se zelene vrijednosti za svaki piksel.
▪ Transformacija paleta (engl. Color Indexing (palettes) Transform): Ukoliko je
maksimalna vrijednost piksela na slici manja od 255, stvara se polje indekasa koje
mapira vrijednosti piksela u odgovarajuće indekse.
▪ Kodiranje priručnog spremišta boja (engl. Color Cache Coding): Lokalna paleta
boja koja služi za predviđanje piksela u pripadnom bloku ažurira se u skladu s
vrijednostima piksela trenutnog bloka.
▪ LZ77 prefiksno kodiranje: Označava od kojeg piksela je potrebno kopirati ostale
piksele do trenutnog u liniji.
7
4. Podržanost WebP formata
Unatoč odličnim performansama, WebP format još uvijek nije dovoljno rasprostranjen.
Jedan od razloga mogao bi biti oskudnost alata koji ga podržavaju. Tablica 1 daje pregled alata
po operacijskim sustavima koji podržavaju WebP datoteke. S obzirom da je format u vlasništvu
firme Google, vidljivo je kako ga podržava Google Chrome preglednik kao i Google Picasa
alat za organizaciju i rad sa slikama. Također, podržava ga i Opera web preglednik. Naime,
ovaj preglednik veoma je sličan Google Chrome pregledniku. Jedan od razloga radi kojega su
slični je činjenica da su Google i Opera sklopili ugovor u kojemu se Opera obvezuje koristiti
Google tražilicu po zadanim postavkama [7]. Osim ovoga, jedan od poznatijih web preglednika
koji ne podržava WebP format je Mozilla Firefox. Međutim, Firefox je izjavio kako u
budućnosti planira ugraditi podršku za WebP format [10]. Kada se to dogodi, WebP će
podržavati tri vrlo korištena web preglednika i to bi moglo doprinijeti širenju formata. Internet
Explorer i Safari trenutno ne podržavaju WebP format.
Tablica 1. Alati koji otvaraju WebP datoteke [4]
Windows Mac Linux
File Viewer Plus
Google Chrome
Google Chrome
Google Chrome
Adobe Photoshop
with plug-in Opera
Adobe Photoshop with
plug-in Google Picasa
XnView
Google Picasa
Pixelmator 3
ImageMagick
Opera
XnView
IrfanView
ImageMagick
XnView
Opera
ImageMagick
WebP Codec for
Windows
8
5. Vizualna usporedba performansi WebP i ostalih formata
U prethodnim poglavljima navedene su brojne prednosti koje WebP format ima nad JPEG,
PNG pa čak i GIF formatom. Ovdje će se raditi o vizualnoj usporedbi performansi WebP i
ostalih formata. WebP algoritam sažimanja koncentrira se na područja na slici koja izgledaju
nekoherentno. Na slici 6 može se vidjeti kako je područje s valovima koji su pretežito plave
boje označeno kao jednostavnije od područja sa različitim nijansama plavo-bijele boje i
grubljom teksturom. U jednostavnijem području, veličina bloka će biti veća radi sličnosti većeg
broja susjednih piksela.
Slika 6. Primjer WebP kompresije za različite teksture na slici [8]
Slika 7 prikazuje slike dobivene WebP sažimanjem s gubitkom (50%, 80%) u odnosu na
originalnu JPEG fotografiju. WebP slika s gubitkom od 50% ljudskom oku veoma je slična
originalnoj JPEG fotografiji dok joj je veličina čak deset puta manja. Kod sažimanj s 80%
gubitka vidljivo je zamućenje pozadine i područja u donjem lijevom kutu, no ovo nije moguće
primijetiti na prvi pogled. Ovakva slika dvadeset je puta manja od originalne. Još jedan sličan
primjer prikazan je na slici 8. Obje slike sa slike 8 uvećane su dva puta i kvaliteta im je
smanjena na 10% (za JPEG i za WebP format). Razlike koje se mogu primijetiti su blaga
Slika 7. Usporedba WebP kompresije s gubitkom (50%, 80%) i originalne JPEG fotografije [11]
9
zamućenost WebP formata u odnosu na JPEG. Također, slika koja je u WebP formatu izgleda
zaglađeno.
Naposlijetku, na slici 9 prikazana je usporedba PNG i WebP formata. WebP sažimanje bez
gubitka daje sliku koja izgleda identično kao i originalna PNG slika, ali uz smanjenje veličine
slike skoro do dva puta. Sažimanje s gubitkom daje sliku koja je čak četiri puta manja od
originalne, no uvećavanjem slike i detaljnim proučavanjem može se uočiti kako je ovakva slika
malo zamućena uz rubove objekata koji se nalaze na njoj.
Slika 9. Usporedba PNG i WebP formata [9]
PNG
215.8 KB
WebP sažimanje bez gubitka
149.1 KB
WebP sažimanje s gubitkom
52.6 KB
Slika 8. Usporedba JPEG i WebP formata [10]
10
6. Zaključak
WebP format danas je jedan od najoptimalnijih formata za pohranjivanje slikovnih
datoteka. Primarno je namijenjen kao format za slike koje se nalaze na web stranicama iz
razloga što bi se na taj način znatno relativno povećala brzina internetske veze milijunima
korisnika diljem svijeta. U kvaliteti se može mjeriti sa slikama u originalnom formatu uz
dodatak da značajno smanjuje njihovu veličinu. Unatoč ovim prednostima, WebP format i dalje
nije široko rasprostranjen. Podržavaju ga Google Chrome i Opera pretraživači. Na Internet
Explorer i Safari pretraživačima nije podržan i trenutno se ne zna hoće li biti podržan u
budućnosti. Predviđa se povećanje popularnosti kada ga omogući Mozilla Firefox pretraživač.
Iz Mozille su izjavili da rade na tome.
11
Literatura
[1] WebP (2017). URL: https://en.wikipedia.org/wiki/WebP (2018-01-24)
[2] .WEBP FILE EXTENSION (2011). URL: http://dotwhat.net/file/extension/webp/10843
(2018-01-24)
[3] A new image format for the Web (2016). URL: https://developers.google.com/speed/webp/
(2018-01-24)
[4] .WEBP File Extension (2018). URL: https://fileinfo.com/extension/webp (2018-01-24)
[5] WebP Container Specification (2016). URL:
https://developers.google.com/speed/webp/docs/riff_container (2018-01-24)
[6] Compression Techniques (2016). URL:
https://developers.google.com/speed/webp/docs/compression (2018-01-24)
[7] Opera (web browser) (2018). URL: https://en.wikipedia.org/wiki/Opera_(web_browser)
(2018-01-24)
[8] WebP Gallery (2016). URL: https://developers.google.com/speed/webp/gallery1 (2018-
01-24)
[9] Lossless and Alpha Gallery (2017). URL:
https://developers.google.com/speed/webp/gallery2 (2018-01-24)
[10] James, A. (2015). Using WebP Image Format Today. URL:
https://www.smashingmagazine.com/2015/10/webp-images-and-performance/ (2018-01-24)
[11] Lossy vs Lossless Compression (2016). URL: https://optimus.keycdn.com/support/lossy-
vs-lossless/ (2018-01-24)