¿Por qué los colores de mis imágenes se ven distintos en mi web?

Compara tres versiones de la misma imagen

Una foto se ve bien en el editor, pero sus colores cambian en tu web. Puede que quieras aclararla o darle más color. Antes, comprueba si el problema está en la imagen, en la página o en la pantalla.

Compara el original, la copia que guardaste para la web y la imagen que la web muestra realmente. Guardar una copia terminada desde un editor suele llamarse exportar. Después, la web puede crear su propia versión reducida o comprimida.

1. Conserva el original. Usa como referencia la fotografía original o el archivo de diseño editable. Trabaja con copias para poder volver al original.
2. Revisa la copia guardada. Ábrela en el editor junto al original. Arrastra también el archivo a una pestaña del navegador para ver cómo se muestra allí.
3. Revisa la copia de la web. En un ordenador, haz clic derecho sobre la imagen de la página publicada y busca Abrir imagen en una pestaña nueva o una opción similar. Más abajo se explica qué hacer si no aparece.
4. Compara la misma zona. Usa la misma pantalla, tamaños de visualización parecidos y un fondo similar. Elige un área donde se note la diferencia, como el tejido de un producto o una zona de color uniforme del logo.

De momento, no cambies el brillo ni los demás ajustes de la pantalla. Mirar una imagen en el móvil y la otra en el portátil dificulta saber si la diferencia viene del archivo o de la pantalla.

Elige el siguiente paso según la diferencia

¿Qué es un perfil de color y por qué importa?

Una imagen guarda los colores como números. Un perfil de color indica a la aplicación cómo deben mostrarse esos números. Si el perfil se guarda dentro del archivo, se llama perfil incrustado. También puedes encontrar el término perfil ICC, que hace referencia al estándar utilizado. Las preguntas frecuentes del International Color Consortium explican su funcionamiento.

sRGB es una forma muy utilizada de definir los colores de las imágenes para la web. Puedes verlo como unas instrucciones de color compartidas. Es una opción práctica para fotos y gráficos habituales que se mostrarán en muchos dispositivos. Adobe RGB y Display P3 definen otras gamas de colores, más amplias.

Si falta información de color o se interpreta mal, una aplicación puede mostrar la imagen de otra manera. Sin embargo, que falte el perfil no significa automáticamente que el archivo sea incorrecto. Una imagen ya preparada para sRGB puede verse como estaba previsto. El problema surge al suponer unas instrucciones equivocadas para sus colores. Consulta la explicación de Adobe sobre perfiles de imagen.

La pantalla también tiene su propio perfil, que describe cómo reproduce los colores. No lo confundas con el perfil de la imagen: el perfil de tu monitor no es el que debes adjuntar a todas las imágenes para tus visitantes.

Convierte los colores en lugar de limitarte a asignar otro perfil

Los editores pueden ofrecer Assign Profile (asignar perfil) y Convert to Profile (convertir en perfil). Son operaciones distintas:

• Asignar un perfil da otra interpretación a los números de color existentes. Los números no cambian, pero el aspecto de la imagen puede hacerlo.
• Convertir en un perfil adapta los números a las nuevas instrucciones de color e intenta conservar el aspecto de la imagen.

Para crear una copia sRGB de una imagen Adobe RGB cuyo perfil está bien identificado, usa la conversión. Asignar sRGB sin convertir puede cambiar los colores. Algunos colores muy vivos no se reproducen exactamente en la gama más limitada de sRGB, así que revisa el resultado. Las instrucciones de Adobe sobre perfiles describen ambas operaciones.

Si desconoces el perfil original, busca el archivo de diseño original o pregunta a su autor. No elijas un perfil solo porque la imagen parece más colorida. El editor puede haber supuesto un perfil al abrir el archivo. Por tanto, el perfil que indica ahora no demuestra cuál se utilizó al crear la imagen.

Guarda una copia sRGB para la web

Para una foto o un gráfico habitual, crea una copia sRGB independiente y conserva el original. Necesitas un editor que permita convertir colores, como Photoshop. Otros editores pueden incluir Convert to sRGB en los ajustes de exportación. Los nombres de los menús de Photoshop que aparecen aquí corresponden a la interfaz en inglés.

1. Comprueba el perfil del original. Busca los ajustes de color del documento. En Photoshop, abre Edit → Convert to Profile y revisa Source Space. Si la aplicación avisa de que falta el perfil, comprueba los ajustes del archivo original o pregunta a su autor antes de adivinar.
2. Elige sRGB para la copia. En el diálogo de conversión de Photoshop, selecciona sRGB IEC61966-2.1 como destino. Activa Preview para ver el cambio y después confirma. Adobe ofrece el procedimiento completo de Photoshop.
3. Guarda o exporta la copia. Si aparece Embed Color Profile, incrusta el perfil sRGB correspondiente. La conversión cambia los números de color; incrustar el perfil guarda las instrucciones para leerlos.
4. Vuelve a abrir el archivo guardado. Compruébalo en el editor y en el navegador antes de subirlo. Usa otro nombre de archivo para reconocer la nueva copia.

