Esta página está diseñada de manera especial, de forma que puedas comprobar si tu navegador utiliza los perfiles de color sobre las imágenes de la propia página. Utiliza las dos técnicas dispoibles en la actualidad para conseguir que las fotografías de una página se vean correctamente en el monitor, con independencia de cuál sea o si es de PC o de MAC. El único requisito es tenerlo bien calibrado. Si no sabes cómo se calibra, puedes mirar mi curso de calibración del monitor, aunque sólo es útil si no tienes calibrador; si lo tienes, utilízalo (puedes mirar el tutorial sobre ColorMunki si tienes uno de estos). Si ya sabes cómo se calibra y quieres comprobar si todo continúa funcionando correctamente, mira la página de comprobación del monitor.

Página con color gestionado con perfiles ICC

La imagen que nos servirá de prueba contiene unos sencillos degradados que van desde negro hasta el color de máxima saturación:

Imagen de prueba, con colores intensos.

La imagen tiene un ancho de 256 píxeles y su degradado es absolutamente perfecto, lo cual se puede comprobar con su histograma (que es un bloque recto).

El aspecto que debe tener la imagen es, como ves más arriba, con colores vivos e intensos. Si el aspecto cambia y se vuelve -como en este otro caso- de colores apagados, es que el navegador no utiliza correctamente los perfiles:

Aspecto de la imagen si el navegador no utiliza la gestión de color, que provoca colores desvaídos.

Perfil incrustado en la imagen

Vamos con las pruebas. La primera es la del perfil incrustado. Un navegador que utilice correctamente los perfiles no necesita nada más que eso y que el monitor esté calibrado (aunque sea por software).

Sin perfil incrustado	Con perfil incrustado

Si las ves igual, es que NO está funcionando. Si eres un usuario de MAC y usas Safari, seguramente ya notarás la diferencia entre ambas, porque este navegador utiliza correctamente la gestión de color. Y si usas Firefox 3 o superior, también, ya que este navegador también puede utilizar la gestión de color y desde las versiones 3.5 ya viene activada (en las anteriores se podía activar mediante una preferencia oculta).
En 2009 preparé un ejemplo nuevo que es mucho más gráfico y contundente:

Test de perfil incrustado. DEBE VERSE ROJA.

Si el navegador utiliza el perfil incrustado en la imagen, debería verse de un rojo muy intenso. Pero si tu navegador no utiliza los perfiles incrustados en las imágenes, entonces tendrás un aspecto verdoso:

Aspecto incorrecto.	Aspecto con el que debe verse: rojo, rojísimo.

¿Queda más claro asi? ;-)

Compatibilidad de los navegadores

En este momento (abril de 2010), tengo constancia y he comprobado personalmente que:

- tanto en Mac como en Windows, Safari (v4)y Firefox (v3.5) SÍ usan gestión del color. Las versiones anteriores a la 3.5 de Firefox sí pueden usarla, pero debe activarse manualmente.
- Internet Explorer (v8) y Google Chrome (v4) NO la usan.

En base a esto, para cuando se ven fotos, recomiendo usar Firefox v3.5 en Windows y Safari en Mac (segun me han comentado, y he podido comprobar personalmente, la calidad del motor de color de Firefox de Mac deja que desear).

Código fuente para Internet explorer

En el caso de navegadores como Internet Explorer (para las versiones 4 o superiores) en el PC, no funciona sin más, aunque es posible conseguirlo añadiendo un pequeño código en la propia página, junto a la imagen.

En este otro ejemplo, ninguna de las dos lleva perfil incrustado. Son iguales; es más, es que es el mismo archivo mostrado dos veces. La única diferencia es que a la segunda copia de la imagen se le ha añadido el código especial para Internet Explorer, mientras que a la primera no.

Sin código especial	Con código especial

