Blogul agentiei web Blue Engineering
Blue Engineering International

PNG vs JPEG/JPG in web design

As vrea sa vorbesc un pic despre optimizare in web design. De cand cu vitezele mari de Internet si multitudinea de fisiere pe care le suporta acum web-ul, putini designeri mai acorda atentie optimizarii. Cerinta pe care o respecta majoritatea designerilor este 'sa se vada bine'.

 
Un asa zis 'designer' cu care m-am intalnit saptamana trecuta a devenit de-a dreptul ignorant: vorbea in numele clientului pe care il reprezenta: "Toate imaginile le exportati PNG, ca asa vrea clientul, adica cel care plateste". Am intrat cu el intro discutie interminabila, incercam sa il conving ca in web design se folosesc diverse tipuri de imagini, in functie de mai multi factori: dimensiuni, calitate de export, transparenta, culoare, animatie, gradiente, linii, browsere si multe alte lucruri.
 
Multi 'stiu', putini cunosc
 
In materie de imagini majoritatea browserelor suporta 3 tipuri: GIF, JPEG, PNG (cu restrictii). 
 
GIF (Graphics Interchange Format) - format de imagine bitmap care suporta 8 biti pe pixel (2^8 = 256 culori), culori alese din RGB 24 biti. Suporta animatie si cel mai important lucru care nu este prea cunoscut, formatul de imagine GIF a devenit asa de popular din cauza algoritmului de arhivare LZW pe care il foloseste - imaginea are dimensiuni reduse fata de celelalte tipuri de imagine de acelasi fel.  
 
JPEG/JPG (Joint Photographic Experts Group) - compresie folosita de mai multe tipuri de imagini. Este in general inteles ca un tip de imagine de compresie cu pierderi (lossy compression), arhiveaza in general 10:1. JPEG-ul insumeaza mai mlte profile de culoare (atat RGB cat si CMYK), cele mai comune sunt sRGB si Adobe RGB. 
 
PNG (Portable Network Graphic) - format de imagine bitmap fara pierderi de compresie. PNG-ul a fost creat ca sa inlocuiasca GIF-ul. PNG-ul suporta o paleta de 24 de biti de culoare RGB/RGBA: include imagini RGB si grayscale cu canalul Alpha (transparenta).  
 
Acum ca am facut o mica recapitulare legata de tipul imaginilor as vrea sa enumar cateva idei care ar duce la o adevarata 'optimizare'.
 
Ca sa raspund la intrebare... JPEG/JPG sau PNG? Raspuns: depinde.
 
1. Spuneam mai sus ca PNG-ul, dezvoltat relativ recent (1996) nu are suport din partea celui mai folosit browser din lume: Internet Explorer. Versiunile mai recente ale Internet Explorerului folosesc totusi acest tip de imagine, insa cu probleme, ducand la faptul ca GIF-ul este in continuare cel mai folosit format de imagine cu transparenta.
 
2. PNG-ul nu are pierdere de compresie, insa acest lucru se face in detrimentul unui lucru esential pe web: spatiul. Da, ocupa mai mult spatiu pe web. 
 
Designerii sunt pusi in fata urmatoarei dileme: o imagine fara pierdere a calitatii sau o imagine cu o calitate mai mica dar nedetectabila de ochiul uman si care ocupa mai putini kilobytes? Evident eu aleg a doua varianta. Tinand cont ca lucrez pe web si am formatul original fara pierderi pe hard disk la mine pe calculator. 
 
De fapt nu trebuie sa compar PNG-ul si JPG/JPEG-ul, ele reprezinta imagini ce concureaza doar pe o parte din segmentul de web. Diferenta majore intre ele ar fi transparenta admisa de PNG, palenta de culoare extinsa la CMYK de catre JPG/JPEG, compresia Jpeg larg folosita in toate domeniile in IT.
Dupa cum am vazut mai sus 'batalia' intre cele 2 formate de imagine nici macar nu are loc, fiecare tip de imagine isi are folosintele ei in web design (care au fost mentionate de mine doar la 10% in acest articol), PNG-ul are de rezolvat anumite lucruri legate de suport pe web, GIF-ul va fi in continuare tipul de fisier cel mai raspandit in animatii (SWF-ul este destul de putin folosit si cu foarte putin suport deocamdata), JPG-ul/JPEG-ul este si va fi tipul de imagine cel mai raspandit in compresiile fotografiilor.
 
 
P.S.: Daca salvezi o imagine la 0% compresie ca JPG/JPEG tot pierzi ca si calitate. Asa este algoritmul. Cu pierderi.


ALTE ARTICOLE