Pourquoi les couleurs de mes images semblent-elles différentes sur mon site ?

Comparez trois versions de la même image

Une photo paraît correcte dans votre logiciel de retouche, mais ses couleurs changent sur votre site. Vous pourriez être tenté de l'éclaircir ou d'intensifier ses couleurs. Vérifiez d'abord si le problème vient de l'image, de la page ou de l'écran.

Comparez l'original, la copie enregistrée pour le site et l'image réellement affichée par le site. Enregistrer une copie finalisée depuis un logiciel est souvent appelé exporter. Le site peut ensuite créer sa propre version réduite ou compressée.

1. Conservez l'original. Prenez comme référence la photo d'origine ou le fichier de création modifiable. Travaillez sur des copies pour pouvoir revenir à l'original.
2. Vérifiez la copie enregistrée. Ouvrez-la dans votre logiciel à côté de l'original. Faites aussi glisser le fichier dans un onglet du navigateur pour observer son rendu.
3. Vérifiez la version du site. Sur un ordinateur, faites un clic droit sur l'image de la page publiée et cherchez Ouvrir l'image dans un nouvel onglet, ou une option équivalente. Les étapes ci-dessous expliquent quoi faire si elle n'est pas proposée.
4. Comparez la même zone. Utilisez le même écran, des tailles d'affichage proches et un fond similaire. Choisissez un endroit où l'écart se voit clairement, comme le tissu d'un produit ou une surface unie du logo.

Pour l'instant, ne changez ni la luminosité ni les autres réglages de l'écran. Comparer une image sur un téléphone et l'autre sur un ordinateur portable rend plus difficile la distinction entre l'effet du fichier et celui de l'écran.

Choisissez la prochaine vérification selon l'écart observé

Qu'est-ce qu'un profil colorimétrique et à quoi sert-il ?

Une image enregistre ses couleurs sous forme de nombres. Un profil colorimétrique indique à l'application comment les afficher. Lorsqu'il est enregistré dans le fichier image, on parle de profil incorporé. Vous pouvez aussi rencontrer le terme profil ICC, qui renvoie à la norme utilisée pour ces profils. La FAQ de l'International Color Consortium explique leur fonctionnement.

sRGB est une manière courante de définir les couleurs des images destinées au Web. Voyez-le comme un ensemble commun d'instructions de couleur. C'est un choix pratique pour les photos et les illustrations ordinaires consultées sur de nombreux appareils. Adobe RGB et Display P3 définissent d'autres plages de couleurs, plus étendues.

Si les informations de couleur manquent ou sont mal lues, une application peut afficher l'image autrement. Mais l'absence de profil ne signifie pas automatiquement que le fichier est incorrect. Une image déjà préparée pour sRGB peut garder l'aspect prévu. Le problème apparaît lorsque l'application suppose de mauvaises instructions pour ses couleurs. Consultez les explications d'Adobe sur les profils des images.

Un écran possède aussi son propre profil, qui décrit sa reproduction des couleurs. Il faut le distinguer du profil de l'image : le profil de votre moniteur n'est pas celui à joindre à toutes les images destinées aux visiteurs.

Convertissez les couleurs au lieu de changer seulement le profil

Les logiciels peuvent proposer Assign Profile (attribuer un profil) et Convert to Profile (convertir en profil). Ces commandes ont des fonctions différentes :

• Attribuer un profil donne une nouvelle interprétation aux nombres de couleur existants. Les nombres restent identiques, mais l'image peut changer d'aspect.
• Convertir en profil adapte les nombres aux nouvelles instructions de couleur en cherchant à préserver l'aspect de l'image.

Pour créer une copie sRGB à partir d'une image Adobe RGB dont le profil est correctement identifié, utilisez la conversion. Attribuer simplement sRGB peut modifier les couleurs. Certaines couleurs très vives ne peuvent pas être reproduites exactement dans la plage plus limitée de sRGB : vérifiez le résultat. Les instructions d'Adobe sur les profils décrivent les deux commandes.

