Cum alegem corect formatul imaginii | JPEG, GIF, PNG

Ca și web designer lucrez foarte mult cu imagini pregatindu-le pentru afișarea lor pe paginile web.
Cu timpul, fiind obsedat de detalii am început să observ tot mai des diferențele dintre JPEG și PNG. Rar foloseam și formatul GIF.
Judecând după mărimea în MB am înțeles că există o diferență mare, dar nu știam care-i cauza propriu zisă.

În continuare am să vă prezint fiecare format în parte. Analizând la un nivel avansat algoritmii de compresie vom observa factorii care fac diferența.

JPEG

Acesta este probail cel mai cunoscut format de imagine.
Compresia (formatul) JPEG taie o imagine până în 8×8-pixel-blocks iar după acea performă o serie de acțiuni bazate pe matematică. Transformă fiecare pixel-block într-o listă de factori. Aceștia sunt folosiți în diferite ecuații care descriu block-urile în termeni de unde energetice.

În termeni tehnici algoritmii formatului JPEG traduc informațiile dintr-o imagine din domeniul spațial în domeniul frecvențelor.

Ce înseamnă asta mai pe înțelesul tuturor?
Înseamnă că formatul JPEG este foarte bun în comprimarea informațiilor, a imaginilor cu milioane de culori și nuanțe. Compresia JPEG atribuie un look mai mult sau mai puțin fotografic din cauza tranzitiilor între culori și a estompării (blur).

Pe de altă parte formatul JPEG nu este o alegere potrivită pentru imaginile create digital, cele cu margini foarte clare, cele cu texturi haotice / zgomotoase.
Nu recomand ca logo-ul siteului să fie încărcat ca JPEG, mai ales la o rezoluție foarte mică.

Pentru păstrarea calității într-o proporție mult mai mare va recomand următoarele formate superioare compresiei JPEG:

GIF

Acest format este unul destul de cunoscut mai ales pentru capacitatea lui de a stoca mai multe imagini consecutive care dau viață unei animații.

GIF-ul folosește un algoritm de compresie LZW care este mult mai simplu în comparație cu JPEG-ul. Algoritmii de tip LZW scanează informațiile care alcătuiesc imaginea și generează serii de coduri scurte pentru părțile care se repetă.

Ce înseamnă asta?
Înseamnă că formatul GIF este o alegere bună pentru păstrarea eficientă a imaginilor cu puține culori, elemnete repetitive, margini clare, fără umbre. Este o alegere potrivită pentru imaginile create digital cum ar fi un logo sau o iconiță-web.

Pe de altă parte formatul GIF pe lângă opțiunea de animație oferă și posibilitatea de a stoca imagini cu fundal transparent.

Un dezavantaj foarte mare al formatului GIF este limita de 256 culori. Astfel fotografiile făcute camera foto nu trebuie salvate șa și GIF după ce le edităm. Cât timp algoritmul compresiei se bazează pe repetarea codurilor scurte nu vom putea decât să renunțăm la GIF pentru fotografii.

De altfel cele 2 formate enumerate până acum (JPEG și GIF) formează o echipă puternică și de o dimensiune relativ mică pentru paginile web.

În continuare vom discuta despre formatul predominant care vine cu o serie de noutăți și beneficii:

PNG

Acesta este formatul meu preferat care domină cu un algoritm super-smart în ceea ce privește comprimarea informațiilor.

Cele mai importante detalii de care ar trebui să ținem cont:

• Alpha channel transparency: Permite comprimarea și salvarea elementelor grafice semi-transparente. De exemplu un logo cu opacitate setată la 50%.
• Fără limită de 256 culori: Permite comprimarea și salvarea imaginilor care se bazează pe gradient-uri, treceri ușoare de la o nuanța la altă.
• Compresie superioară: în afară de câteva cazuri de margini detaliate algoritmii formatului PNG permit salvarea imaginilor la o calitate foarte bună.

Următoarea imagine demonstrează calitatea transparenței Alpha channel:

De ce este comprimarea formatului PNG mai bună ca a GIF-ului ?

În primul rând algoritmii formatului PNG încerca să reducă valul de date care urmează să fie stocat prin pixelii deja cunoscuți astfel predictând pixelii încă anonimi. Asta se întâmplă prin intermediul a 5 strategii diferite de predicție.
Mai pe înțelesul tuturor algoritmii PNG-ului presupun că pixelul imediat următor este unul similar.
Ca concluzie a acestui proces putem spună că PNG-ul salvează informațiile ținând cont doar de diferențele dintre presupunerile proprii și valorile actuale.

În al doilea rând PNG-ul elimină repetiția permițând imaginii comparația proprie cu secvența de pixeli precedentă. Prin acest proces evităm salvarea datelor identice de mai multe ori folosind un algoritm numit LZ77.

În ultimul rând PNG-ul folosește un proces numit “Huffman Coding” pentru simplifica valorile rămase astfel generând coduri foarte simple, mici și scurte. (Formatul JPEG folosește de asemenea procesul Huffman ca ultimul pas.)

Având în vedere cele 3 tehnici enumerate la început (Alpha channel transparency, Fără limită de 256 culori, Compresie superioară) formatul PNG domină formatul GIF cu aceste beneficii.

Tot ceea ce trebuie să știm ar fi următoarele (simplificat):

-PNG-ul se va comporta mai rău decât un JPEG când vine vorba de fotografii
-PNG-ul se va comporta mai bine decât un GIF când vine vorba de orice tip de imagine neanimată

Concluzie?

În opinia mea este important să țin cont de sursa imaginii și de locul în care urmează să fie afișat, astfel dobândind rezultate de o calitate înaltă.

Sper că te-am ajutat să înțelegi cât mai bine diferențele dintre cele 3 formate de imagine și mulțumesc pentru timpul acordat! ^_^