C'est tellement décevant lorsque vous téléchargez une photo vibrante et magnifique sur WordPress, pour la voir apparaître terne et délavée sur votre site web. Nous avons vécu cela, et nous savons à quel point il est frustrant de voir vos images soigneusement éditées perdre leur saturation de couleur parfaite.
C'est un problème courant pour de nombreux utilisateurs de WordPress, mais heureusement, la solution est étonnamment simple. Le problème réside souvent dans une incompatibilité entre les profils de couleur, et il vous suffit d'effectuer une conversion rapide avant de télécharger.
Dans ce guide, nous vous expliquerons les étapes exactes pour vous assurer que vos images sont toujours à leur meilleur. Nous vous montrerons comment faire cela en utilisant des outils d'édition de photos populaires comme Photoshop et GIMP.
Voici un aperçu rapide des sujets que nous aborderons dans cet article :
- Pourquoi certaines images perdent-elles de la couleur et de la saturation dans WordPress ?
- Comment corriger la perte de couleur et de saturation des images dans WordPress avec Photoshop
- Comment corriger la perte de couleur et de saturation dans WordPress avec GIMP
- Questions fréquemment posées sur la couleur des images dans WordPress
- Ressources supplémentaires pour l'optimisation des images
Pourquoi certaines images perdent-elles de la couleur et de la saturation dans WordPress ?
L'une des principales raisons de la perte de couleur et de saturation des images est l'espace colorimétrique. L'espace colorimétrique est simplement une gamme de couleurs disponibles pour votre appareil photo ou tout autre appareil de capture d'images.
Différentes formes d'espace colorimétrique RVB (Rouge, Vert, Bleu) sont utilisées sur Internet. Les deux formes les plus courantes sont Adobe RVB et sRVB.
De nombreux photographes professionnels capturent des photographies en utilisant l'espace colorimétrique RVB d'Adobe, qui contient plus de couleurs et offre de bien meilleurs résultats.
Cependant, la plupart des systèmes de gestion de contenu (CMS), comme WordPress, utilisent l'espace colorimétrique sRGB. Lorsque vous téléchargez votre image, WordPress crée plusieurs tailles d'images et les convertit en sRGB. Ces images ont moins de couleurs que l'Adobe RGB.
Les images capturées avec l'espace colorimétrique Adobe RGB sont plus vives et affichent les couleurs avec précision dans les tons clairs. Lorsqu'elles sont converties par WordPress, ces couleurs vives sont remplacées par des tons légèrement plus ternes.
Par exemple, voici une comparaison d'une image avec différentes qualités d'image. La photo de gauche est prise en utilisant l'espace colorimétrique Adobe RGB. Cependant, une fois téléchargée sur WordPress, l'image perd de sa vivacité et semble terne.
WordPress compresse également les images redimensionnées, ce qui peut contribuer à une légère perte de qualité. Pour plus de détails, lisez notre guide sur comment augmenter ou diminuer la compression des images JPEG dans WordPress.
Cela dit, voyons comment nous pouvons éviter la perte de couleur et de saturation des images dans WordPress.
Comment corriger la perte de couleur et de saturation des images dans WordPress avec Photoshop
Le moyen le plus simple de résoudre ce problème est de convertir vos images à l'espace colorimétrique sRGB avant de les télécharger sur WordPress. Cela peut être facilement fait à l'aide d'un outil d'édition d'images comme Adobe Photoshop.
C'est la méthode exacte que notre équipe de conception utilise ici chez WPBeginner. Elle garantit que toutes les captures d'écran et les graphiques de fonctionnalités que vous voyez dans nos tutoriels sont nets et précis en couleur à chaque fois.
Méthode 1 : Convertir les images en sRGB
Tout d'abord, vous devrez ouvrir votre image dans Adobe Photoshop.
À partir de là, allez simplement dans Fichier » Exporter » Enregistrer pour le Web (hérité) dans le menu du haut.
Cela ouvrira la boîte de dialogue Enregistrer pour le Web, où vous pourrez cocher la case « Convertir en sRGB » et l'enregistrer.
Vous pouvez également intégrer un profil de couleur à votre image. Cependant, cela n'aura pas beaucoup d'effet sur les navigateurs qui lisent une image.
Méthode 2 : Modifier les paramètres de couleur dans Photoshop
D'autre part, vous pouvez utiliser cette méthode si vous n'êtes pas satisfait du résultat de la première méthode.
Dans Adobe Photoshop, allez dans Édition » Paramètres des couleurs. Cela ouvrira la boîte de dialogue des paramètres de couleur.
Vous devez sélectionner « North America Web/Internet » dans le menu déroulant des paramètres.
Ensuite, sous la section Politiques de gestion des couleurs, sélectionnez les paramètres RVB sur Convertir en RVB de travail. Cliquez ensuite sur le bouton « OK » pour enregistrer vos paramètres.
Maintenant, vous devez ouvrir la photographie ou l'image originale que vous souhaitiez télécharger.
Si le profil de l'espace de travail ne correspond pas, Photoshop affichera un avertissement et vous demandera quoi faire.
Vous devez sélectionner « Convertir la couleur du document en espace de travail », puis cliquer sur « OK ». Le profil de couleur de votre photo est maintenant converti plus précisément. Vous pouvez maintenant enregistrer l'image pour conserver vos modifications.
Répétez le processus pour toutes les images que vous souhaitez télécharger. Vous pouvez maintenant télécharger en toute sécurité ces images converties sans aucune perte de couleur ou de saturation dans WordPress.
Comment corriger la perte de couleur et de saturation dans WordPress avec GIMP
GIMP est une alternative gratuite et puissante à Adobe Photoshop. Vous pouvez l'utiliser pour convertir l'espace colorimétrique de vos téléchargements WordPress.
GIMP détecte essentiellement chaque image que vous essayez d'ouvrir pour voir si elle possède un profil colorimétrique intégré. Si votre image est dans l'espace colorimétrique Adobe RVB, GIMP vous affichera automatiquement une boîte de dialogue pour la convertir.
Parfois, une image peut ne pas avoir de profil colorimétrique intégré, ou GIMP peut ne pas parvenir à le lire correctement. Dans ce cas, vous devrez modifier manuellement l'espace colorimétrique.
Tout d'abord, vous devez savoir quel espace colorimétrique votre photographie peut utiliser. Habituellement, il s'agit d'Adobe RVB, mais cela peut être différent. Si vous n'êtes pas sûr, vous pouvez vérifier votre appareil photo pour le découvrir.
Notez que GIMP n'a pas de profil Adobe RVB intégré. Vous devrez télécharger le profil ICC Adobe RVB sur votre ordinateur.
Ouvrez simplement le site Web Adobe Digital Imaging Solutions et faites défiler jusqu'en bas. Sélectionnez votre système d'exploitation, puis suivez les instructions à l'écran.
Vous pourrez télécharger les profils ICC Adobe RVB dans un fichier zip. Extrayez simplement le fichier zip, et à l'intérieur, vous remarquerez le fichier AdobeRGB1998.icc.
Une fois que vous avez téléchargé le profil ICC, ouvrez simplement votre image avec GIMP. De là, allez dans Image » Mode et assurez-vous qu'il est réglé sur RVB.
Une fois que vous avez appliqué le profil de couleur, GIMP peut maintenant le convertir en toute sécurité en sRVB sans perdre de couleurs.
Allez simplement dans Image » Gestion des couleurs, puis sélectionnez l'option « Convertir au profil de couleur ».
Une nouvelle boîte de dialogue va maintenant s'ouvrir.
Réglez l'option « Convertir en » sur « RVB intégré » et cliquez sur le bouton « Convertir ».
GIMP va maintenant convertir le profil de couleur en sRVB, et vous pouvez enregistrer votre image. Répétez simplement le processus pour les autres images que vous souhaitez télécharger sur WordPress.
Questions fréquemment posées sur la couleur des images dans WordPress
Au fil des ans, en aidant des milliers d'utilisateurs, nous avons remarqué que quelques questions sur les images WordPress reviennent sans cesse. Voici les réponses aux plus courantes que nous recevons.
WordPress réduit-il toujours la qualité des images ?
Par défaut, WordPress compresse les images pour aider votre site Web à se charger plus rapidement. Bien que cela soit excellent pour les performances, cela peut parfois affecter la qualité. Vous pouvez ajuster le niveau de compression ou utiliser un plugin pour le gérer plus efficacement.
Puis-je corriger la couleur des images déjà téléchargées dans ma médiathèque ?
Malheureusement, vous devrez d'abord corriger le profil de couleur sur le fichier image d'origine à l'aide d'un outil comme Photoshop ou GIMP. Ensuite, vous pourrez re-télécharger la version corrigée dans votre médiathèque WordPress.
Le sRVB est-il le meilleur espace colorimétrique pour toutes les images web ?
Oui, le sRVB est l'espace colorimétrique standard pour le web. Presque tous les navigateurs et appareils web sont conçus pour l'afficher correctement. La conversion de vos images en sRVB garantit que les couleurs seront cohérentes pour tous vos visiteurs.
Ressources supplémentaires pour l'optimisation des images
Voici quelques guides que vous pouvez consulter pour vous assurer que vos images sont correctement optimisées :
- Comment ajouter correctement des images dans WordPress (étape par étape)
- WebP vs. PNG vs. JPEG : le meilleur format d'image pour WordPress
- Guide pour débutants sur le SEO des images – Optimisez les images pour les moteurs de recherche
- Comment modifier en masse les images mises en avant dans WordPress
- Comment choisir le meilleur logiciel de conception Web (comparaison)
- Guide pour débutants sur les tailles d'images WordPress (+ meilleures pratiques)
- Comparatif des meilleurs plugins de compression d'images pour WordPress
Nous espérons que cet article vous a aidé à résoudre la perte de couleur et de saturation des images dans WordPress. Vous pourriez également consulter notre guide sur les moyens d'empêcher le vol d'images dans WordPress et comment nettoyer votre bibliothèque de médias WordPress.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Gen
J'ai essayé cela, et bien qu'il y ait une amélioration de la qualité de l'image, ce n'est toujours pas la même qualité d'image que celle que je vois dans le programme. Que puis-je faire d'autre ?
Support WPBeginner
Il y aura une baisse de qualité principalement si vous n'utilisez pas de couleurs web sûres, mais en utilisant cette méthode, la baisse de qualité devrait être minimisée par rapport à d'autres méthodes.
Admin
Shanon Sinn
Je voulais juste exprimer ma gratitude ! Frustré après avoir créé un graphique avec des illustrations faites à la main / illustrateur / photoshop que je n'arrivais pas à rendre correctement sur WordPress. Il n'a que quelques couleurs (à première vue) mais doit être équilibré, sinon il a l'air enfantin. Merci.
Support WPBeginner
Glad our guide could help
Admin
Joe Webmaster
C'est fantastique ! J'ai juste remarqué à quel point mes images étaient délavées et j'ai résolu le problème. Je fais ça depuis des années et je pensais que c'était la compression. Gimp a parfaitement fonctionné. Merci !!! Je n'arrive pas à croire que je n'ai pas trouvé cette solution avant.
Support WPBeginner
Glad our recommendation was able to help
Admin
Hagen
Bonjour,
Je voulais juste vous remercier pour ce super tutoriel !
Nous venons de recevoir nos superbes et coûteuses photos de notre photographe et nous voulions les ajouter à notre boutique.
Nous étions tellement tristes de voir à quoi elles ressemblaient.
En convertissant en couleur sRGB, toutes les images sont affichées correctement.
Merci !
Support WPBeginner
You’re welcome, glad our recommendations could help
Admin
Richard Silverbeet
Bonnes astuces mec mais les images ne "perdent" pas de couleurs, elles "perdent" des couleurs. Loose est le contraire de serré.
Support WPBeginner
Thank you for letting us know about that typo, we’ll be sure to fix it
Admin
Kris Byers
Si cela ne fonctionne toujours pas après avoir suivi ce qui précède, essayez de supprimer le CSS personnalisé pour voir s'il s'agit d'un conflit de feuilles de style, cela a résolu le problème pour moi !!
Support WPBeginner
Thanks for sharing what fixed it for you
Admin
Ash
j'ai essayé tous les réglages (même un changement extrême de saturation et de contraste) et à chaque fois, cela ramène une image terne et boueuse.
c'est très frustrant pour un site web d'artistes !!!
d'autres solutions seraient appréciées si quelqu'un connaît d'autres alternatives à ce problème svp
Paul
C'est confus, car vous continuez à faire référence au RVB comme à un espace colorimétrique. Le RVB est un modèle de couleur, pas un espace colorimétrique. Vous ne pouvez pas opposer le RVB au sRVB, car le sRVB est un espace colorimétrique qui est en fait du RVB.
Utilisez-vous le RVB comme raccourci pour Adobe RVB ? Tous ces espaces colorimétriques… sRVB, Adobe RVB, ProPhoto RVB, etc., sont des espaces RVB. Je ne sais littéralement pas comment interpréter ce que vous dites.
La vraie question à laquelle il faut répondre : WordPress supprime-t-il les profils ICC des images ? Les navigateurs modernes commencent à utiliser les profils pour la gestion des couleurs, mais ils ne peuvent pas le faire si WP dégrade tout.
C'est surtout un problème pour les personnes qui ont des moniteurs de graphisme… ceux qui affichent une gamme de couleurs plus large que l'espace sRVB. Les images sans balise sont terribles sur ceux-ci.
Julie
Et si vos photos sont déjà dans WordPress et que vous ne les avez pas sur votre ordinateur ?
Rosa Bosma
C'est une astuce géniale, pas seulement pour WordPress, mais pour de nombreuses autres plateformes aussi ! Par exemple, cela vous permet de télécharger une photo de profil avec des couleurs beaucoup plus vives.
francisco cuellar
NON, ça n'a pas marché, les couleurs sont toujours ternes
Daisy
Je lutte beaucoup avec la perte de couleur maintenant et cela me rend un peu fou. J'ai exporté mes images en RVB, à la fois sRVB et le format web dans toutes les combinaisons possibles et WordPress continue de supprimer la couleur de mes images. Je ne sais plus quoi faire à ce stade.
Sandra Collins
Merci pour ça ! Cela a résolu un problème que j'avais avec une image de logo où WP avait changé la couleur de violet à bleu.
jmdaix
Une façon simple de faire cela pourrait être d'activer « Convertir au format sRVB » dans le menu « Enregistrer pour le Web » de Photoshop. Vous conserverez votre fichier PSD ou original avec votre espace de travail et exporterez simplement une bonne version pour WordPress.
Paddy
Existe-t-il un processus similaire lorsque l'on utilise GIMP ? Merci.
Support WPBeginner
Nous avons mis à jour l'article avec une section expliquant comment faire cela dans GIMP. J'espère que cela vous aidera.
Admin
Jaime
Est-ce que cela fonctionnera pour Gimp, ou seulement pour PS ?
Support WPBeginner
Nous avons mis à jour l'article avec des instructions sur la façon de faire cela avec GIMP.
Admin
Jon Brown
Vous avez interverti les termes plusieurs fois. Les noms des espaces colorimétriques sont sRGB et Adobe RGB. Par exemple, il n'existe pas de « Adobe sRGB ».