¿Qué debo hacer con respecto al perfil de color al diseñar para la web?

He leído este artículo de Doug Avery donde explica cómo deshabilitar la gestión de color en Adobe Photoshop y el artículo de seguimiento en respuesta al alboroto de los comentaristas que argumentan en contra y admiten sRGB, aunque todavía no estoy convencido de qué técnica utilizar. debería aplicar en mi flujo de trabajo personal.
Por lo que he recopilado mientras leía el artículo (corríjame si me equivoco), la forma correcta de lidiar con esto sería hacer que Photoshop administre los colores como sRGB y haga uso de los colores de prueba cuando necesite más vista previa "fiel" de su trabajo.

En este momento tengo un proyecto de sitio web completo que ha sido diseñado con los perfiles de color deshabilitados. Empecé así porque meses atrás había notado que los colores que renderizaba Photoshop, aunque informados correctamente por la propia Herramienta Cuentagotas de Photoshop , no se correspondían al medirlos desde una captura de pantalla a lo que estaba viendo en Google Chrome al abrir la imagen exportada como PNG.
Después de una búsqueda rápida, encontré la publicación que cité anteriormente y apliqué sus sugerencias a ciegas (sin siquiera notar el seguimiento ni leer sobre los problemas). Desde entonces, no he tenido problemas: tomo capturas de pantalla de mi trabajo en Photoshop y las subo para que el desarrollador las use. Puede ver los mismos colores que yo veo y uso al desarrollar el diseño, y no tengo que pasar por el aro para ver lo que realmente estoy haciendo.

Mis preguntas:

  • ¿Es realmente necesario usar sRGB en un diseño web (entiendo las implicaciones de no usarlo en algo como fotografía o impresión) cuando solo agrega más trabajo al obligarlo a usar Proof Colors ? (Así es como yo lo veo, corrígeme si me equivoco)

  • Dado que guardar con un perfil ICC hará que algunos navegadores apliquen correctamente el perfil mientras que otros lo ignoren, el artículo también dice que probablemente sea la mejor idea diseñar solo con sRGB y luego guardar sin el perfil ICC . ¿No anula eso el propósito de usar el perfil de color en primer lugar? ¿O estoy malinterpretando lo que dice el artículo?

No creo que la respuesta de Marc Edwards sea correcta. Si configura su perfil de color en "supervisar", su color se verá genial solo para una persona: ¡usted! sRGB permite que una gama más amplia de personas vea de manera más consistente. Lee este enlace. Ofrece la mejor información que he encontrado hasta ahora sobre el tema. gballard.net/psd/saveforwebshift.html

Respuestas (5)

Mi opinión (a veces controvertida): las personas que recomiendan usar sRGB para la interfaz de usuario y el diseño web están locas. Este es el por qué.

Para que la gestión del color funcione para el diseño de la pantalla, deben suceder tres cosas importantes.

  1. La imagen debe crearse utilizando el flujo de trabajo correcto.
  2. La imagen debe guardarse con el perfil de color ICC correcto.
  3. La imagen debe mostrarse correctamente, adhiriéndose al perfil de la imagen y al entorno en el que se muestra (el navegador y el sistema operativo, etc.).

Si no tiene los tres, la gestión del color no funciona en absoluto. Tener una o dos de esas cosas significa que toda la cadena está rota.

Y aquí está el problema: todos los PNG y GIF guardados desde Photoshop no pueden tener perfiles ICC, por lo que el número 2 no es posible en la mayoría de los casos (aunque los JPEG pueden tener perfiles). Y muchos navegadores no se comportan correctamente, por lo que el número 3 también falla en muchos casos.

Si está mostrando una foto en la web, su mejor opción es convertir destructivamente a sRGB e incrustar un perfil ICC de sRGB y solo usar archivos JPEG. Si está creando elementos de interfaz de usuario web, entonces su mejor opción es configurar Photoshop para apuntar al "dispositivo RGB" (colores nativos sin perfil o administración de color).

El consejo de Doug Avery es bueno. La parte importante de su publicación es la cuadrícula que usa para comparar todos los resultados. Lo que busca es hacer coincidir HTML, CSS y colores en las imágenes, que es lo correcto a lo que debe aspirar. Eso solo es posible si los valores de color en las imágenes y los valores de color utilizados en HTML/CSS se tratan de la misma manera.

He escrito mucho más sobre el tema aquí:

Gestión de color y diseño de interfaz de usuario

Y discutió hasta la saciedad con un ingeniero de Adobe aquí:

Guardar para Web, Convertir a sRGB debe estar desactivado de forma predeterminada para PNG y GIF

¿Es realmente necesario usar sRGB en un diseño web (entiendo las implicaciones de no usarlo en algo como fotografía o impresión) cuando solo agrega más trabajo al obligarlo a usar Proof Colors? (Así es como yo lo veo, corrígeme si me equivoco)

No, no es necesario. De hecho, asumir que sRGB está ayudando demuestra una falta de comprensión del tema. Hay situaciones en las que definitivamente debería usar sRGB, pero pertenece como parte de un flujo de trabajo fotográfico completo: necesita usar imágenes JPEG, usar sRGB e incrustar un perfil sRGB. No puede hacer parte de eso sin hacer todo y esperar algún beneficio de la gestión del color.

Si está guardando archivos GIF o PNG de Photoshop, entonces nunca tendrá un perfil ICC en sus imágenes, por lo que debe asegurarse de que su flujo de trabajo esté configurado para eso y cómo los navegadores tratarán las imágenes.

