Aproximación al problema del color: imagen vs CSS
Publicado el Domingo 07 de Octubre del 2007 @ 20:15 por Armonth.
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
- The Sad Story of PNG Gamma “Correction”.
- Digital-Image Color Spaces (pruebas de los perfiles en diferentes situaciones).
- This is your Mac on drugs.
- ColorSync in Mozilla.
- Gamma correction (CSS3 Color Module).
- Windows Vista with improved color management.
- 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?.
Un comentario (feed)
-
Sergio nos comenta:
he tenido ese mismo problema en Flash, y discutiendo con uno de mis jefes en ese entonces, me decia que los colores son iguales, incluso de manera matematica.
Pero lo real es que los colores se pueden confundir y mezclar, el ruido y una pantalla con problemas electroestaticos puede provocar problemas asi que deberia haber mejores soluciones.
el problema es mezclar.
saludos Armonth