Guía profesional para optimizar tus imágenes PNG - 1º 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 nota te contamos algunas técnicas que pueden ayudarte a optimizar tus imágenes PNG, surgidas de analizar el modo en que este formato almacena la información que utiliza.

Un poco de historia

Cada formato gráfico posee sus propias ventajas y desventajas, conocerlas te permitirá modificar la imagen original para mejor calidad visual y compresión. Este es un concepto clave detrás de la optimización profesional de imágenes.

PNG fue desarrollado como un reemplazo open-source del formato GIF. Ambos poseen algunas características en común, pero PNG es mucho mejor que GIF en todos los aspectos. Introdujo algunas propiedades geniales para el packing de imágenes y la compresión, pero para nostotros -los desarrolladores y diseñadores web- la más importante es el filtro scanline.

Filtro Scanline

Así funciona. Por ejemplo, tenemos una imagen de 5×5 pixeles con gradiente horizontal. Aquí hay una vista esquemática de esta imagen (cada número representa un color único):

Como puedes ver, todos los colores idénticos están desplegados de forma vertical, no horizontal. Tales imágenes tendrían un radio de compresión bastante pobre en GIF, porque compresiona los colores que se despliegan horizontalmente. Veamos como la información de esta imagen se puede empaquetar por medio del filtro scanline:

El número 2 antes de cada línea representa el filtro aplicado, que en este caso es “up”. El filtro “Up” manda el mensaje al decodificador PNG: “Por lo que el pixel actual toma el valor del pixel de arriba y lo añade al valor actual”. Tenemos cero de valor para las líneas 2-5 porque todos los píxeles en cada línea vertical poseen el mismo color. Y tal información sería mejor comprimida si la imagen fuera relativamente grande. Por ejemplo, 15 píxeles de valor 0 pueden ser escritos como 0(15) y esto es mucho más corto que quince o- así es como funciona por lo general la compresión.

En este caso de prueba el filtro “Sub” (número 1 antes de cada línea) daría resultados mucho mejores:

El filtro “Sub” manda el mensaje al decodificador: “Toma el valor del píxel izquierdo y añádelo al valor actual”. En este caso, es 1. Como puede que ya hayan adivinado, esta información será comprimida de forma efectiva.

El filtrado Scanline es importante para nosotros porque podemos usarlo: en particular, podemos hacer un poco de manipulación en el filtro para hacerlo mejor. Existen 5 filtros: None (sin filtro), Sub (resta el valor del pixel izquierdo al valor actual), Up (resta el valor del pixel de arriba), Average (resta el promedio de los pixeles izquierdo y superior) y Paeth (sustituye el valor del pixel superior, izquierdo o superior izquierdo, llamado así por Alan Paeth).

Y así es como estos filtros afectan el tamaño de la imagen en comparación con GIF:

GIF, 2568 bytes	PNG, 372 bytes

Como pueden ver, la imagen GIF es 7 veces mayor que la misma imagen PNG.

Tipo de Imagen

Otra cosa importante a saber del PNG es el tipo de imagen, la meta-información que está almacenada dentro del archivo. Como usuario de Photoshop, debes estar familiarizado con PNG-8 (imagen indexada) y PNG-24 (color verdadero). Como usuario de Fireworks, puede que conozcas PNG-32 (color verdadero con transparencia), el cual es bastante confuso, dado que Photoshop’s PNG-24 también puede almacenar color verdadero con transparencia. Para nuestra conveniencia utilizaremos las convenciones de nombres de Photoshop para los tipos de imágenes en este artículo.

Existen 5 tipos de imágenes disponibles en PNG: Escala de Grises, Color Verdadero, Color Indexaco, Escala de Grises con alpha y Color Verdadero con alpha. También hay dos subtipos del tipo color indexado (no-oficial, también): transparencia bit (cada pixel puede ser completamente transparente o completamente opaco) y transparencia de paleta (cada pixel puede ser semi-transparente). En el segundo caso cada color es almacenado en la paleta con su valor alpha. Dado que rojo opaco y rojo 50% transparente son dos colores diferentes, ocupan dos celdas dentro de la paleta.