Si le profil d'origine est inconnu, recherchez le fichier de création original ou demandez à son auteur. Ne choisissez pas un profil simplement parce qu'il rend l'image plus colorée. Le logiciel peut avoir supposé un profil à l'ouverture. Le profil qu'il indique actuellement ne prouve donc pas lequel a servi à créer l'image.

Enregistrez une copie sRGB pour le Web

Pour une photo ou une illustration ordinaire, créez une copie sRGB distincte et conservez l'original. Il faut un logiciel capable de convertir les couleurs, comme Photoshop. Un autre logiciel peut proposer Convert to sRGB dans ses réglages d'exportation. Les noms de menus Photoshop ci-dessous correspondent à l'interface anglaise.

1. Vérifiez le profil de l'original. Cherchez les réglages de couleur du document. Dans Photoshop, ouvrez Edit → Convert to Profile et consultez Source Space. Si le logiciel signale un profil manquant, vérifiez les réglages du fichier original ou demandez à son auteur plutôt que de deviner.
2. Choisissez sRGB pour la copie. Dans la fenêtre de conversion Photoshop, sélectionnez sRGB IEC61966-2.1 comme destination. Activez Preview pour examiner le changement, puis confirmez. Adobe fournit la procédure Photoshop complète.
3. Enregistrez ou exportez la copie. Si l'option Embed Color Profile est proposée, incorporez le profil sRGB correspondant. La conversion modifie les nombres de couleur ; l'incorporation enregistre les instructions pour les lire.
4. Rouvrez le fichier enregistré. Vérifiez-le dans le logiciel et le navigateur avant de l'envoyer au site. Donnez-lui un nom différent pour reconnaître la nouvelle copie.

Si votre logiciel n'a pas de commandes de profil colorimétrique, consultez sa documentation sur l'exportation des couleurs. Demandez au graphiste une copie sRGB pour le Web si vous ne pouvez pas vérifier les réglages vous-même.

Choisissez séparément le format de fichier. JPG convient souvent aux photos ; PNG peut être utile aux illustrations qui nécessitent un fond transparent. Notre guide des formats d'image pour le Web explique les possibilités. Passer de JPG à PNG ne répare pas à lui seul des informations de couleur incorrectes.

Vérifiez si le site modifie l'image

Si le fichier enregistré est correct mais pas l'image du site, examinez ce qui se passe après son envoi. Un outil de création de site, une extension ou un service de diffusion peut redimensionner, compresser ou changer le format d'une image.

Commencez par l'image ouverte dans son propre onglet. Enregistrez cette copie sur votre ordinateur et comparez-la au fichier envoyé, dans le même logiciel. Des dimensions plus petites ne prouvent pas un problème de couleur, mais indiquent que vous comparez peut-être des versions différentes.

Si vous ne pouvez pas ouvrir l'image directement

Les outils de développement du navigateur permettent de voir quel fichier la page charge. Cette vérification est plus simple sur un ordinateur :

1. Ouvrez la page, puis cherchez Outils de développement ou Developer tools dans le menu du navigateur, souvent sous Plus d'outils.
2. Choisissez l'onglet Network ou Réseau et rechargez la page. La liste des fichiers chargés apparaît.
3. Utilisez le filtre des images, généralement nommé Img ou Images. Sélectionnez un fichier et regardez l'onglet Preview ou Aperçu pour trouver votre image.
4. Faites un clic droit sur sa ligne et choisissez Ouvrir dans un nouvel onglet si l'option existe. Sinon, copiez son adresse Web, appelée aussi URL, et collez-la dans un nouvel onglet. Enregistrez l'image pour la comparaison.

Le guide du panneau Network de Chrome illustre ces outils. Les noms et l'organisation des menus peuvent varier selon le navigateur et la langue.

La page peut sélectionner une image différente sur téléphone et sur ordinateur. Le guide des images adaptatives explique ce fonctionnement.

