Kompresiranje slika

Pravilno korištenje kompresiranja slika može uvelike smanjiti veličinu slikovnih datoteka na Vašoj stranici. No kompresija je često zapostavljena ili krivo urađena, ponajviše jer ljudi često ne razumiju koja kompresija je najbolja za određene stvari. Ukoliko ne razumijete koji tip kompresije se koristi za određenu svrhu vrlo vjerojatno ćete završiti s jednim od ova dva rezultata: ili slika ne izgleda dobro ili je mnogo veća nego što bi trebala biti.

U nastavku ovog posta ću Vam probati predočiti sve što bi trebali znati o kompresiji slika u web dizajnu. U početku ću objasniti razlike između “lossless” i “lossy” kompresije, zatim o različitim vrstama datoteka i o njihovim tehnikama kompresiranja te pružiti upute koje vrste datoteka bi bile najbolje za određene vrste slike.

1. LOSSLESS VS LOSSY KOMPRESIRANJA

Mnogi ljudi misle da bi trebali koristiti samo formate slika koje koriste “lossless” način kompresije, odnosno kompresiju bez gubitaka. Iako je za mnogo vrsta slika lossless najbolji izbor, ipak ne znači da je za sve. Uglavnom nakon lossless kompresije su svi prvotni podaci slike sačuvani i nakon kompresiranja, dok lossy kompresiranje ipak ne sačuva sve podatke iz orginalne datoteke i sprema slike u datoteke kojima je smanjena veličina i na dizajnerima je da odluče za koliko će se smanjiti veličina datoteke.

LOSSLESS KOMPRESIRANJE

Postoji nekoliko različitih metoda lossless kompresiranja. Postoji run-length encoding (koristi se za BMP datoteke), uzima podatke uzastopnih elemenata koji imaju identične vrijednosti i pohranjuje ih u jednu vrijednost podataka. To je najbolje za jednostavne slike gdje postoje duge staze identičnih podataka.

DEFLATE je isto jedna od metoda lossless kompresiranja i koristi se kod PNG datoteka. Deflate koristi kombinaciju LZ77 algoritma i Hufmanovog kodiranja. Osim što se koristi za PNG slike ova metoda se koristi i kod ZIP i GZIP kompresiranja.

Lempel-Ziv-Welch (LZW) lossless kompresiranje se koristi kod GIF i TIFF datoteka. Bazira se na algoritmu koji izvodi ograničene analize podataka.

LOSSY KOMPRESIRANJE

Postoji mnogo načina za lossy kompresiranje i čak se mogu koristiti u kombinaciji s lossless kompresiranjem da datoteke budu još manje. Jedna od metoda je smanjenje prostora boja na najčešću boju na slici i najčešće se koristi kod PNG i GIF datoteka i kao rezultat nam daje smanjenu veličinu datoteke. Ukoliko se koristi kod određenih vrsta slika ovo kompresiranje može uvelike smanjiti veličinu slikovne datoteke, a kompresirana slika će izgledati identično kao i orginalna slika.

Transform encoding je način kodiranja koji se koristi kod JPEG datoteka. U slikama se koristi diskretna kosinusna transformacija da bi se kodirao prosjek boje u malim blokovima. Kompresirana slika ima mnogo manje različitih boja od orginalne.

Chroma subsampling je drugi način lossy kompresiranja koji se bazira na tome da ljudsko oko više percipira promjene svjetline nego promjenu boje. Ipspušta određene informacije boje, a da pritom ne smanjuje svjetlinu. Najčešće se koristi kod videa i kod JPEG slikovnih datoteka.

2. RAZLIČITE VRSTE DATOTEKA

Iako postoji mnogo vrsta slikovnih datoteka, najčešće se koriste PNG, GIF i JPEG, ostale vrste datoteka kao što su TIFF, PCX, TGA, itd. rijetko ćete sresti u web dizajnu tako da ću samo prve 3 vrste detaljnije objasniti.

GIF

GIF je kratica od Graphics Interchange Format i to je bitmap vrsta datoteke koja se počinje koristiti 1987 od strane tvrtke CompuServe. Podržava do 8 bitova po pixelu, što znači da slika može imati do 256 RGB različitih boja. Jedna od najvećih prednosti GIF-a je da omogućava animiranje slika što PNG i JPEG ne omogućavaju.

JPEG

JPEG (Joint Photographic Experts Group) je format slike koji koristi lossy kompresiranje za stvaranje manje datoteke. Jedna od većih prednosti JPEG-a je da omogućava dizajneru da odredi kolika će biti kompresija i ukoliko se koristi pravilno to rezultira smanjenjem veličine datoteke dok kvaliteta slike ostaje jednaka. Budući da JPEG korsti lossy kompresiju slike spremljene u ovom formatu su sklone “artifactingu” gdje se mogu vidjeti pixeli i čudne aureole na pojedinim djelovima slike i to najčešće na dijelovima slike gdje postoji oštar kontrast između boja.

PNG

PNG (Portable Network Graphics) je isto bitmap format koji koristi lossless kompresiranje i stvoren je da zamjeni GIF format. Dugo je bio bez podrške od strane Internet Explorera. PNG podržava 24 bitni RGB ili 32 bitni RGBA te grayscale prostor boja. Najveća prednost mu je što podržava transparenciju.

3. ODGOVARAJUĆI FORMATI SLIKA

Svaki od ovih formata slika je prikladan za određene vrste slika. Odabir odgovarajućeg formata donosi mnogo manju veličinu datoteke uz odgovarajuću kvalitetu slike, dok ukoliko odaberemo pogrešan format slika je mnogo veća nego li bi trebala biti.

Za jednostavne grafike poput loga i crteža, GIF je često najbolja opcija. Zbog ograničene palete boja  GIF nije dobra opcija za grafike s gradijentima jer u većini slučajeva ispadnu “posterizirane” iako se i to može reducirati u određenoj mjeri koristeći dither.

Za slike ili fotografije s gradijentima gdje je GIF neprimjeren, najbolja opcija je JPEG. Prilagodbom kompresije možemo uvelike smanjiti datoteku i pritom ne izgubiti kvalitetu slike.

Za slike s velikim kontrastom, a posebno za fotografije s velikim kontrastom koristi se PNG format. PNG je najbolji i za transparentne slike, osobito za slike kojima je potreba djelomična transparentnost. Često su veće od JPEG-a ali je kvaliteta nepromjenjena.

UKRATKO:

GIF

• ukoliko je potreba animacija
• crteži ili jednostavna grafika

JPEG

• fotografije, pogotovo one bez velikih kontrasta
• slike iz filmova, igara ili slično

PNG

• ilustracije
• fotografije s velikim kontrastom
• transparentne slike