PNG indexat pentru reducerea dimensiunii fisierelor pe web (folosind The GIMP)

Reducerea dimensiunii imaginilor este extrem de importanta pentru toti cei care folosesc web-ul: utilizatori, autori, servere, provideri. In continuare voi prezenta o metoda drastica de reducere a dimensiunii fisierelor de imagini in format PNG prin convertirea de la True Color la culori indexate.

Formatele de imagine folosite uzual pentru web sint:

JPEG - datorita compresiei cu pierderi (lossy) asigura dimensiuni foarte mici ale fisierului dar se preteaza numai la fotografii, nu este adecvat pentru desene (line art);
GIF - foloseste compresie fara pierderi (loseless) dar culori indexate, o plateta de maxim 256 culori cu posibilitatea unei culori transparente. In conditii similare (culori indexate) are o rata de compresie mai mica decit PNG, ceea ce lasa ca nisa de utilizare imagini animate simple;
PNG - este succesorul "de facto" al GIF, poate sa faca orice face acesta dar mai bine: suporta culori indexate dar si true color, suporta transparenta simpla sau transparenta alfa (alpha transparency) folosind copresie fara pierderi (loseless). Este adecvat pentru desene, in cazul fotografiilor are o rata de compresie mai slaba decit JPEG.

Nota: Internet Explorer nu a suportat transparenta alpha pentru PNG inainte de versiunea 7, dar niciodata nu a avut probleme cu imagini PNG cu culori indexate.

Imagini fara transparenta

Cel mai simplu si mai evident caz de utilizare al conversiei PNG de la true color la culori indexate este cel in care imagininea nu contine nici un fel de transparenta. In GIMP se foloseste Image > Mode > Indexed... si alege tipul de ditherizare (dithering), care va afecta felul in care arata rezultatul final dar si dimensiunea fisierului rezultat. Se mai poate micsora dimensiunea fisierului scazind numarul de culori din paleta.

Pentru imagini simple se evita dithering si se obtin fisiere mici, iar pentru imagini complexe, cu multe culori si gradienti, folosirea dithering asigura pastrarea cit mai fidela a imaginii initiale.

Iata rezultate ale compresiei cu diversi parametrii:

PNG original (true color)	PNG culori indexate (255), fara dithering	PNG culori indexate (255), cu dithering	GIF culori indexate (255), fara dithering	PNG culori indexate (127), fara dithering	PNG culori indexate (63), fara dithering	JPEG, factor de calitate 90

4,6 KB	3,1 KB	4,0 KB	3,7 KB	2,3 KB	1,7 KB	2,0 KB

Scaderea dimensiunii este dramatica pentru fiecare din optiuni, dar la PNG indexat cu 63 de culori si JPEG este si o scadere vizibila a calitatii imaginii. Ce folositi in practica depinde de imaginile pe care le aveti, intrucit ratele de compresie depind de continutul imaginii.

La exportul in format JPEG am folosit un factor de calitate 90:
jpeg

Diferenta de calitate este vizibila, dar pentru clarificare iata cum arata comparativ cu originalul la un zoom de 400%:
png

La imagini simple nu este nevoie de dithering, ba chiar nefolosirea acestuia este utila, rezultind in fisiere de dimensiune mult mai redusa, dar la imagini complexe, eventual continind fragmente fotografice (la care deja am spus ca PNG nu exceleaza), dithering creste in importanta:

PNG original (true color)	PNG culori indexate (255), fara dithering	PNG culori indexate (255), cu dithering	JPEG, factor de calitate 90

48,7 KB	15,3 KB	17,2 KB	10,7 KB

Pentru a intelege mai bine, examinam imaginile la zoom 200%:
poza

Imagini cu transparenta simpla

Vom considera un caz de PNG cu transparenta simpla, fara umbre, doar cu putin antialiasing, si anume acelasi buton ca mai sus dar cu colturile usor rotunjite:

PNG original (true color)	PNG culori indexate (255), fara dithering

5,2 KB	3,3 KB
Zoom 400%

Pentru ca nu e vorba decit despre niste colturi usor rotunjite, rezultatul nu este deranjant, se observa numai la zoom mare.

Crescind curbura, lipsa de antialiasing devine mai evidenta, ceea ce poate produce un rezultat nemultumitor, simpla indexare putind sa nu mai fie de ajuns:

PNG original (true color)	PNG culori indexate (255), fara dithering	PNG culori indexate (255), fara transparenta

6,0 KB	3,2 KB	3,3 KB

Imagini cu transparenta complexa

Pentru transparenta complexa vom considera nu numai imagini cu margini complicate care folosesc mult antialiasing, dar si imagini cu umbre, care folosesc transparenta partiala.

PNG original (true color)	PNG culori indexate (255), fara dithering	PNG culori indexate (255), cu dither pentru transparenta

16,1 KB	5,5 KB	5,7 KB

Indexarea reduce dimensiunea considerabil dar distruge umbra si face conturul foarte neplacut. Activarea optiunii de dithering pentru transparenta nu aduce nimic bun.

Daca insistam sa reducem dimensiunea prin idexare ramin doua solutii: fie renuntarea la transparenta si folosirea unei culori de fundal fixa (aceeasi cu restul paginii), fie folosirea unei umbre false: se pune o culoare de fundal, se lipesc cele doua layere pentru a transforma umbra intr-un gradient de la negru la culoarea de fundal, se converteste la culori indexate si apoi se face o selectie dupa culoarea de fundal care se inlocuieste cu transparenta:

PNG original (true color)	PNG culori indexate (255), fara transparenta	PNG culori indexate (255), cu falsa transparenta

16,1 KB	6,5 KB	6,0 KB

Dupa cum se vede, folosirea transparentei "false" functioneaza destul de bine si pentru fundaluri de culori apropiate, nu neaparat identice.

Folositi tehnicile descrise mai sus, reduceti pe cit posibil dimensiunile imaginilor folosite in paginile web, faceti cit mai scurt si mai placut timpul de descarcare al paginilor pentru utilizatori, miscorati pe cit posibil incarcarea serverelor!
Spor la treaba!

Actualizare: Acest tutorial a fost tradus si in limba engleza pentru Nicu's How-to.

Aceasta lucrare este licentiata sub Creative Commons Attribution-Share Alike 2.5 License.