Comment puis-je garantir un rendu des couleurs correct avec les navigateurs sur les écrans à large gamme?

Lors de l'édition pour le Web, tout le monde vous recommandera d'utiliser sRGB, car de nombreux navigateurs n'offrent pas de gestion des couleurs, et la plupart des navigateurs interpréteront toutes les images comme sRGB de toute façon.

Ceci est correct pour les navigateurs utilisés sur les écrans de gamme normaux, qui vivent eux-mêmes dans sRGB.

Entrez maintenant des affichages à large gamme. Ceux-ci vivent dans l'espace colorimétrique AdobeRGB, et à ma grande consternation sur un large écran, les navigateurs sans gestion des couleurs interpréteront également les données d'image comme étant dans l'espace colorimétrique AdobeRGB. Que se passe-t-il si les données d'image sRGB sont interprétées comme AdobeRGB? Les couleurs sont éteintes, trop fortes, ça a l'air criard.

Le problème persiste même lorsque vous utilisez un navigateur avec gestion des couleurs comme FireFox, mais que vous visualisez des images sans profil intégré: les images seront interprétées comme AdobeRGB au lieu de sRGB.

En bref: depuis que j'ai mon écran large gamme, flickr a l'air horrible.

Avez-vous des idées sur la façon dont je demande à mes navigateurs (Internet Explorer et FireFox) d'utiliser sRGB au lieu d'AdobeRGB pour le rendu des couleurs par défaut?

J'utilise Windows 7.

Chose amusante, lorsque je télécharge les images sur le disque local et que j'utilise une visionneuse de fichiers pour les visualiser, la couleur est correctement interprétée comme sRGB.

Malheureusement, il n'y a rien que vous puissiez faire qui soit pratique. Pour obtenir ce que vous voulez, vous devez définir votre profil système sur sRGB.

Le comportement du rendu des couleurs de l'image pour les images sans profil attaché n'est pas défini. Les navigateurs ne devinent pas dans quel espace colorimétrique une image se trouve, si aucun profil n'est attaché. Le système d'exploitation gère cela.

La bonne façon d'obtenir un rendu des couleurs correct est d'attacher un profil à l'image. De toute évidence, flickr (et les miniatures de smugmug) ne vous offrent pas cette option.

Vous avez donc deux choix: premièrement, définir des fenêtres pour utiliser sRGB comme profil de moniteur; alors toutes les images non marquées ressembleront à sRGB, mais les images marquées ressembleront à de la merde et votre gestion des couleurs sera folle.

Ou, faites face au fait que les images non gérées sont le diable et que vous ne pouvez rien y faire.

Peut-être existe-t-il un plugin Firefox qui peut attacher automatiquement un profil de couleur, mais en dehors de cela, c'est juste un vieux problème qui est connu sous le nom de gestion des couleurs.

J'ai dû faire face à ce même problème avec Smugmug. Mes images ont toutes des profils sRGB joints, donc elles ont fière allure (dans les navigateurs à gestion de couleur), mais les miniatures semblent sursaturées. C'est parce que les pouces sont générés automatiquement et smugmug refuse de leur attacher un profil de couleur, car cela double la taille de la miniature. Les pouces s'affichent donc quelle que soit la façon dont le système d'exploitation décide de les rendre.

J'ai eu exactement le même problème et il est possible d'arriver à une solution correcte et réalisable . Il y a beaucoup d'idées fausses à la fois dans la question et dans les réponses précédentes (et en fait, autour de la gestion des couleurs en général), alors laissez-moi essayer de les clarifier et de vous fournir une réponse.

Tout d'abord, les idées fausses ...

1. Les moniteurs ordinaires (non larges) ne "vivent pas en sRGB", ni les écrans à large gamme "vivants en AdobeRGB". sRGB et AdobeRGB (avec ProPhoto RGB) sont connus comme des profils de travail : ils ne correspondent à aucun appareil du monde réel, ils fournissent simplement un ensemble standard de mesures que tous les appareils peuvent être programmés pour comprendre. Chaque moniteur (et chaque imprimante) a son propre profil, et ce profil peut en effet changer avec le temps à mesure que les produits chimiques de l'affichage vieillissent. Le profil d'un affichage individuel peut avoir un grand degré de chevauchement avec l'un des profils de travail standard, mais il est incorrect de dire qu'il correspond exactement à lui, ou même qu'il s'y adapte complètement. Il'

2. Vous ne devez jamais définir le profil de votre écran sur l'un des profils de travail (car ce n'est pas son profil!). La bonne solution consiste à utiliser un appareil d'étalonnage pour connaître le profil correct de votre moniteur et à l'utiliser.

3. Les navigateurs ne sont pas le seul fruit: vous voulez vous assurer que votre affichage est profilé de telle manière que d'autres applications d'imagerie (Photoshop, Lightroom, peu importe) affichent également fidèlement les couleurs.