¿Te parece increíble que añadiendo un código se produzca este cambio de color? ¿Crees que en realidad he puesto dos imágenes diferentes? Pues si no te lo acabas de creer, examina las propiedades de ambas imágenes y verás que se trata del mismo archivo, porque lo único que cambia es el código que llevan para que indicar al IE que debe usar su motor de color.

NOTA: Para que funcione es necesario que tengas la versión de 6 o superior de Photoshop, pues éste instala un perfil necesario para el experimento: CIERGB.icc, que también puedes descargar de aquí.

NOTA 2: Normalmente, la imagen tarda un instante en aparecer. Primero se ve un recuadro negro y seguidamente aparece la fotografía. Esto también sirve para que compruebes que todo funciona correctamente.

¿Puedo utilizarlo en mi web?

Por supuesto, no se trata de ningún código secreto que la NASA me haya entregado sólo a mí :-). Lo único que debes hacer es tener una web y saber insertar manualmente el código con el editor de web que utilices.

Cuando en el código se indica que viene una imagen, es así:

img src=imagen.jpg

entonces debes insertar entre "img" y "src" lo siguiente:

style="filter: ColorInfo(ColorSpace=H-RGB_220_genericPC-D65-Trinitron.icm,intent=1)"

teniendo en cuenta que debes escribir el nombre del perfil EXACTAMENTE igual que como realmente es, incluyendo su extensión. Si el nombre del perfil tiene espacios, no funcionará.
El "intent" es el propósito de interpretación. Si es 1, quiere decir que se utiliza el relativo colorimétrico; si es 0 el perceptual.

En resumen, que el código debe quedar así:

img style="filter: ColorInfo(ColorSpace=H-RGB_220_genericPC-D65-Trinitron.icm,intent=1)" src=imagen.jpg

Las únicas precauciones que debes tomar son que los visitantes tengan el perfil (o que puedan descargarlo facilmente) y que el nombre del perfil no tenga espacios. Puedes utilizar mi perfil H-RGB si quieres; es de libre distribución. Recuerda instalarlo en el sistema para que funcione (una vez descargado y descomprimido, haz clic derecho sobre él y escoge "Instalar el perfil")

La excepción es el conocido sRGB. Siguiendo las instrucciones anteriores, deberia indicarse como "sRGB Color Space Profile.icm" pero en este caso, con "sRGB" ya es suficiente para que funcione.

¿Qué páginas utilizan la gestión de color?

En la galería de fotos de esta web, algunas páginas utilizan ambos sistemas para conseguir que la mayoría de usuarios puedan apreciar los colores de la mejor forma posible. Para indicarlo, llevan el logotipo del organismo ICC (International Color Consortium, consorcio internacional del color); el mismo que puedes ver en la parte superior de esta página.

A diferencia de esta página de comprobación, las galerías utilizan mi perfil H-RGB-GenericPC. La razón de utilizar este perfil y no el sRGB es que, aunque se parecen mucho entre sí en lo respectivo a la gama de colores, mi perfil sólo pesa 580 Bytes (sí, sí, menos de un "Ka") mientras que el sRGB pesa algo más de 3 KB. Esto me permite ahorrar un espacio precioso en la propia imagen, acelerar ligeramente la visualización (especialmente para los que navegan con módem) y ahorrar un poco de tráfico (que al final de mes supone más costes).

¿Qué necesito?

Es por ello que, para asegurarte de que ves correctamente las fotos de la galería, debes instalar este perfil. Descárgalo, descomprímelo e instálalo. Para ello, en Windows haz clic derecho sobre él, eliges la opción Instalar el perfil y listo:

En MAC OS X, cópialo dentro de la carpeta: Librería/Colorsync/Profiles

y en MAC OS 9, dentro de la carpeta: System/Library/Colorsync/Profiles

¿Tengo que configurar algo?

Bueno, aparte de calibrar el monitor (o recalibrarlo si hace mucho que no lo haces -más de 3 o 4 meses- ) no debes configurar nada en especial.