Lo peor es que Photoshop puede guardar PNG con sólo 3 de estos tipos: Color indexado con transparencia bit, Color Verdadero y Color Verdadero con transparencia. Por eso puede que muchas veces escuchen que Adobe Fireworks es la mejor herramienta para optimización PNG.

Aquí es dónde utilidades tales como OptiPNG o pngcrush resultan útiles. Esencialmente, estas herramientas:

1. Seleccionan el mejor tipo de imagen para una imagen (por ejemplo, color verdadero puede ser convertido en color indexadosi no hay demasiados colores en la imagen).
2. Escojen los mejores filtros delta.
3. Escojen la mejor estrategia de compresión, y reduce la profundidad del color.

Todas estas operaciones no afectan para nada la calidad de la imagen, por lo que es muy recomendable usar estas heramientas cada vez que guarden una imagen PNG.

¡Ahora pasemos a la magia!

Posterización

Este es un método bien conocido para la optimización de imágenes de color verdadero. Abre la imagen de ejemplo en Photoshop, presiona el ícono en la paleta de Capas y selecciona Posterizar:

Escoge la cantidad menor de niveles posibles (usualmente 40 es suficiente) y guarda la imagen:

Original, 84 KB	Posterizada, 53 KB

Así funciona: la posterización simplemente reduce la cantidad de colores, convirtiendo los colores similares en uno solo, mediante la creación de regiones posterizadas. Esto ayuda a llevar a cabo una mejor compresión. Lo malo de este método es la alternación de color, la cual es especialmente visible si estás tratando de unir la imagen a un fondo HTML:

Imagen original

Imagen posterizada

Transparencia oscura:

Échale un vistazo a las siguientes imágenes:

75 KB	30 KB

Ambas fueron guardadas en Photoshop sin ninguna optimización. Incluso si realizas una comparación pixel por pixel de estas imágenes, no notarás la diferencia. Pero ¿por qué la primer imagen es 2.5x más grande que la segunda?

Necesitan un plugin Photoshop especial para ver los detalles ocultos. Éste se llama Remove Transparency y está disponible para su descarga gratuita en PhotoFreebies plugin suite. Antes de seguir, deberás instalarlo.

Abre ambas imágenes del ejemplo de arriba y selecciona Filtro -> Photo Wiz > Remove Transparency. Ahora puedes ver la información de pixel que fue guardada en la imagen:

¿Qué está pasando? ¿Cómo es posible revelar la información de la imagen original en base a una imagen PNG de una sola capa? Bueno, es bastante simple. Cada pixel en la imagen color verdadero con alpha es descripto por cuatro bytes: RGBA. El último es Alpha, el cual controla la transparencia del pixel: el valor de 0 significa un pixel completamente transparente y 255 completamente opaco.Y esto quiere decir que cada pixel(con cualquier valor RGB) puede ser ocultado con sólo programar el byte Alpha en 0.

Pero esta información RGB todavía existe, y previene que el codificador PNG empaquete de forma efectiva y codifique la corriente de información. Así, tenemos que remover esta información oculta (rellenarla con negro solido, por ejemplo) antes de guardar la imagen. Aquí hay un rápido método para lograr esto:

1. Abre la primer imagen del ejemplo anterior en Photoshop.
2. Ctrl+clic (o +click en Mac) en el thumbnail de la imagen en el menú Capas para crear una selección, luego inviértela: Select -> Inverse (Ver imagen 1).
3. Cambia al modo Máscara Rápida presionando la tecla Q (Ver imagen 2)

Imagen 1	Imagen 2

Hemos creado una máscara para una imagen semi-transparente, pero necesitamos dejar los píxeles sólo completamente transparentes.

• Selecciona Imagen -> Ajustes -> Umbral y mueve el deslizador Nivel de Umbral a la derecha, así dejaremos los píxeles completamente transparentes de la selección:

• Deja el modo Máscara Rápida (presiona Q nuevamente) y rellena la selección con negro (Ver imagen a la derecha).

• Invierte la selección de nuevo (Selección -> Invertir) y haz clic en el ícono en el menú Capas para añadir la máscara.

Eso es todo, ahora puedes guardar esta imagen en PNG-24 y asegurarte que la imagen de 75 KB ahora sea de 30 KB. Ya que estamos, todos los pasos pueden ser grabados fácilmente en Photoshop’s Action (Haz clic aquí para descargar la extensión Dirty Transparency Photoshop Action) y reutilizados luego con un simple atajo de telcado.

