WordPress altera los colores tras subir una imagen

Un quebradero de cabeza que he tenido en un antiguo proyecto era que al subir una imagen a la web, la imagen se veía diferente. Los colores eran otros, se habían cambiado y WordPress era el responsable.

En algunos casos el cambio de color era pequeño y no era apreciable.

En otros la diferencia de color era abisbal, en este caso particular los colores eran los siguientes:

Color original de la imagen

Color tras subirse la imagen

La imagen subida contenía un color mucho más intenso.

En el programa de edición aparecía correctamente el color, en este caso el #4E705F.

Sin embargo, al subirse la imagen a la web, el color era mucho más vivo, en concreto el #37705D

El motivo del cambio de color

WordPress utiliza el perfil RGB estándar, si al subir una imagen se cambia el color, lo más probable es que las hayas subido una imagen con un perfil de color no compatible.

En mi caso, al utilizar Affinity Photo, tenía marcada la opción de «Incrustar perfil ICC» y esto hacía que la foto se viera diferente.

La solución a este problema ha sido que antes de exportar la imagen, se debe pulsar en el botón de «Más» y luego desmarcar la opción de «Incrustar perfil ICC».

Incrustar perfil ICC Affinity

En el caso de Adobe Photoshop, al exportar la imagen con la herramienta de «Guardar para Web» la opción a desmarcar es «Incrustar color perfil».

Incrustar perfil de color en Photoshop

Problemas con el cambio de saturación

Investigando estos problemas de que WordPress «cambia» los colores de las fotografías, descubrí «otros problemas» con la saturación e intensidad de los colores.

Como se ha indicado anteriormente, WordPress trabaja con el RGB estándar.

Al trabajar con imágenes en software de edición de imagen como Photoshop, Gimp o Affinity se tendría que trabajar con un perfil RGB estándar.

De esta manera no habría lugar a la pérdida de color y saturación. Es decir, no habría modificación en la imagen al subirse a la web.

Definir el perfil de color sRGB en Photoshop

En el momento de crear una nueva imagen, cuando se definen las dimensiones del lienzo, se puede seleccionar el espacio de color a trabajar.

Definir perfil de color sRGB en Photoshop

Definir el perfil de color sRGB en Affinity

Acudir a la opción de Documento > Asignar perfil ICC > Seleccinar el perfil sRGB IEC61966-2.1

Perfil de color sRGB en Affinity

Conclusión

Es importante ajustar bien el perfil de color en nuestro software de edición, de esta manera, al subir imágenes a nuestro WordPress no nos encontremos sorpresas y los diseños se podrán aplicar correctamente.

¡Valora este artículo y ayúdame a mejorar la calidad del blog!
(Votos: 0 Promedio: 0)