Cuando se usa una imagen que tiene un color que tiene que ser igual a un color definido en CSS de tal forma que se “confundan” en algunos casos éste resultado no se puede conseguir en todos los navegadores.

El contexto

Como es un tema muy complejo lo explicaré brevemente. Quien quiera profundizar que lea los recursos relacionados.

La interpretación del color está sujeta a un perfil que interpretará el sistema operativo o la aplicación visualizadora. En el caso de una imagen el perfil puede estar incrustado (embedded) o marcado (tagged).

Concretamente en los navegadores y en JPG/PNG:

Sólo Safari interpreta el perfil incrustado de una imagen. El resto lo tratan como si no tuviera, usando sRGB.
Ningún navegador interpreta correctamente un perfil marcado.
Si la imagen no tiene perfil, todos los navegadores aplican sRGB excepto Safari.

El resultado es que ninguno lo hace bien .

Los PNG además tiene una variable más: la corrección de gamma. En teoría la corrección gamma debería ayudar a adecuarse al dispositivo de salida pero un mal uso (falta de calibración del color del dispositivo de salida) sumado a que actualmente los CSS no tienen corrección gamma y para rematar una implementación dudosa lo convierten en un problema.

Eliminando el gamma de los PNG en teoría el problema se simplifica y mejora la consistencia entre navegadores.

La solución

La solución pasa por:

Piensatelo dos veces antes de poner una imagen con un fondo que tenga que ser igual a un color de fondo puesto con CSS.
Vuelvetelo a pensar.
Usa un JPG con perfil sRGB si te sale a cuenta el aumento de tamaño que implica tenerlo.
Usa un PNG de 8 bits con color transparente. De esta forma puedes tener problemas si la imagen tiene degradados (por ejemplo antialasing ).
Usa un GIF.

Gracias a Oscar por la colaboración y la paciencia.

Autor: sigt.net
http://sigt.net/archivo/aproximacion-al-problema-del-color-imagen-vs-css.xhtml

Usuarios que han visto este tema también han visto...

- 10 errores comunes en CSS
- Estilizando formularios
- Separar HTML de CSS.
- Imágenes como hitos de las listas
- Obtener sombras con CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento