Optimització de PNGs

Com dissenyadors de pàgines web em d’estar familiaritzats amb el format d’imatge PNG, la seva principal característica es la funció del canal alfa (transparències en els píxels). Però també em de tindre en compte aspectes com el pes de les imatges per accelerar el temps de descàrrega de les webs.
Normalment pensem que el no hi han moltes opcions d’optimització de les imatges Truecolor PNG (PNG-24 de Photoshop), i es veritat, no les tenim, però si existeixen algunes tècniques avançades que ens ajudaran a millorar el pes, sense destrossar els nostres PNG’s.

1. Posterització

Això és un mètode conegut de l’optimització d’imatge de truecolor. Busqueu la icona de capes d’Ajustaments en el paleta de Capes i escullir Posterize.
Escollir la quantitat possible més petita de Nivells (normalment 40 és prou) i salvar la imatge:

Original, 84 KB

Posterized, 53 KB

Així és com funciona: la posterització simplement redueix la quantitat de colors, convertint colors similars en un únic, crea així regions de posterizat. Això ajuda a realitzar un millor filtratge de scanline i aconseguir una millor compressió. La desavantatge d’aquest mètode és alternança de color, que és especialment visible si està intentant implementar l’imatge amb un fons d’HTML.

2. Transparència Bruta

Doneu un cop d’ull a les imatges següents:

74 KB

30 KB

Els dos s’han salvat amb Photoshop sense cap mena d’optimització. Fins i tot si feu una comparació de per píxel d’aquestes imatges, no notareu cap diferència. Però per què és la primera imatge 2,5 més gran que la segona?
La resposta es ben sencilla. La primera esta salvada com a imatge RGBA (els valors RGB + el canal Alfa), per tant tindrem els tres canals d’informació de color, més un adicional que es el que crea la transparència, l’Alfa. Amb aquest mitjá es poden amagar tots els píxels on l’alfa tingui un valor 0. Però aquestes dades de RGB encara existeixen i, a més, impedeixen al codificador de PNG a empaquetar i codificar el correctament les dades. Així, que hem de treure aquestes dades ocultes, omplint les zones on afecti l’alfa, d’un color sòlid, com per exemple negre i salvem la imatge.

3. Divisió per transparència

PNG-24, 62 KB

A vegades s’han de salvar imatges en PNG-24 “pesades” a causa dels pocs píxels semitransparents que hi contenen. Podem estalviar Kbs extra si dividim la imatge en dues parts, es a dir, una amb píxels sòlids, l’altre amb els semitransparents. Podem salvar píxels semitransparents en PNG-24, i píxels sòlids en PNG-8 o fins i tot JPEG.

PNG-8, 17 KB

PNG-24, 6 KB

I aquí tenim el resultat:

Abans 63 KB

Després 23 KB

Aquest mètode té un desavantatge obvi: té dues imatges en comptes d’un, que pot ser un inconvenient per utilitzar (per exemple, quan fent una web en CMS).

4. Escala de grisos

Photoshop no pot salvar en escala de grisos un PNG, així que hauriem d’utilitzar OptiPNG després de salvar imatges en blanc i negre.

PNG-24, 8167 bytes

PNG-24 (Escala de grisos d’OptiPNG), 6132 bytes

5. Menys Colors

Això és una alternativa al mètode de Posterització de colors. La Posterització pot canviar dramàticament els colors de la imatge, que és inacceptable si s’ha de barrejar la imatge amb el fons del lloc web. Aquest mètode ens dóna més control sobre color però es limita a 256 colors.

El mètode és bàsicament extreure dades d’imatge de la imatge semitransparent (treure transparència), convertir-lo en un color indexat i aplicar la màscara original.

6. Mès trucs d’optimització

1. Cada optimització ha de començar amb una anàlisi de l’imatge minuciosa. Esculliu la millor tècnica per aconseguir millors resultats a cada imatge.
2. Ser creatiu. Utilitzar aquestes tècniques com un punt de partida per crear els propis mètodes personalitzats d’optimització.
3. Molta gent pensa que PNG-8 sempre es millor que PNG-24 per a imatges amb pocs colors. Però no es aixi, en alguns casos, PNG-24 ens pot donar millors resultats:
   
   PNG-8, 833 bytes

   
   PNG-24, 369 bytes

4. Si estem utilitzant una versió més vella de Photoshop (previ CS3), podem trobar que les imatges de PNG, en l’editor d’imatge, semblin diferents en un Navegador Web. La causa d’aixó es la informació de gamma que es guarda a l’arxiu PNG. El podem treure d’una manera segura amb eines com TweakPNG (Windows només) o smush.it.
5. No utilitzeu el “Salvar Com” per salvar imatges PNG per al web, sino, el “Salvar per a Web”. Per defecte, Photoshop inclou una imatge de presentació com informació addicional a l’arxiu, fent unes quantes vegades més gran l’arxiu del que necessita ser.

Com a exemple final us deixo una demostració real de totes les técniques enumerades aquí, recopilades en un video:

Advanced PNG Optimization from Sergey Chikuyonok on Vimeo.