Muchos creativos tienen la oportunidad de publicar imágenes en la web: sitios web corporativos, sitios web de comercio electrónico, blogs, plataformas de redes sociales y otros. ¿Las imágenes que se publican de productos, personas, obras de arte, etc. se presentan a los visitantes de la web en los colores previstos? Hay varios puntos que se debe tener en cuenta al cargar imágenes en la web. En este artículo, profundizaremos en la gestión del color web en función de los resultados verificados por EIZO mientras aportamos “pildoras” de conocimiento.
Gestión del color del navegador web
Primero, analicemos cómo se trata la gestión del color en diversos navegadores web: Chrome, Firefox, Internet Explorer y Safari. Cada navegador web tiene sus propias características, por lo que algunos creativos web prefieren comprobar cómo se muestra el contenido en diferentes navegadores web. Veremos qué reglas se deben seguir para una buena gestión del color de las imágenes cargadas en la web según las pruebas internas de EIZO.
Por qué los colores se ven diferentes en los navegadores web
¿Alguna vez revisó una imagen que creó en un navegador web y vio que se mostraba con colores extremadamente fuertes sin la gradación adecuada, apariencia atenuada o simplemente colores completamente diferentes a los que pretendía? Si los colores de la imagen en el navegador web difieren de cómo se veían cuando se creó, podría causar problemas, como que un producto no se transmita de manera veraz a quienes navegan por su sitio web o tiempo excesivo invertido en reelaborar la imagen.
Hay dos razones principales por las que los colores se ven diferentes en los navegadores web:
(1) No se ha establecido un perfil de color adecuado para la imagen
(2) Las características de administración del color del navegador web varían, lo que provoca una desviación del color
Es muy importante tener la comprensión correcta de las características de color de cada navegador, así como un entorno de monitor adecuado para gestionar correctamente los colores en las imágenes. A continuación se muestran algunos puntos específicos a los que debe prestar atención.
Conceptos básicos de gestión del color
Siempre selecciona un perfil de color
Al seleccionar un perfil de color en las imágenes, puedes comunicar la gama de colores deseada al navegador web. Los perfiles de color definen las características de color de los dispositivos y los datos de imagen. Para datos de imagen en el espacio de color RGB, es común usar el versátil sRGB o el perfil de color Adobe RGB de orientación más profesional. El software que puedes utilizar para perfiles de color se denomina software con capacidad de gestión del color (por ejemplo, Adobe Photoshop). La medida en que los navegadores web admiten la gestión del color también varía, por lo que la apariencia de las imágenes en los diferentes navegadores no es uniforme.
Probablemente haya escuchado que sRGB es el estándar para la web. De hecho, los colores especificados en CSS, que es un lenguaje de hoja de estilos para la construcción web, están en el espacio de color sRGB. Al incorporar el perfil de color sRGB en las imágenes que se publicarán en sitios web, puede asegurarse de que se muestren correctamente en más entornos.
Hacer referencia a un perfil de monitor
Los perfiles de monitor son archivos de datos que comunican los colores que muestra el monitor al sistema y están separados de los perfiles de color incrustados en las imágenes. Con ColorEdge, cuando el monitor se ajusta mediante el software gratuito ColorNavigator, el perfil del monitor se configura automáticamente en el sistema operativo de la computadora. Para los navegadores web que admiten la gestión del color, la referencia no solo al perfil de color seleccionado en la imagen, sino también al perfil del monitor, garantiza que las imágenes se muestren correctamente de acuerdo con las características del monitor u otro dispositivo de visualización.
Si no se presta suficiente atención a la gestión del color las imágenes no se mostrarán con los colores adecuados.
Gestión del color en cada navegador web
EIZO probó cómo se muestran las imágenes según varios navegadores web. Los resultados son visibles en el cuadro siguiente.
| SO | Windows 10 (64 bits) | macOS Mojave (10.14) | ||
|---|---|---|---|---|
| Navegador | Cromo | Firefox | explorador de Internet | Safari |
| Versión | 75.0.3770.90 | 67.0.2 | 11.503.17763.0 | 12.1.1 （14607.2.6.1.1） |
| (1) ¿El navegador admite perfiles de color integrados? | si | si | si | si |
| (2) ¿Cómo se muestran las imágenes sin perfil de color? | Muestra en sRGB | Se muestra en el espacio de color del monitor | Muestra en sRGB | |
| (3) ¿El navegador hace referencia a los perfiles del monitor? | si | si | No
(reconoce el monitor solo como sRGB) |
si |
| (4) En un entorno de varios monitores, ¿el navegador hace referencia a los perfiles del monitor? | si | No
(solo hace referencia al perfil del monitor principal) |
No
(solo hace referencia al perfil del monitor principal) |
si |
Resultados de las pruebas internas de EIZO que se llevaron a cabo en julio de 2019. Los resultados reales pueden variar según las futuras actualizaciones del navegador.
Chrome / Safari
Chrome y Safari pueden mostrar imágenes correctamente haciendo referencia al perfil de color de la imagen y al perfil del monitor. El perfil de color sRGB se aplica automáticamente a las imágenes sin perfil de color. Es versátil y confiable, pero siempre incorpore un perfil de color al crear imágenes, teniendo en cuenta que se pueden usar otros navegadores para verlas.
Internet Explorer
Internet Explorer hace referencia a perfiles de color de imagen, pero no a perfiles de monitor. Al igual que con Firefox, las imágenes sin un perfil de color se alargan o encogen de acuerdo con la gama de colores del monitor, por lo que, en algunos casos, los colores pueden ser extremadamente fuertes, tenues o apagados. Siempre selecciona un perfil de color al crear imágenes para conservar los colores deseados. Este navegador también reconoce todos los monitores como monitores sRGB independientemente de la gama de color real. Como tal, las imágenes no se muestran correctamente en los monitores Adobe RGB.
Consejos para creativos que utilizan un entorno de varios monitores
Monitor principal para verificación de color
Como se muestra en (4) en el cuadro anterior, la administración de color solo funciona correctamente en el monitor principal cuando se usa Firefox o Internet Explorer. Algunos programas de edición de imágenes se comportan de la misma manera, por lo que si usa varios monitores en su entorno creativo, siempre verifica el color en el monitor principal.
Resumen
- Inserta siempre un perfil de color en tus imágenes para comunicar con precisión los colores deseados.
- Al incorporar el versátil perfil de color sRGB en las imágenes publicadas en la web, se minimiza la falta de comunicación del color.
- Los monitores que pueden reproducir con precisión el espacio de color sRGB son adecuados para la creación de contenido web.
Modelo recomendado para la creación web
Un monitor de calibración de hardware por 24,1 pulgadas con software de gestión del color dedicado, ideal para la creación de medios digitales.
