:::: MENU ::::

IE8 muestra mal los colores de archivos PNG (y la solución)

0.00 avg. rating (0% score) - 0 votes

A veces, desarrollando una Web nos damos cuenta que en IE8, los colores de una imagen PNG no se ven igual que en otros navegadores. Esto es particularmente evidente cuando queremos hacer coincidir el fondo de una imagen PNG con el color sobre el que se muestra.


 

Que Microsoft no ha sido nunca igual que los demás, es algo ya muy conocido y hablado, pero a veces ni siquiera haciéndolo bien acierta.

Probablemente no mucha gente lo haya sufrido, pero para el que haya pasado por ello (con interés por solucionarlo), sabrá que es realmente frustrante cuando lo ves por primera vez, porque parece cosa de brujas y la solución no es evidente.

Como mejor se demuestra el problema es con un ejemplo:

Soy una tabla con color de fondo #CCCCCC
Colores con PNG explorer

Si estás utilizando Internet Explorer 8 para ver esta página, verás que aunque los dos colores son supuestamente iguales, se nota una pequeña diferencia. Si por el contrario estás viendo la página con Google Chrome o Firefox, verás que no hay diferencia.

Este problema suele resultar muy desconcertante para los desarrolladores que lo ven por primera vez. Veo su desesperación cuando después de largo rato experimentando, dicen algo así como: «no se que pasa, pero es que IE8 me cambia los colores… no hay forma de que este PNG se vea del mismo color que el fondo…».

Y no les falta razón, IE8 ha cambiado los colores. Si se hace una captura de pantalla, efectivamente, el color de la imagen PNG no será #CCCCCC, mientras que el de la tabla sí lo es.

¿Por qué IE8 modifica los colores de la imagen?

Más bien, en este caso y sin que sirva de precedente, deberíamos preguntarnos ¿por qué el resto de los navegadores no cambian los colores?.

El problema es que IE8 lee (y aplica) más información del archivo PNG que el resto de los navegadores. El concreto, la información ‘extra’ que IE8 interpreta y el resto no, es la corrección gamma.

¿Qué es la corrección Gamma?

La luz que emite la pantalla de un televisor o monitor de televisión debería ser directamente proporcional a la luz que incidió, durante el proceso de captación de la imagen, en el sensor CCD.

Teóricamente, la respuesta debería ser lineal, no obstante, se ha demostrado empíricamente que esta respuesta siempre es no lineal. La alinealidad del sistema se debe a que el perfil del haz de electrones tiene forma gaussiana, lo que limita la resolución vertical efectiva.

Para corregir la alinealidad del receptor de televisión se introduce artificialmente una distorsión opuesta que es la llamada corrección gamma.

¿Cómo solucionamos el problema?

La solución al problema es hacer que IE8 no interprete la información gamma almacenada en el archivo PNG (ya que hacer que el resto la interpreten no es posible).

Para ello, lo que tenemos que hacer, es eliminar la información gamma del archivo PNG.

Por desgracia, no existe una forma de hacer que Photoshop guarde los archivos PNG sin está información, así que tendremos que pasarnos a GIMP o utilizar una aplicación especializada, como por ejemplo TweekPNG.

A continuación tenéis el mismo ‘montaje’ de tabla más imagen sin la información Gamma.

Soy una tabla con color de fondo #CCCCCC
Colores PNG Internet Explorer Corregido

 




Hey! Qué opinas sobre el artículo?