4. Il y a quelque chose que vous pouvez faire à propos des images non gérées dans les navigateurs (quelques autres réponses l'ont abordé). J'y reviendrai en détail ci-dessous.

Un guide approximatif sur la façon dont les profils interagissent lorsque vous affichez une image sur votre moniteur

Dans un monde idéal, pas un mais deux profils entrent en jeu lors de la visualisation d'une image . Le premier est le profil intégré à l'image: appelons cela le profil d'entrée . N'oubliez pas que les images numériques sont composées de pixels, chacun contenant une combinaison de rouge, vert et bleu. Ainsi, pour un carré rouge uni, chaque pixel est défini sur 100% rouge, 0% vert, 0% bleu. Mais qu'entend-on par 100% rouge?C'est comme voir un panneau sur le bord de la route disant "Vous pouvez maintenant conduire à vitesse maximale". Quelle vitesse maximale? Aussi vite que la voiture ira? Le signe ne dit pas, donc la vitesse réelle va varier d'une voiture à l'autre. Ce que le profil d'entrée nous dit, c'est à quoi cette valeur de 100% est relative: pour une image étiquetée avec un profil intégré, votre ordinateur sait maintenant que "100% rouge" signifie la valeur maximale de rouge définie par ce profil spécifique. (Pour compléter l'analogie, notre panneau de signalisation indique maintenant: "Limite maximale 70 mph. Vous pouvez maintenant conduire au maximum.")

Ainsi, une fois qu'une image est étiquetée avec un profil intégré, nous savons exactement ce que nous devons afficher : exactement quelle nuance de rouge, jaune ou autre. La question suivante est: comment l'afficher? Regardez la même image sur quelques ordinateurs différents (ou simplement votre ordinateur et votre téléphone) et vous verrez qu'aucun affichage ne rendra les couleurs exactement de la même manière. C'est là que nous devons calibrer notre moniteur pour produire un profil d'affichage - le profil de sortie - qui nous indique exactement comment cet appareil spécifique rend les couleurs. Nous avons maintenant les deux informations dont nous avons besoin:

• Profil d'entrée: que signifie cette image lorsqu'elle dit "rouge"?
• Profil de sortie: Comment obtenir ce matériel pour afficher (aussi près que possible) cette nuance de rouge?

Et si l'image n'est pas taguée? Pour tous, sauf le plus spécialiste de l'utilisation, il est sûr de supposer qu'une image non balisée utilise le profil sRGB.

Et maintenant pour répondre à votre question

La première étape avec n'importe quel moniteur - mais particulièrement importante avec un affichage à large gamme - est de calibrer correctement votre moniteur . Cela nécessite l'utilisation d'un calibrateur: un matériel qui se trouve sur l'écran et prend des lectures de couleurs tout en affichant une gamme d'images de test, pour déterminer les couleurs que votre moniteur affiche réellement. Pour un affichage à large gamme, vous devez vous assurer d'utiliser un calibrateur approprié: j'utilise un Spyder Pro 3 et cela fonctionne très bien.

Une fois que vous avez calibré votre moniteur, vous devriez constater que toute application à gestion des couleurs affiche désormais fidèlement les couleurs. Avant l'étalonnage, mon écran large gamme affichait tout ce qui était hyper saturé: les tons chair étaient rouge tomate et Photoshop et Lightroom étaient inutilisables. Après l'étalonnage, ils avaient tous les deux l'air parfaits. Utilisez donc une application à gestion des couleurs pour tester votre étalonnage.

Et maintenant sur les navigateurs! Firefox est le seul navigateur qui fonctionne bien pour moi sur un écran large gamme calibré. Par défaut, il utilise le profil de couleur intégré dans les images pour les afficher correctement, mais les images non marquées semblent toujours sursaturées. Mais ne vous inquiétez pas, tout n'est pas perdu!

• Tapez about: config dans votre barre d'adresse.
• Faites défiler vers le bas et recherchez gfx.color_management.mode .
• Remplacez la valeur par 1 .

Cela oblige Firefox à traiter toutes les images non marquées comme sRGB : exactement ce que nous voulons arriver. Il fonctionne même sur les icônes de votre barre de favoris! Malheureusement, cela ne fonctionne toujours pas sur les lecteurs vidéo flash.

Les deux Safari et Chrome sont également gérées par couleur , mais les deux ont leurs inconvénients. Safari (sur Windows au moins) ne traite pas les images non marquées comme sRGB; Chrome le fait, mais sa gestion des couleurs est désactivée par défaut et difficile à activer .

Au moment de l'écriture, Opera n'a pas du tout de gestion des couleurs et IE9 est carrément idiot: il respecte le profil d'entrée (celui intégré dans l'image) mais ignore le profil de sortie d'affichage ! Cela rend IE9 aussi inutile qu'inutile sur un large écran de gamme.

Donc: calibrez + utilisez Firefox + réglez gfx.color_management.mode sur 1 = vous êtes bon. :)