Puede que pienses acerca de “Dirty Transparency” como si fuera un bug en los editores de imágenes: Si aquellas regiones de las imágenes no se pueden ver y ocupan demasiado espacio ¿Por qué no removerlas automáticamente antes de guardarla? Bueno, este “bug” puede ser convertido sencillamente en una “propiedad”. Mira la imagen a continuación:

5 537 bytes	6 449 bytes

Si remueves la transparencia de estas imágenes, podrás ver lo siguiente:

Más allá del hecho de que la primer imagen contiene información de imagen más compleja, es 1Kb más liviana que la segunda, la cual fue optimizada como se describió anteriormente. La explicación de este comportamiento “anormal” es simple: la corriente de información de la imagen en el primer ejemplo fue ejectivamente empaquetada por los filtros delta, los cuales funcionan mejor en transiciones de color suaves (como gradientes).

La solución final para preservar la información original de la imagen es crear una máscara en la capa de imagen de Photoshop (volveremos sobre esto después):

Como pueden ver, Dirty transparency es una técnica bastante poderosa pero a la vez delicada. Necesitas saber cómo y por qué funciona antes de utilizarla. Si estás guardando una imagen PNG-24 con áreas transparentes, lo primero que debes hacer es comprobar la información de imagen en estas áreas y realizar las decisiones correctas sobre si borrarlas o dejarlas como están.

Partir por transparencia

Algunas veces es necesario guardar imágenes en el “pesado” PNG-24 por un par de píxeles semi-transparentes. Puedes ahorrar Kbs extras si divides estas imágenes en dos partes- una con los píxeles sólidos, otra con los semi-transparentes- y los guardas en los formatos gráficos apropiados. Por ejemplo, puedes guardar los píxeles semi-transparentes en PNG-24, y los sólidos en PNG-8 o incluso JPEG. Aquí hay una versión rápida (que puede ser grabada para Acciones) para lograr esto:

PNG-24, 62 KB

A continuación, el procedimiento:

1. Ctrl+click/+click en el thumbnail de la imagen en la paleta Capas para crear una selección (Ver imagen 1).
2. Ve a la paleta Canales y crea un nuevo canal de selección (Ver imagen 2).
   

   Imagen 1	Imagen 2

3. Remueve la selección (Ctrl+D or +D), selecciona el canal recién creado y haz Umbral (Imagen » Ajustes » Umbral). Mueve el deslizador a la derecha: 
4. Hemos creado una máscara para seleccionar los píxeles sólidos muertos. Ahora debemos dividir la capa original con esta máscara. Ctrl+click/+click en el canal Alpha 1, vamos a la paleta Capas, seleccionamos la capa original y hacemos andar Capa » Nuevo » Capa via Corte. Como resultado, tendremos dos layers con los píxeles sólidos y semi-transparentes separados.:

Hemos creado una máscara para seleccionar los píxeles sólidos muertos. Ahora debemos dividir el layer original con esta máscara. Ctrl+click/+click en el canal Alpha 1, vamos a la paleta Capas, seleccionamos la capa original y hacemos andar Capa » Nueva » Capa via Cortar. Como resultado, tendremos dos capas con los píxeles sólidos y semi-transparentes separados.

Ahora necesitas guardar esas dos imágenes en dos archivos diferentes: los píxeles sólidos en PNG-8, y los semi-transparentes en PNG-24. Puedes aplicar la técnicas de Posterización en la capa de los píxeles semi-transparentes para hacer el archivo de imagen todavía más pequeño.

PNG-8 128 colores + difuminado 17 KB	PNG-24 posterización 35 6 KB

Y aquí está el resultado para comparación:

Antes 63 KB	Después 23 KB

Este método posee una desventaja obvia: obtienes dos imágenes en lugar de una, por lo que puede no ser tan conveniente su uso.

Máscaras de influencia

En verdad, esta no es una técnica de optimización PNG específica, sino más bien una demostración de las raramente usadas propiedades “Guardar para Web”: Las máscaras de influencia de reducción de color y la máscara de influencia de difuminado.

Desafortunadamente, estas propiedades fueron removidas en Photoshop CS4.