Dado que guardar con un perfil ICC hará que algunos navegadores apliquen correctamente el perfil mientras que otros lo ignoren, el artículo también dice que probablemente sea la mejor idea diseñar solo con sRGB y luego guardar sin el perfil ICC. ¿No anula eso el propósito de usar el perfil de color en primer lugar? ¿O estoy malinterpretando lo que dice el artículo?

Manten eso en mente:

  • Los GIF no pueden tener perfiles ICC.
  • Los archivos PNG guardados con Photoshop no pueden tener perfiles ICC.
  • Los PNG pueden tener perfiles, pero es raro que se guarden con ellos.
  • Los archivos JPEG pueden tener perfiles.
  • La representación del navegador de imágenes con perfiles difiere entre navegadores.
  • A menudo se asume que los colores en HTML y CSS son RGB de dispositivo o sRGB, y usted no tiene control sobre eso.
Tengo 6 computadoras en casa y dos monitores calibrados en el trabajo. Un monitor calibrado simplemente no tiene una gama decente, por lo que incluso con la calibración, no es confiable. Los seis en casa están listos para usar y todos muestran los colores de manera diferente. Esta es una lección de uso en el mundo real. Así es como aprendí a dejar de preocuparme y amarlo.
Sí. El objetivo es la coherencia dentro de la página para los elementos de la interfaz de usuario, en lugar de la coherencia entre diferentes pantallas (lo que es imposible en la mayoría de las circunstancias).

Definitivamente se necesitan perfiles si se desarrolla/diseña en Mac.

Si trabajo en mis imágenes en Photoshop como Adobe RGB o ProPhoto RGB (los 2 perfiles que usa una buena cámara), entonces los colores cambian MUCHO cuando el PSD se guarda para la web y se ve en una PC con Windows.

Para un usuario de Mac, es necesario usar el perfil sRGB en los archivos WORKING para mantener los colores en todas las plataformas.

El archivo final publicado (guardado para la web) no tiene perfil, pero se necesita usar sRGB durante su creación en Mac; al menos está en el nuestro si desea que los colores se vean similares en Mac y Windows.

Me gustaría confirmar las afirmaciones de estos párrafos:

Por lo que he recopilado mientras leía el artículo (corríjame si me equivoco), la forma correcta de lidiar con esto sería hacer que Photoshop administre los colores como sRGB y haga uso de los colores de prueba cuando necesite más vista previa "fiel" de su trabajo.

y

Dado que guardar con un perfil ICC hará que algunos navegadores apliquen correctamente el perfil mientras que otros lo ignoren, el artículo también dice que probablemente sea la mejor idea diseñar solo con sRGB y luego guardar sin el perfil ICC. ¿No anula eso el propósito de usar el perfil de color en primer lugar? ¿O estoy malinterpretando lo que dice el artículo?

Distingo entre el entorno de producción (conocido y autocontrolado) y el dispositivo de salida, y organizo el flujo de trabajo de acuerdo con lo que es mejor para las fotos. Dejame explicar:

Cuando abro fotos desde mi cámara digital, tengo la opción de abrirlas con el perfil sRGB contenido. Si los abro sin el perfil, perdería información importante (los colores se ven diferentes). Así que también guardo el perfil para su posterior procesamiento. Con el perfil contenido, Photoshop puede adaptar los colores a mi perfil de monitor, a los perfiles a los que accedo para los colores de prueba, a mi perfil de impresora y a todos los perfiles con los que trabaja mi compañero.

Si usa fotos en sus archivos de diseño, debe crear el lienzo en blanco con un perfil adjunto. Y si entrega el archivo de diseño y no los gráficos finales a un desarrollador, es bueno tener el perfil adjunto...

Guardo los archivos finales sin perfil y se ven como se esperaba. ¿Por qué es así? Creo que porque los gráficos sin perfil se interpretan como si tuvieran un perfil sRGB adjunto (tal vez alguien conozca una referencia para esto).

Y también supongo que cuando toma una captura de pantalla, su sistema convierte los colores del perfil de su monitor a sRGB (o tiene un monitor muy bueno cerca del espacio de color sRGB).

La respuesta a su primera pregunta: si no usa sRGB en el flujo de trabajo, todas las imágenes usadas de otros espacios de color eventualmente no tendrán colores precisos o incluso recortados en la web. La mayoría de las imágenes sin perfil que importe o use funcionarán bien porque ya están en el espacio de color correcto (por ejemplo, el espacio estándar en la cámara).

Segunda pregunta, sí, el propósito no se cumple porque el uso de perfiles de color aún no está implementado en la web de tal manera que pueda usarlos. Los navegadores 'esperan' sRGB, por lo que no es necesario adjuntarlos, esto solo aumenta el tamaño del archivo. Debido a que muchos navegadores no entienden los perfiles, no es una buena idea ofrecer imágenes con perfil en, por ejemplo, Adobe rgb 1998, porque los colores se recortarán.

"Los navegadores 'esperan' sRGB", más o menos. Hay un comportamiento mixto en los navegadores. La mayoría renderiza imágenes sin etiquetar como dispositivo RGB (sin conversión). Safari 6 en OS X asume (erróneamente) que las imágenes sin etiquetar son sRGB y se convierten.

Actualización para Adobe Photoshop CC (2017):

  1. Deje su espacio de trabajo por defecto (North American General Purpose 2)

  2. No cambies nada más