Si vous ne gérez pas les réglages techniques du site, transmettez le fichier envoyé et la copie du site à la personne qui s'en charge. Demandez-lui si le traitement supprime le profil colorimétrique ou convertit mal les couleurs. Après correction, il peut être nécessaire de recréer les versions des images et de vider le cache, qui conserve les fichiers générés auparavant. Vérifiez que vous consultez bien la nouvelle version.

Les informations de couleur sont différentes des données privées, comme la position GPS d'une photo. Supprimer toutes les métadonnées, c'est-à-dire les informations enregistrées avec l'image, peut aussi supprimer son profil colorimétrique. Vérifiez à la fois la confidentialité et l'aspect de la copie à partager. Le guide des métadonnées photo détaille cette démarche.

Vérifiez les effets de la page et son fond

Si l'image du site paraît correcte dans son onglet mais différente sur la page, la page peut modifier son rendu. Essayez les thèmes clair et sombre du site et observez si l'image change lorsque vous passez le pointeur dessus.

• Effets de couleur ou de luminosité : un thème peut assombrir les images, atténuer leurs couleurs ou les rendre grises. Ces effets sont souvent appelés filtres. La référence MDN de filter montre leur action.
• Transparence partielle : l'image ou la section qui l'entoure peut laisser apparaître le fond, ce qui donne des couleurs plus pâles. Ce réglage s'appelle l'opacité. Il peut affecter l'image même lorsqu'il est appliqué à sa section ; voir l'explication d'opacity sur MDN.
• Une couche au-dessus de l'image : un voile coloré ou un effet au survol peut teinter l'image sans modifier le fichier.
• Un autre fond : les zones transparentes ou partiellement transparentes se mélangent au fond de la page. Même des couleurs opaques peuvent sembler différentes sur du blanc et sur du gris foncé.

Comparez une image transparente sur le fond utilisé lors de sa création. Si elle ne paraît incorrecte que sur un fond précis, revoyez sa conception pour cet emplacement. Le guide des fonds transparents présente les options.

Cherchez les effets d'image dans l'éditeur de page ou les réglages du thème. Si vous avez besoin d'aide, précisez au développeur que l'image est correcte lorsqu'elle est affichée seule. Demandez-lui de vérifier les filtres, l'opacité et les couches superposées. Il pourra désactiver temporairement certaines règles de style pour trouver la cause. Le guide MDN de débogage CSS explique cette méthode.

Comparez les écrans dans des conditions similaires

Si le même fichier diffère sur deux écrans, ne modifiez pas l'image pendant leur vérification. La luminosité, l'éclairage de la pièce et les capacités de l'écran influencent ce que vous voyez.

Désactivez temporairement les fonctions qui changent volontairement l'affichage. Chez Apple, Night Shift rend l'écran plus chaud et True Tone adapte les couleurs et leur intensité à la lumière ambiante. Consultez le guide des réglages d'affichage Apple. Sur d'autres appareils, cherchez un filtre de lumière bleue, un mode nuit ou un mode de couleurs vives.

Si toute la page paraît plus chaude ou plus vive, les réglages d'affichage sont un bon point de départ. Si une seule photo diffère, revenez à ses informations de couleur et vérifiez si elle est en HDR, comme l'explique la FAQ.

Si votre travail exige des couleurs de produit fiables, un écran calibré offre une meilleure référence. Le calibrage règle l'écran selon une cible connue ; un profil d'écran décrit sa reproduction des couleurs. La FAQ de l'ICC explique ces rôles. Bien préparer l'image aide à obtenir un rendu cohérent, sans rendre identiques tous les écrans de vos visiteurs.

Exemple : une photo de produit paraît terne dans le navigateur

Imaginez une photo de produit dont le fichier original possède un profil Adobe RGB connu. Elle est correcte dans le logiciel, mais la copie enregistrée paraît terne dans le navigateur. Cet exemple est hypothétique : la perte d'un profil n'affecte pas toutes les images de la même manière.