Para entender cómo funcionan las máscaras de influencia, abramos esta imagen de demostración en PS y guardémosla para Web en PNG-8 con las siguientes propiedades: Reducción de color: Adaptable; Tramado: Sin Tramado; Colores: 256.

42 KB

Lo primero que noté de esta imagen es un péndulo bastante difuso. Es un punto bastante brillante en la imagen y llama mucho la atención. Tratemos de suavizar los colores de transición del péndulo programando el difuminado al 100%:

46 KB

El péndulo luce mejor ahora, pero ahora tenemos otros problemas: el aumento del tamaño de la imagen en 4 KB y el fondo de color sólido se volvieron algo “ruidosos”:

Podemos intentar deshacernos de este “ruido” bajando el valor del difuminado, pero la calidad de la imagen también disminuirá.

Basado en estos problemas, tratemos de hacer lo imposible: aumentemos la calidad de la imagen bajando el número de colores y el tamaño de la imagen. La máscara de influencia nos ayudará.

Comencemos con el color. Vayamos a la paleta Canales, creemos un nuevo canal y llamémoslo color. Ya hemos determinado que el péndulo es nuestra región de máxima prioridad para mejorar la calidad de la imagen, por lo que necesitamos dibujar un círculo blanco justo en este lugar (puedes habilitar el canal RGB para mayor precisión).

Vé a “Guardar para la Web” y programa las siguientes propiedades: Reducción de Color: Adaptable, Tramado: No, Colores: 128 (como pueden ver, reducimos el número de colores de 256 a 128). Ahora debemos seleccionar una máscara de influencia: Hacemos clic en el ícono cerca de la lista de Reducción de Color y seleccionamos el canal Color de la lista que se desplega: Ahora nuestra imagen luce así:

Puedes ver la máscara de influencia en acción: el péndulo luce perfecto, pero otras partes de la imagen lucen realmente mal. Al programar máscaras de influencia, le decimos a Photoshop: “Mira, el péndulo es una parte muy importante de la imagen por lo que necesitamos preservar la mayor cantidad posible de colores en esta área”. Las máscaras de influencia funcionan exactamente igual que las comúnes máscaras de transparencia: el color blanco significa mayor prioridad en la región correspondiente de la imagen, el color negro quiere decir menor prioridad. Todos los grises intermedios afectan la imagen de forma proporcional.

El péndulo ahora tiene la mayor prioridad de color, por lo que debemos bajar la intensidad del círculo blanco para dejar más color para otras áreas. Cierra el diálogo “Guardar para la Web”, ve a la paleta Canales, selecciona el canal color y abre el diálogo “Niveles” (Imagen » Ajustes » Niveles). Programa el máximo nivel de resultado en 50 para bajar la intensidad del color blanco:

Intenta “Guardar para la Web” nuevamente con las mismas propiedades:

Ahora luce mejor, pero tenemos problemas en otras áreas de la imagen:

Creo que ya entienden cómo funcionan las máscaras de influencia: le damos algunas pistas a Photoshop sobre áreas importantes de la imagen con diferentes sombras de gris. A prueba y error, obtuve la siguiente máscara de color (pueden copiarla y aplicarla en la imagen):

La máscara de influencia de difuminado funciona exactamente de la misma forma, pero en lugar de colores, afecta la cantidad de difuminado de diferentes áreas de la imagen. Colores más livianos quiere decir más difuminado. Ésta es una propiedad bastante útil, dado que el difuminado crea patrones de píxeles irregulares que obstaculiza al compresor PNG para el uso de filtros deltas. Puedes determinar las áreas exactas en las que debe ser aplicado el difuminado mientras dejas otras áreas intactas, así se gana mejor compresión de la información de la imagen.

Mi canal de difuminado luce así:

Aplicando tanto los canales de influencia de color y difuminado con las mismas opciones de optimización (Adaptable, 128 colores):

Bastante bien para 128 colores, ¿O no? Hagamos algunos retoques finales: programemos los colores a 180 y el difuminado máximo a 80%. Y éste es nuestro resultado final, comparado a la versión original, no-optimizada:

256 colores, no difuminada, no-optimizada
42 KB

180 colores, optimizada
34 KB
Continúa con la Guía profesional para optimizar tus imágenes PNG - 2º parte »

Fuente: Smashing Magazine