Lograr una consistencia de color entre JPEG y PNG en Internet Explorer por medio de GIMP

Además de los consabidos problemas con el canal alfa de los PNG-24, en Explorer existe otro inconveniente con este formato gráfico, incluso en 8 bits: la corrección de gamma. No obstante, GIMP ofrece una solución sencilla.

Estaba trabajando sobre un boceto para un proyecto, cuando llegó el momento de echar un vistazo a los resultados en IE. Todo correcto —es decir, los problemas de siempre—, salvo un pequeño detalle: en la barra superior de la página se apreciaba una diferencia de tono entre el fondo y una imagen superpuesta, incluso en la versión 8 de este navegador:

Arriba, la diferencia de tono entre el fondo y la imagen superpuesta [Explorer 8]

No estaba seguro, pero puesto que sólo afectaba a Explorer intuí que podía deberse a que la imagen de fondo era un PNG y la imagen superpuesta un JPEG; The Sad Story of PNG Gamma “Correction” de Henri Sivonen confirmó mis sospechas.

Podría simplemente haber empleado para el fondo un GIF, pero PNG tiene mejor compresión y además es un estándar del W3C, por lo que decidí buscar otra solución. Y la solución estaba en un editor de imágenes de código abierto llamado GIMP:

Una prueba, en Internet Explorer [el mismo resultado para las versiones 6, 7 y 8]

La captura podría ser un cuadro de Malevich, pero no, son tres imágenes superpuestas, dos PNG y un JPEG de referencia —en medio—. Para la prueba, exportamos el mismo original tres veces, en uno de los PNG sin incluir la información de gamma en las opciones de guardado:

La opción Guardar gamma no debe seleccionarse [GIMP 2.6.7]

Al superponer las tres imágenes, el primer PNG —sin información de gamma— tiene el mismo tono que el JPEG de referencia, mientras que el segundo —con gamma— se diferencia claramente.

Además, esta opción de guardado no sólo permite lograr una consistencia entre estos formatos de imagen, sino también entre el color de un PNG y el especificado en una CSS.

Para una segunda prueba, creamos la imagen de un simple cuadrado de color #990000. Al exportarla con y sin gamma, se aprecia diferencia al incluirla en un div con el mismo color de fondo: Explorer representa el PNG con gamma con un color #8E0000.

Otra prueba, en Internet Explorer [el mismo resultado para las versiones 6, 7 y 8]

En resumen, hasta que Explorer corrija la gamma de la misma manera que Firefox, Opera o Safari, ésta es la forma más segura de exportar un PNG.

Etiquetas: herramientas de desarrollo.

Esta entrada se publicó el 30 de Diciembre de 2009 a las 11:56, y se archivó en Diseño. Autor: Saúl González. Puede seguir los comentarios de esta entrada a través de RSS 2.0. Puede dejar un comentario o hacer un trackback desde su propio sitio.