Bonjour à tous,

Je poste pour partager un "problème" que j'ai depuis longtemps: toutes les images que j'utilise pour faire des sites sont plus claires lorsqu'elle sont affichées dans un navigateur (fifrefox, safari, etc).

C'est vraiment du au navigateur et non à la compression, car si j'ouvre les images compressées (jpg 100%, par exemple) dans photoshop, elles ont le même aspect que l'original, alors que si je les implémente dans une page xhtml (css, img), elle deviennent plus claires et moins contrastées...

Avez-vous déjà remarquer ce phénomène? Avez vous trouver une solution?? (export psd spécifique?)

Pour l'instant, ma solution est de reprendre toutes les images dans photoshop et de les "pimper" pour compenser la perte de base...

Merci pour vos avis et expériences!
A+

bone
Bonjour,

C'est plutôt que Photoshop applique une correction colorimétrique (en fonction du profil ICC présent dans l'image ou des paramètres par défaut du logiciel...), tandis que les navigateurs... non.

Photoshop te propose plusieurs modes de rendu. Parmi ceux-là, il y en a des plus adaptés au design web. Je n'en dis pas plus, je ne suis pas expert de ce logiciel.

Pour information, Safari sur Mac applique une correction colorimétrique pour certains types d'images, notamment PNG et JPEG, lorsqu'elles contiennent des instructions à ce sujet. Firefox 3 peut faire de même mais ce système a été désactivé pour des questions de performances (il peut s'activer grâce à l'extension Color Management).
Salut,
Merci pour ta réponse.

Quelqu'un a-t-il des instructions précises pour contourner ce problème ?
a écrit :
Quelqu'un a-t-il des instructions précises pour contourner ce problème ?


Oui. Se rendre chez ton voisin qui avec un peu de chance aura un écran plus sombre que le tien, tes images seront alors nickel.
Plus sérieusement il est absolument et définitvement illusoire de vouloir contrôler la luminosité, le contraste ou la densité des images, et la valeur des couleurs en général.
Hello

Je ne suis pas tout à fait d'accord avec toi.

Si il est illusoire de vouloir contrôler les couleurs/luminosités sur différents écrans et postes de travail, il est parfaitement légitime de vouloir contrôler ces éléments sur le même écrans, la même machine, mais sur différents programmes, en l'occurrence photoshop et firefox par exemple.

La différence est toujours la même, quelle que soit l'image testée. Le problème est donc bien ciblé et précis, contrairement aux différences que présentes divers postes de travail, qui dépendent de nombreux paramètres incontrôlables...

Ce n'est pas du tout la même chose. Tu m'as mal compris.

Je reste ouvert à toutes expérience ou solution, merci!
Bonjour Bone,

Florent a tout bon sur les profil ICC, il m'a même appris que FF3 peut les gérer si activation Smiley cligne

Il faut travailler tes images sous profil sRGB c'est le "dénominateur" commun utilisé par les écrans.

Sur le fond Arsene n'a pas tort car pour respecter la chaine de calibration il faut que ton écran et que celui de l'internaute soit calibrés, sinon t'es bon pour le sketch de coluche "Plus blanc que blanc..."

Mais au final tu auras moins de différence au niveau visuel avec une chaine mal calibrée qu'avec un mauvais profil.

Voilou...pour résumer : profil sRGB par défaut, si tu peux le supprimer à l'enregistrement tant mieux (gain de poids). Pour la calibration laisse tomber, il te faut une sonde (les calibrages visuels sont plus que douteux...est ce que vos yeux sont calibrés? Smiley lol ), c'est réserver au pro et c'est c'est vraiment galère.
Modifié par copperfield (26 Jan 2009 - 15:16)
Salut copperfield,
Merci pour ta réponse!

C'est exactement ce que je voulais savoir! Mais un truc n'est pas clair:
le srgb: il faut le laisser ou l'enlever?? Chez moi par défaut il est.

Pour les métas données, photoshop cs4 permet de les supprimer lors de l'enregistrement pour le web.