C'est probablement une question similaire à celle-ci: les exportations Lightroom sont trop sombres dans Flickr . J'ai deux écrans à large gamme (ordinateur de bureau, ordinateur portable). Vous voudrez peut-être essayer les nouvelles versions de Firefox, mais je ne retiendrais pas mon souffle. Il y a un an, j'ai fait des allers-retours pour signaler ce problème dans le suivi des bogues de Firefox (problème 497363 et 509710 ). La gestion des couleurs dans Firefox n'est pas aussi simple que d'activer une option. Les profils ICC diffèrent par leur structure et leurs capacités. Quelques-uns d'entre nous avec des écrans à large gamme ont remarqué que Firefox n'était pas en mesure d'interpréter correctement le profil ICC correspondant.

Peut-être que ce problème disparaîtra si j'utilise un outil d'étalonnage différent pour générer un profil ICC différent, ou un moniteur avec une LUT matérielle (c'est-à-dire qui peut communiquer directement avec votre outil d'étalonnage et stocker les paramètres d'étalonnage dans son matériel). Vous pouvez utiliser l' inspecteur de profil ICC gratuit pour jouer avec votre profil et le comparer à un autre profil connu pour fonctionner. Voici la spécification du profil ICC . Voici une capture d'écran de mon profil, voyez s'il y a quelque chose en commun avec le vôtre.

Je n'ai pas essayé de version bêta de Firefox depuis, je viens de m'habituer à ce problème. Si vous essayez une version plus récente, j'aimerais en entendre parler. N'éclaircissez pas vos photos et n'utilisez pas AdobeRGB dans vos photos Flickr, respectez toujours l'espace colorimétrique sRGB convivial pour le Web.

• Problème avec Firefox: 497363 https://bugzilla.mozilla.org/show_bug.cgi?id=497363
• Problème de Firefox 509710: https://bugzilla.mozilla.org/show_bug.cgi?id=509710

Les versions modernes de Firefox ont un paramètre pour essayer de gérer les images non profilées ainsi que celles profilées. Vous pouvez aller dans about: config et modifier gfx.color_management.mode en '1'. (La valeur par défaut est 2.) Un peu de recherche sur Google pourrait fournir une meilleure explication, mais cela m'a aidé lors de la visualisation des vignettes SmugMug, etc.

Ce n'est toujours pas un correctif à l'échelle du système pour les rouges sursaturés Win7, mais au moins mon navigateur est sain d'esprit.

Je crois que vous n'avez pas de chance avec IE, bien que cela puisse être corrigé dans IE 9. Pour Firefox, comme vous le savez déjà, il existe un certain support pour les informations de profil et vous pouvez obtenir des instructions sur divers paramètres qui peuvent atténuer le problème. vous avez avec elle. Votre autre option consiste à utiliser Safari qui est censé être correctement sensible aux couleurs.

La dernière option, si vous pouvez vraiment l'appeler ainsi, est de basculer votre moniteur vers l'espace colorimétrique sRGB s'il le prend en charge.

Notre propre jrista semble être l'expert en couleurs ici, alors peut-être qu'il interviendra avec une correction de plus d'idées.

Voici l'état de la gestion des couleurs dans Firefox et IE en ce moment (10/11/2010).

Firefox v3.5.x - prend en charge la gestion des couleurs complètes, mais ne comprend que les profils ICCv2. Si votre logiciel de calibrage / profilage d'affichage prend en charge la création de profils v2 (recherchez une option quelque part dans les paramètres du programme), vous devriez pouvoir afficher les images correctement. Notez que par défaut, Firefox utilise uniquement la gestion des couleurs pour les images marquées avec un profil de couleur. Comme il existe de nombreuses images sRGB non marquées sur le Web, vous souhaiterez probablement configurer Firefox pour gérer les couleurs de toutes les images. La façon la plus simple d'effectuer cette modification consiste à utiliser l'extension Color Management pour Firefox.

FireFox v4 (actuellement en version bêta) - FireFox4 prendra enfin en charge les profils de couleurs ICCv4, à la fois pour les images et pour votre profil d'affichage. Les bêtas actuelles sont gonflées, boguées et lentes, donc je ne les recommande pas pour une utilisation générale, mais au moins nous savons que la bonne gestion des couleurs est en cours.

Internet Explorer 8.x - pas de gestion des couleurs du tout. zip, nada.

Internet Explorer 9 (actuellement en version bêta) - La version bêta publique a une prise en charge limitée de la gestion des couleurs, mais elle n'est pas vraiment utile sur les moniteurs à large gamme. IE9 (bêta) reconnaît les images marquées avec des profils autres que sRGB et les convertit en sRGB. Malheureusement, il ignore complètement le profil d'affichage, ce qui signifie que si vous avez un moniteur à large gamme, tout sera toujours sursaturé. Reste à savoir si MS va corriger ce comportement ou s'il s'agissait d'une décision intentionnelle d'améliorer la vitesse de rendu. Si certains d'entre vous testent la version bêta d'IE9, je suggère de signaler ce bogue afin que MS sache qu'il y a des gens qui ne sont pas satisfaits.

J'ai eu le même problème. Je pense que vous constaterez que si vous installez Safari, vos photos Flickr seront parfaites car elles prennent en charge les profils de couleur.