Aproximación al problema del color: imagen vs CSS

Autor: Armonth | El domingo 07 de octubre del 2007 @ 20:15.

Traducción una entrada de a.css (originalmente en catalán) sobre los problemas relacionados al color con imágenes y CSS.

El original está en Aproximació al problema del color (imatge vs. CSS)

El problema

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.

Recursos relacionados

GammaSlamma (aplicación para Mac OS X para eliminar el gamma de un PNG).
Pngcrush (Optimizador de PNG para Linux, Unix y MS-DOS).

Nota: del pngcrush también hemos hablado por aquí en ¿Todavía usas imágenes PNG sin optimizar?.

Comentarios