Donc si je comprend bien :
-enlever le profil,
-enlever les métasdonnées,
-enlever le srgb?

C'est tout ce que je voulais savoir.
Je suis totalement conscient de ne pouvoir contrôler le rendu sur d'autres écrans.
Le but de ce post est vraiment de pouvoir contrôler le rendu des images lors de leur passage psd->firefox. Je me réjouis de tester tes solutions.

Merci!
a+
Bien. Puisque mes bons conseils n'ont pas réussi à te convaincre je te conseille effectivement de te lancer dans la calibration.
Première question: celle du gammut. Si tu as une version américaine ou française de Photoshop les gammut sont différents, simplement parce que les standards de chaine graphique US et européens sont pas construits pareils.
Donc d'abord essaie de trouver à télécharger des gammut US. Tu rentres dans Photoshop, tu trouves où se cachent ces gammut et tu les remplaces.
Ceci fait tu crées une courbe d'étalonnage des RVB qui sont lisses (équivalentes) par nature... or le canal rouge (le R) est toujours plus prégnant pour des questions de longeur d'onde, donc tu passes disons la courbe des rouges de 0>50>100 à plus ou moins 2>46>97.
A partir de là tu peux considérer que ton Photoshop est presque prêt à être calibré.

Après on passe à l'écran, mais ça c'est l'étape suivante (sonde, courbes gamma et cie). L'idéal est quand même de retourner au tube cathodique qui présente des profils colorimétriques plus neutres que les écrans plats qui (en général) surcontrastent et laissent moins de marges de manoeuvre pour la calibration.

La troisième consistera enfin à te créer un univers de travail de lumière neutre constante avec blanc fixé à 7500K par exemple. La quatrième à se préoccuper des profils : désolé copperfield sRBG n'est pas un profil par défaut (ou alors depuis moins de 2 ans). Apple a(vait) son profil à une époque, Sony en avait développé un également si je me souviens bien. Adobe aussi.

Quand tout ceci dera fait tu vas être confronté a un nouveau problème plus crucial ; celui des appareils numériques et des leurs capteurs à deux balles incapables de te créer des expos équilibrées couche par couche (ah oui ça me revient, tu devras aussi dans Shop te préoccuper l'algo de retrait sous couleur qui fait que quand 3 teintes sont supérieures à 90% il en rétrograde une ou deux à 75-80%, initialement pour permettre aux encres d'imprimerie de sécher plus vite et éviter les macules... que tu n'imprimes pas n'a pas pour autant supprimé cette fonction native qui doit surement être désactivable ?). Donc tu devras anticiper les aberrations chromatiques de ton appareil avec une courbe particulière, qui ne vaudra que pour tes propres images. Tu devras aussi créer une courbe par source.

Je reviens au calibrage des retraits sous couleurs parce que j'ai encore oublié un détail qui a son importance : tu vas me dire que le web c'est du RVB et pas du CMYK. Ok c'est vrai. Quand tu récupèreras des images haute def venues d'un graveur ou d'un graphiste (en CMYK donc) et que tu les basculeras en RVB pour usage web tu remarqueras que l'algo de bascule d'un mode à l'autre est lui aussi à calibrer/paramétrer... Fais un test simple : prends une image numérique RVB sortie d'un appareil, fais-en une copie, passe-là en CMYK et remets-la en RVB. Ensuite tu ouvriras les 3 couches séparément côte à côte et tu me dis si tu as la même chose ou pas.

Après seulement tu pourras aller chez ton voisin et te rendre compte que rien n'a changé chez lui. Ni chez l'autre d'à côté.

En revanche je concède que chez toi effectivement tout sera aligné, calibré et cohérent pour quelques semaines ou quelques mois (hé oui les écrans vieillissent et virent de bord).


Disons que ça c'est ce que tu devras faire pour avoir des images correctes du début à la fin de la chaîne de prod. Si ce que tu voulais c'est, à partir d'images probablement totalement déséquilibrées chromatiquement, retrouver strictement les mêmes déséquilibres entre Shop et FF, moi qui travaille en simultané sur 3 ou 4 écrans je ne peux que te conseiller de t'en f... éperdument.
Voilà, bonne chance Smiley cligne
Modifié par Arsene (26 Jan 2009 - 17:01)
Arsene, ne le prend pas mal, mais tu est malheureusement hors-sujet. Smiley smile

