Dizajn korisničkih sučelja na webu

Najčešće korišteni grafički formati

print smanji povećaj

Format JPEG

Nazvan po radnoj organizaciji koja ga je izdala - Joint Photographic Experts Group - JPEG (.jpg, .jpeg) vjerojatno je najzastupljeniji grafički format na webu. Sadržaj slike komprimira se uz gubitak kvalitete, ali uz mogućnost odabira stupnja kompresije. Veći stupanj kompresije rezultira manjom datotekom te uštedama u vremenu učitavanja i utrošenom prometu, ali i datotekom slabije kvalitete slike. Stoga, idealna datoteka formata JPEG je komprimirana do to razine da je pad u kvaliteti slike nezamjetan, a da je datoteka razumne veličine. Kompresija unutar formata JPEG izvršava se uz diskretnu kosinusnu transformaciju (DCT).

U tipičnim slučajevima moguće je ostvariti stupanj kompresije od 10:1 uz nezamjetan gubitak kvalitete slike.

Međutim, potrebno je definirati "tipičan slučaj". JPEG kompresija najbolje je iskoristiva nad fotografijama i slikama realističnih scena, gdje su promjene u tonu i boji slike glatke, a slika općenito raznolika i šarolika - jednom riječju kompleksna. Stoga, JPEG na webu treba koristiti većinom za prikaz kompleksnih sadržaja poput fotografija.

Prilikom spremanja datoteke u JPEG format potrebno je odrediti stupanj kompresije, najčešće pritom odabirući inverzan podatak - kvalitetu slike. Obzirom da kvaliteta slike komprimirana JPEG-om izravno ovisi o sadržaju (kompleksnosti) slike, prilikom spremanja datoteke preporučljivo je izvršiti niz testova odabirući razne stupnjeve kvalitete slike te međusobno uspoređivajući rezultate. Potrebno je odabrati onaj stupanj kvalitete slike na skali [1,100] na kojem je omjer kvalitete slike i veličine datoteke optimalan.

Za uporabu na webu, uz tipične primjere sadržaja slike (poput fotografija) preporučljivo je birati kvalitetu između 50 i 80. Ispod navedenog ranga rezultantne slike najčešće su neprihvatljive kvalitete, odnosno neprihvatljive veličine datoteke.

JPEG JPEG (.jpg, .jpeg)
prednosti nedostaci
  • odabir stupnja kompresije omogućuje fino podešavanje kvalitete slike u odnosu na veličinu datoteke
  • pogodan za izrazito kompleksne grafičke zapise poput fotografija
  • iznimno raširen i kompatibilan
  • ne podržava transparenciju piksela
  • artefakti primjetni već na nižim stupnjevima kompresije
činjenice
  • veličina datoteke ovisi o kompleksnosti njezinog sadržaja te stupnju kompresije
  • neprimjeren ukoliko je potrebno prikazati zapis u potpunosti vjeran originalu, stoga nije preporučljiv za grafičke elemente dizajna web-stranica
  • nasljednik formata (JPEG2000) još nije zaživio

Primjer

Slika Kvaliteta Veličina Komentar
JPEG 100 Q=100 83.261 B neprimjetni artefakti
JPEG 50 Q=50 15.138 B artefakti slabije primjetni
JPEG 25 Q=25 9.553 B odmah vidljivi artefakti
JPEG 10 Q=10 4.787 B izrazito vidljivi artefakti - blokovi DCT-a
JPEG 1 Q=1 1.523 B ekstreman gubitak detalja i boja, neprimjetni detalji

Zaključak

Osim već navedenih činjenica, valja spomenuti kako je JPEG jedini pogodan format za prikaz fotografija na webu. JPEG ne treba koristiti u elementima dizajna grafičkih sučelja na webu, kao što druge formate ne valja koristiti za prikaz fotografija i zahtjevnih grafičkih sadržaja.

Drugim riječima, JPEG ćemo koristiti na mjestima gdje nam kvaliteta slike nije presudna, a uz minimalne (nakon optimiranja i gotovo nezamjetne gubitke) u mogućnosti smo ostvariti višestruke uštede.

Reference

Preuzimanje

Sadržaj ovih web-stranica dostupan je i u offline inačicama:

» Adobe PDF / 23.6.2009.

» Microsoft Word / 23.6.2009.