Navigare: ghiduri grafica | design web | demotivationale | jocuri | povesti | culinar | contact | home

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:
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.
dithering
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
buton buton buton buton buton buton buton
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 jpeg


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
poza poza poza poza
48,7 KB 15,3 KB 17,2 KB 10,7 KB
Pentru a intelege mai bine, examinam imaginile la zoom 200%:
poza poza 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
buton buton
5,2 KB 3,3 KB
Zoom 400%
buton buton
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
buton buton buton
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
fata fata fata
16,1 KB 5,5 KB 5,7 KB
fata fata fata
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
fata fata fata
16,1 KB 6,5 KB 6,0 KB
fata fata fata
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.

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

bau bau - © 2007 Bau Bau care a luat-o razna | De citit despre Ioana