Nous avons une sonde au bureau, et quelqu'un qui sait la calibrer. Mon problème n'est absolument pas là. Mon problème est du fait qu'une image apparaisse différemment dans photoshop et dans firefox.

Ce problème a apparemment été résolu par copperfield (je n'ai pas encore essayé).

Malgré tout, merci beaucoup pour ton ardeur à produire un message si détaillé!
;)

A +
Bone, il faut que tu travailles tes images en sRGB IEC-61966.
De mémoire il s'agit d'un vieux profil d'écran pro qui fait référence.

En travaillant ce fichier sous ce profil, que tu inclus à l'enregistrement ou pas le profil ICC, ça ne changera pas le rendu vu que tu es bon en natif en revanche si tu peux supprimer le profil à l'enregistrement fais le, tu gagneras en place.

Si tu travailles sur un profil type Adobe RGB ça va être la cata mais uniquement sur certaines couleurs... d'ailleurs photoshop te dit si les couleurs ne peuvent être imprimées ou reproduites pour le web.

J'ai eu le même problème que toi mais sous flash, lui il ne travaille qu'en sRGB ce qui est logique dans le fond.

Mon conseil est de toujours, toujours travailler dans un espace colorimétrique inférieur ou égal au sRGB car sinon au moment de la conversion adobe RGB => sRGB tu risques de te tirer une balle...

Fais moi confiance j'ai testé pour toi Smiley bawling ...
Faut pas tomber dans la parano non plus car ce problème de couleur intervient dans des cas biens particuliers... pour ma part mes images et mes flashs devaient avoir la même couleur de fond, c'était sans compter sur notre ami ICC . Smiley lol

@+
Merci pour ton aide copperfield! Je vais tester tout cela ces prochains jours!
Malheureusement, ma maquette actuelle est en adobe rgb Smiley decu .. will see

A+ et merci encore!
bone
a écrit :
Arsene, ne le prend pas mal, mais tu est malheureusement hors-sujet.


Je suis TOUJOURS h-s, c'est ma marque de fabrique Smiley cligne donc je prends ça très bien ^^
@ Arsene: disons que tu as bien développé le point de la calibration qui est forcément un critère qui fait que le "blanc est moins blanc" sur l'écran du voisin...cela dit c'est vider l'océan à la petite cuillère, mais tu n'étais pas forcément hors sujet Smiley cligne

@Bone: Comme indiqué précédemment la cata n'est pas automatique car ça dépend des couleurs que tu as utilisé en adobe rgb.
Si elles sont comprises dans le profil sRGB ou que se sont des photos pas de soucis.

En revanche si tu as travaillé des aplats de couleur qui se trouvent dans les extrêmes du profil adobe rgb alors tu peux commencer à sortir les mouchoirs Smiley lol

Bon courage
Récapitulons:

1. Travailler dans l'espace de couleurs sRGB, quel que soit l'outil de création utilisé (Photoshop, Fireworks, Gimp, Flash...). La plupart des configurations (couple navigateur/système) afficheront de toute façon du sRGB, donc même si ça ne règle absolument pas les questions de qualibrage ça évite certaines surprises.

2. Supprimer toute information de profil colorimétrique ou correction gamma des images JPEG et PNG finales. Certains navigateurs pourront les appliquer, notamment Safari, et on risque des problèmes de cohérence des couleurs entre les couleurs CSS (pour lesquelles le navigateur appliquera le profil système) et les couleurs des images (pour lesquelles le navigateur appliquera le profil de l'image s'il est renseigné, et donc un #CCCCCC ne donnera pas le même rendu entre couleurs CSS et images si le navigateur gère la colorimétrie). Pour faire simple, on peut utiliser smush.it, qui supprime les métadonnées sur les profils colorimétrique et le gamma.