Guía profesional para optimizar tus imágenes PNG - 2º parte

Como diseñador web puede que ya estés familiarizado con el formato de imagen PNG que ofrece la propiedad de transparencia completa. Es un robusto y muy buen reemplazo del viejo formato GIF.

En esta segunda parte te contamos nuevas técnicas para ayudarte a optimizar tus imágenes PNG, surgidas de analizar el modo en que el formato PNG almacena la información que utiliza.

Nota: Estás leyendo la segunda parte de la guía. Aquí puedes consultar la primera parte »

Escala de grises

Photoshop no puede guardar PNGs en escalas de grises, por lo que tendrás que utilizar OptiPNG después de guardar imágenes en blanco y negro, de esta forma:

optipng -o5 bw-image.png

Las imágenes en escala de grises ocupan mucho menos espacio que las RGBs, debido a que cada píxel se describe sólo con un byte, no con tres:

PNG-24 (Photoshop → color verdadero), 8167 bytes

PNG-24 (Photoshop + OptiPNG → escala de grises), 6132 bytes

Programar el modo de color “escala de grises” (Imagen → Modo → Escala de Grises) para las imágenes antes de guardarlas en PNG es muy importante, en especial para las imágenes semi-transparentes.

Menos colores

Ésta es una alternativa al método de Posterización de reducir colores en una imagen, ya que esta corrección puede cambiar dramáticamente los colores de tu imagen, lo que resulta inaceptable si debes mezclar tu imagen en el fondo de tu sitio web. Este método te otorga más control sobre el color, pero se limita a 256 colores.

El método es básicamente extraer información de imagen de la imagen semi-transparente, convertirla a un color indexado y aplicar la máscara original. Reducir la cantidad de colores hará que el empaquetado de la información de imagen que realiza el compresor PNG sea más efectivo. Veamos cómo funciona:

1. Descarga la imagen original, ábrela en Photoshop y duplícala (Imagen → Duplicar).

63kb

2. Remueve la transparencia de la imagen duplicada (Filtros → Photo Wiz → Quitar Transparencia):

3. Programa el modo de la imagen a Color Indexado (Imagen → Modo → Color Indexado). En la nueva ventana de diálogo, ingresa las siguientes propiedades:

• Colores: 190,
• Tramado: Difuso,
• Cantidad: 80%.

4. Programa el modo de la imagen nuevamente a RGB y copia la capa de la imagen en el archivo original. Alinea la capa copiada con el referenciado y aplica su máscara. Ahora guárdalo como PNG-24:

51kb

Como pueden ver, estos sencillos pasos nos ahorraron 11 KB de la imagen original sin tener ningún efecto notable sobre la calidad de la imagen. Pero este método posee otra ventaja: utilizar OptiPNG en estas imágenes a menudo ahorra todavía más bytes. En lugar de convertir la imagen a modo Color Indexado, puedes guardarla para la Web y aplicar la máscara Influencia para ahorrar más bytes.

Noten que este método no es el mismo que PNG-8 con transparencia de paleta en Fireworks. En la mayoría de los casos “menos colores” nos brindará más de 256 colors, por lo que tendremos que guardar la imagen en PNG-24, no PNG-8. Recuerden, rojo sólido y 50%-rojo transparentado son dos colores diferentes.

Reduciendo el detalle

Esta técnica es útil para optimizar sombras, brillos, reflejos, etc. La idea es reducir el detalle en ciertas áreas de la imagen que son poco visibles. Cada pixel de una imagen de color verdadero con transparencia es descripta por medio de cuatro bytes: RGBA. El último controla la transparencia del píxel. Para aquellos píxeles cuyo valor Alpha es demasiado bajo, puedes reemplazar la información RGB para mejor compresión de imagen. Intentemoslo:

1. Abre nuevamente en Photoshop la imagen descargada:

63kb