Si tu editor no tiene controles de perfiles de color, consulta su documentación sobre cómo exporta los colores. Pide al diseñador una copia sRGB para la web si no puedes comprobar los ajustes por tu cuenta.

Elige el formato de archivo por separado. JPG suele ser adecuado para fotografías; PNG puede ser útil para gráficos que necesitan un fondo transparente. Nuestra guía de formatos de imagen para la web explica las opciones. Pasar de JPG a PNG no corrige por sí solo una información de color incorrecta.

Comprueba si la web modifica la imagen

Si el archivo guardado se ve bien, pero la imagen de la web no, revisa qué ocurre después de subirla. Un constructor de sitios, un complemento o un servicio de distribución puede cambiar sus dimensiones, comprimirla o convertir su formato.

Empieza por la imagen que abriste en su propia pestaña. Guarda esa copia en el ordenador y compárala con el archivo que subiste, usando el mismo editor. Unas dimensiones menores no demuestran un problema de color, pero indican que quizá estás comparando versiones distintas.

Si no puedes abrir la imagen directamente

Las herramientas de desarrollo del navegador muestran qué archivo carga la página. Es más fácil hacerlo en un ordenador:

1. Abre la página y busca Herramientas de desarrollo o Developer tools en el menú del navegador, a menudo dentro de Más herramientas.
2. Elige la pestaña Network o Red y recarga la página. Aparecerá una lista de los archivos que se cargan.
3. Usa el filtro de imágenes, normalmente llamado Img o Images. Selecciona un archivo y revisa Preview o Vista previa para encontrar tu imagen.
4. Haz clic derecho en su fila y elige Abrir en una pestaña nueva si está disponible. Si no, copia su dirección web, también llamada URL, y pégala en una nueva pestaña. Guarda la imagen para compararla.

La guía del panel Network de Chrome ilustra estas herramientas. Los nombres y la distribución de los menús pueden variar según el navegador y el idioma.

La página puede elegir archivos de imagen distintos en móvil y ordenador. La guía de imágenes adaptables explica este comportamiento.

Si no gestionas los ajustes técnicos del sitio, envía el archivo que subiste y la copia de la web a la persona responsable. Pídele que compruebe si el procesamiento elimina el perfil de color o convierte los colores de forma incorrecta. Tras corregirlo, puede ser necesario volver a generar las versiones de imagen y vaciar la caché, que guarda archivos generados anteriormente. Comprueba que estás viendo la versión nueva.

La información de color es distinta de los datos privados, como la ubicación GPS de una foto. Eliminar todos los metadatos, es decir, la información guardada junto a la imagen, también puede eliminar su perfil de color. Comprueba tanto la privacidad como el aspecto al crear una copia para compartir. La guía de metadatos de fotos explica el proceso.

Revisa los efectos de la página y el fondo

Si la imagen de la web se ve bien en su pestaña, pero distinta dentro de la página, puede que la página esté alterando su aspecto. Prueba los temas claro y oscuro y observa si la imagen cambia al pasar el puntero por encima.

• Efectos de color o brillo: un tema puede oscurecer las imágenes, reducir su color o mostrarlas en gris. Suelen llamarse filtros. La referencia de filter en MDN muestra cómo afectan a la imagen.
• Transparencia parcial: la imagen o la sección que la contiene puede dejar ver el fondo y hacer que los colores parezcan más apagados. Este ajuste se llama opacidad. Puede afectar a la imagen incluso si se aplica a la sección; consulta la explicación de opacity en MDN.
• Una capa sobre la imagen: una superposición de color o un efecto al pasar el puntero puede teñir la imagen sin cambiar su archivo.
• Un fondo distinto: las zonas transparentes o parcialmente transparentes se mezclan con el fondo de la página. Incluso los colores opacos pueden parecer distintos rodeados de blanco o de gris oscuro.

Compara una imagen transparente sobre el mismo fondo utilizado en el diseño. Si solo se ve mal sobre un fondo concreto, revisa el diseño para ese uso. La guía de fondos transparentes explica las opciones.

Busca efectos de imagen en el editor de la página o en los ajustes del tema. Si necesitas ayuda, indica al desarrollador que la imagen se ve bien por separado y pídele que revise filtros, opacidad y superposiciones. Puede desactivar temporalmente reglas de estilo individuales para encontrar la causa. La guía de depuración de CSS de MDN explica el método.

Compara pantallas en condiciones similares

Si el mismo archivo se ve distinto en dos pantallas, no lo modifiques mientras revisas los dispositivos. El brillo, la iluminación de la habitación y las capacidades de la pantalla influyen en lo que ves.