1. Repérez le premier écart. Le fichier enregistré diffère déjà avant son envoi. Commencez par les réglages d'exportation.
2. Vérifiez ce qui a été enregistré. Dans cet exemple, l'exportation a supprimé le profil Adobe RGB sans convertir les couleurs en sRGB.
3. Créez une copie depuis l'original. Convertissez-la en sRGB et enregistrez les informations de profil correspondantes.
4. Comparez avant l'envoi. Ouvrez la nouvelle copie dans le logiciel et le navigateur, sur le même écran.
5. Vérifiez aussi le site. Envoyez la copie et comparez l'image réellement utilisée par la page.

Augmenter la saturation intensifie les couleurs. Cela pourrait améliorer le premier export dans une application, mais le rendre trop coloré dans une autre. Corriger l'exportation traite la cause et préserve l'utilité de l'original pour d'autres usages.

Utilisez Pixilo une fois les couleurs vérifiées

Quand la copie enregistrée présente les couleurs souhaitées, utilisez Pixilo pour adapter ses dimensions à la page ou réduire la taille du fichier. Conservez la copie préparée pour la comparer au téléchargement.

Pixilo propose le redimensionnement et la compression, mais pas de commandes pour réparer ou sélectionner les profils colorimétriques. Pour redimensionner et pour de nombreuses conversions de format, le navigateur redessine l'image. Si vous devez conserver les caractéristiques Display P3 ou HDR, vérifiez attentivement le résultat : chaque opération ne les préserve pas forcément.

Commencez par une image avant d'en traiter plusieurs. Comparez ses couleurs et détails importants après le téléchargement, puis vérifiez le résultat publié. Si l'écart apparaît seulement après l'envoi au site, examinez son traitement des images ou les effets de la page.

Questions fréquentes

Faut-il toujours convertir les images Display P3 en sRGB ?

Non. Display P3 permet une plage de couleurs plus étendue et peut être utile si le site et les appareils des visiteurs le prennent en charge. Si vous ignorez comment le site le gère, une copie sRGB est un point de départ plus simple pour une publication ordinaire. Conservez l'original. WebKit explique comment les images avec profil sont adaptées à l'écran.

Pourquoi les zones très lumineuses de ma photo de téléphone s'atténuent-elles ?

L'original peut être une image HDR, pour high dynamic range, soit une plage dynamique étendue. Elle peut présenter un écart plus important entre les zones sombres et lumineuses. Une copie standard ne conserve pas forcément cet aspect. Cherchez une option d'exportation en plage dynamique standard, parfois appelée SDR. Le logiciel peut nommer l'adaptation tone mapping : elle ramène la luminosité HDR dans la plage standard. Examinez surtout les hautes lumières et les ombres. Changer seulement le profil colorimétrique ne remplit pas cette fonction. L'aperçu HDR de WebKit explique cette capacité d'affichage.

PNG garantit-il des couleurs exactes ?

Non. PNG peut conserver les valeurs de pixels enregistrées sans les modifier, mais l'application doit toujours les interpréter correctement. Changer de format ne répare pas un profil incorrect ou inconnu.

Que faire si le graphiste m'a envoyé une image CMJN (CMYK) ?

CMYK, appelé CMJN en français, utilise le cyan, le magenta, le jaune et le noir pour l'impression. RGB, ou RVB, utilise le rouge, le vert et le bleu pour les images affichées à l'écran. Demandez une copie sRGB distincte pour le Web ou créez-la dans un logiciel de conversion des couleurs. Conservez l'original destiné à l'impression. Le guide Adobe des modes colorimétriques explique la différence.

Pourquoi mon logo ne correspond-il pas au code couleur de la page ?

Un code comme #336699 est un code hexadécimal ; sur une page Web, il décrit une couleur sRGB. Un logo préparé avec d'autres instructions de couleur peut ne pas correspondre. Vérifiez aussi la transparence et les effets de la page. Comparez une zone unie à l'intérieur du logo, car ses bords lissés peuvent contenir des pixels partiellement transparents. La référence MDN des couleurs hexadécimales explique la notation.