2. Como pueden ver, la radio posee un reflejo debajo, lo que la vuelve una buena candidata para optimización. Ctrl + click o ⌘ + click en el thumbnail de la imagen en la paleta de Capas para crear una selección. Dirígete a la paleta Canales y crea un canal nuevo en base a la selección:

3. Debemos localizar sólo aquellos píxeles que son apenas visibles. Invierte el canal (Imagen → Ajustes → Invertir) y abre el menú Umbral (Imagen → Ajustes → Umbral). Con colocar el Nivel de Umbral a 170 es suficiente:

4. Tenemos la máscara que incluye sólo los píxeles apenas visibles. Haz Ctrl + click o ⌘ + click en el canal en la paleta para crear una selección. Volvemos a la paleta Capas, seleccionamos la capa de la imagen y abrimos Filtro → Ruido → Mediana. Este filtro suavizará píxeles en la selección, haciéndolos más conductivos a la compresión. Programa el valor del radio a 5:

Ahora guardamos esta imagen “para la Web” en PNG-24 y veremos como su tamaño se ha reducido de 63 KB a 59 KB. Puedes variar el nivel de umbral y la media del radio para comprimir todavía más o para preservar más detalles.

Más consejos para la utilización y optimización PNG

1. Cada optimización debe comenzar con un análisis cuidadoso de las imágenes. Selecciona la mejor técnica para cada archivo o combina algunas de ellas para lograr mejores resultados.

2. Se creativo. Utiliza estas técnicas como punto de partida para lograr tus propios métodos de personalización de imágenes.

3. Muchas personas consideran que PNG-8 es siempre mejor que PNG-24 para las imágenes de colores bajos. Pero no es así. En algunos casos, PNG-24 puede que te de mejores resultados:

PNG-8, 833 bytes

PNG-24, 369 bytes

En este ejemplo, con PNG-8: 3 bytes fueron utilizados para describir los píxeles en la paleta de color y 1 byte para describir el color del píxel de la corriente de información de la imagen, mientras que PNG-24 necesitó sólo 3 bytes para cada pixel. Por lo que si estás guardando las imagenes de menos color en PNG sin transparencia, prueba a ver si PNG-8 o PNG-24 te brinda un archivo más pequeño.

4. Si estás utilizando una versión antigua de Photoshop (anterior a CS3), puede que veas que las imágenes PNG en el editor lucen diferente de las que se encuentran en el navegador. Esto se debe a que el bloque Gama se guarda en el archivo PNG, que controla la gama de la imagen. Puedes removerlo de forma segura con herramientas tales como TweakPNG (sólo para Windows) o smush.it.

5. Un tipo “especial” de imagen PNG te permite guardar una imagen semi-transparente como un PNG-8 de color indexado. Este tipo de imágenes no está disponible para Photoshop (lo posee Fireworks), pero puedes preparar la imagen en Photoshop y luego convertirla con OptiPNG.

OptiPNG convertirá imágenes de color verdadero a paletas de 8-bit por defecto si tu imagen contiene menos de 256 colores. Para lograr esto, puedes aplicar las técnicas “Menos Colores” y “Baja de detalles” y “adivinar” el número de colores. Pero puede que consuma mucho tiempo. Existe una herramienta llamada PNGNQ que puede convertir imágenes truecolor a paletas de 256 colores, pero no tendrás el control suficiente sobre la imagen resultante.

Deberás reducir el total de colores diferentes, inclyendo los semi-transparentes, a 256 o menos. Este formato es “especial” por como se muestra en IE6.

IE6

Otros navegadores

Como puedes ver, IE6 muestra sólo los píxeles opacos. Lo bueno es que puedes incluir estas imágenes con la etiqueta <img> o como imágenes de fondo, haciendo un degradado con gracia.

6. No utilices el diálogo “Guardar como” para salvar imágenes PNG para la Web, utiliza el diálogo “Guardar para la Web” en su lugar. Por defecto, Photoshop guarda una previsualización de la imagen junto con el archivo, haciendo que éste sea más pesado de lo que debería.

Fuente: Smashing Magazine