Micaela 14 de Agosto de 2009 a las 12.19
   Imprimir artículo
elWebmaster.com

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


guiapng1Como 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):

scanline1


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:


scanline2

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:

scanline3

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:

gradient gradient24
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 Adjustments layer en la paleta de Capas y selecciona Posterizar:

posterize-example

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

original

original-posterized
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:

downside-posterize1

Imagen original

downside-posterize2

Imagen posterizada

Transparencia oscura:

Échale un vistazo a las siguientes imágenes:

dirty-tr-sample1 dirty-tr-sample2
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:

dirty-tr-sample1-2 dirty-tr-sample2-2

¿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)
dirty-qmask1 dirty-qmask22
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:dirty-qmask3
  • dirty-qmask4Deja 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 mask-icon1 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:

ex3_1 ex3_2
5 537 bytes 6 449 bytes

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

ex3_1_color ex3_2_color1

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):

ex3-mask1

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:

split-reference
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).
    split1 split2
    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: split3
  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.

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

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

split-reference split4_1
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.

save-for-web

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.

step1
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%:

step2
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”:

step2_noise

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).

step3

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 Screenshot 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í:

step4

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:

step5

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

step6

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

step7

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):

step8

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í:

step9

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

step10

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:
step11
256 colores, no difuminada, no-optimizada
42 KB

result
180 colores, optimizada
34 KB

Continúa con la Guía profesional para optimizar tus imágenes PNG - 2º parte »

Fuente: Smashing Magazine


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (7)

  1. othon fernandez dice:

    Lástima que tus imágenes no están desplegadas.

    probado con ff3.5 ie8 opera9.64

  2. Andres Valencia dice:

    Muy bueno y completo el artículo, muchas gracias, pero no cargan las imágenes

  3. Arturo V dice:

    Y las imágenes??????? Buuu buuu buuu

  4. carlos foco dice:

    Porfa, verifica las imágenes (screenshots) que no salen (error 403)
    el articulo es imposible de seguir sin las imágenes
    GRACIAS y felicitaciones por el sitio.

  5. Morton dice:

    Gracias a todos los que informaron:

    Les cuento que ya solucionamos el problema con las fotos de ambas partes de la guía.

    ¡Un saludo!

  6. harold cruz dice:

    que buen articulo, ya probaremos

  7. Cómo usar de manera eficiente sprites en CSS | Malagaonrails dice:

    [...] para mantener la calidad de la resultante. Puedes ver un excelente post de ésta técnica en éste enlace. No obstante, si no haces uso de transparencias ni degradados, o simplemente, tu sprite admite [...]

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión