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)