Desactiva temporalmente las funciones que cambian el aspecto de la pantalla de forma deliberada. Night Shift de Apple vuelve la pantalla más cálida y True Tone adapta el color y la intensidad a la luz ambiental. Consulta la guía de ajustes de pantalla de Apple. En otros dispositivos, busca el filtro de luz azul, el modo nocturno o un modo de colores intensos.

Si toda la página parece más cálida o viva, los ajustes de pantalla son un buen punto de partida. Si solo cambia una foto, vuelve a revisar su información de color y comprueba si es HDR, como se explica en las preguntas frecuentes.

Cuando tu trabajo requiere colores de producto fiables, una pantalla calibrada ofrece una mejor referencia. La calibración ajusta la pantalla a un objetivo conocido; el perfil de pantalla describe cómo reproduce los colores. Las preguntas frecuentes del ICC explican esas funciones. Preparar bien la imagen ayuda a mantener la coherencia, pero no hace que todas las pantallas de los visitantes se vean igual.

Ejemplo: una foto de producto se ve apagada en el navegador

Imagina una foto de producto cuyo archivo original tiene un perfil Adobe RGB conocido. Se ve bien en el editor, pero la copia guardada se ve apagada en el navegador. Es un ejemplo hipotético: perder un perfil no afecta igual a todas las imágenes.

1. Localiza la primera diferencia. El archivo guardado ya cambia antes de subirlo, así que empieza por los ajustes de exportación.
2. Comprueba qué se guardó. En este ejemplo, la exportación eliminó el perfil Adobe RGB sin convertir los colores a sRGB.
3. Crea otra copia desde el original. Conviértela a sRGB y guarda la información de perfil correspondiente.
4. Compara antes de subirla. Abre la nueva copia en el editor y el navegador usando la misma pantalla.
5. Comprueba también la web. Sube la copia y compara la imagen que la página utiliza realmente.

Aumentar la saturación intensifica los colores. Podría mejorar la primera exportación en una aplicación, pero hacerla demasiado colorida en otra. Corregir la exportación resuelve la causa y mantiene el original útil para otros fines.

Usa Pixilo cuando los colores se vean bien

Cuando la copia guardada tenga los colores que buscas, usa Pixilo para ajustar sus dimensiones a la página o reducir el tamaño del archivo. Conserva la copia preparada para compararla con la descarga.

Pixilo permite cambiar dimensiones y comprimir, pero no ofrece controles para reparar o elegir perfiles de color. Al redimensionar y en muchas conversiones de formato, el navegador vuelve a dibujar la imagen. Si necesitas conservar características Display P3 o HDR, revisa bien el resultado; no supongas que todas las operaciones las mantienen.

Empieza con una imagen antes de procesar varias. Compara sus colores y detalles importantes después de descargarla y revisa luego la publicación. Si el cambio solo aparece al subirla, investiga el procesamiento de la web o los efectos de la página.

Preguntas frecuentes

¿Debo convertir siempre las imágenes Display P3 a sRGB?

No. Display P3 permite una gama de colores más amplia y puede ser útil cuando la web y los dispositivos de los visitantes lo admiten. Si no sabes cómo lo gestiona tu sitio, una copia sRGB es un punto de partida más sencillo para una publicación habitual. Conserva el original. WebKit explica cómo se adaptan a la pantalla las imágenes con perfil.

¿Por qué pierden brillo las zonas más luminosas de mi foto del móvil?

El original puede ser HDR, de high dynamic range o alto rango dinámico, que permite una mayor diferencia entre zonas oscuras y luminosas. Una copia estándar puede no conservar ese aspecto. Busca una opción de exportación para rango dinámico estándar, a veces llamada SDR. El editor puede llamar al ajuste tone mapping o mapeo de tonos: adaptar el brillo HDR al rango estándar. Revisa sobre todo las luces y las sombras. Cambiar solo el perfil de color no realiza esa adaptación. La presentación de HDR de WebKit explica la capacidad de visualización.

¿PNG garantiza colores correctos?

No. PNG puede conservar los valores de píxel guardados sin cambios, pero la aplicación debe interpretarlos correctamente. Cambiar de formato no repara un perfil de color incorrecto o desconocido.

¿Qué hago si el diseñador me envía una imagen CMYK?

CMYK utiliza cian, magenta, amarillo y negro para impresión. RGB usa rojo, verde y azul para imágenes en pantalla. Pide una copia sRGB independiente para la web o créala en un editor con conversión de color. Conserva el original de impresión. La guía de modos de color de Adobe explica la diferencia.

¿Por qué mi logo no coincide con el código de color de la página?

Un código como #336699 es un código hexadecimal; en una página web describe un color sRGB. Un logo preparado con otras instrucciones de color puede no coincidir. Revisa también la transparencia y los efectos de la página. Compara una zona de color uniforme del interior del logo, porque los bordes suaves pueden contener píxeles parcialmente transparentes. La referencia de colores hexadecimales de MDN explica la notación.