{"id":111,"date":"2012-04-15T12:58:56","date_gmt":"2012-04-15T11:58:56","guid":{"rendered":"http:\/\/www.escapades-photographiques.ch\/Site\/blog\/?p=111"},"modified":"2014-03-15T09:29:07","modified_gmt":"2014-03-15T08:29:07","slug":"gestion-des-couleurs-des-navigateurs-web","status":"publish","type":"post","link":"https:\/\/www.escapades-photographiques.ch\/Site\/blog\/2012\/technique\/gestion-des-couleurs-des-navigateurs-web\/","title":{"rendered":"Gestion des couleurs avec les navigateurs Web"},"content":{"rendered":"<p style=\"text-align: left;\"><strong><em>La situation sur le front de la gestion des couleurs avec les navigateurs Web a \u00e9volu\u00e9. <span style=\"text-decoration: underline;\">Cet article n&rsquo;est plus \u00e0 jour<\/span>. Suivez ce\u00a0<a href=\"\/Site\/blog\/2013\/technique\/gestion-des-couleurs-des-navigateurs-web-update\" target=\"_blank\">lien<\/a> pour lire le nouvel article actualis\u00e9.<\/em><\/strong><\/p>\n<p style=\"text-align: left;\">Un des aspects important lorsque l&rsquo;on pr\u00e9sente ses photos en couleur sur Internet c&rsquo;est entre autre que l&rsquo;internaute qui visite le site soit en mesure de voir les couleurs telles qu&rsquo;elles ont \u00e9t\u00e9 d\u00e9finies par le photographe. Cela suppose que l&rsquo;internaute en question ait calibr\u00e9 son \u00e9cran mais cela ne suffit malheureusement pas. Je vous propose de faire le point sur les navigateurs capables ou non de la gestion des couleurs. La situation n&rsquo;est pas simple car certains navigateurs actuels ne couvrent qu&rsquo;une partie des fonctionnalit\u00e9s. Je pr\u00e9cise que je pr\u00e9sente ici la situation sous Windows.<\/p>\n<h3 style=\"text-align: left;\">Navigateurs supportant compl\u00e8tement la gestion des couleurs<\/h3>\n<h5 style=\"text-align: left;\"><a href=\"http:\/\/www.mozilla.org\/fr\/firefox\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-full wp-image-113\" title=\"Logo Firefox\" alt=\"\" src=\"\/Site\/blog\/..\/blog.uploads\/2012\/04\/firefox1.jpg\" width=\"20\" height=\"21\" \/><\/a>\u00a0<span style=\"color: #000000;\"> <a title=\"Lien Firefox\" href=\"http:\/\/www.mozilla.org\/fr\/firefox\" target=\"_blank\"><span style=\"color: #000000;\">Mozilla Firefox<\/span><\/a><\/span><\/h5>\n<ul style=\"text-align: left;\">\n<li>supporte par d\u00e9faut la prise en charge des profils ICC incorpor\u00e9s dans les images (pour activer cette possibilit\u00e9, tapez <em>about:config<\/em> dans le champ de navigation puis mettre la variable <a title=\"gfx.color_management.mode documentation\" href=\"http:\/\/kb.mozillazine.org\/Gfx.color_management.enabled\" target=\"_blank\">gfx.color_management.mode<\/a> \u00e0 la valeur 2),<\/li>\n<li>supporte par d\u00e9faut la prise en charge du profil d&rsquo;\u00e9cran d\u00e9fini par le syst\u00e8me dans le panneau de configuration-&gt;gestion des couleurs,<\/li>\n<li><span style=\"color: #ff0000;\">n&rsquo;assume pas<\/span> par d\u00e9faut le profil sRGB pour afficher une image si aucun profil de couleur n&rsquo;est incorpor\u00e9 \u00e0 l&rsquo;image (pour activer cette possibilit\u00e9, tapez <em>about:config<\/em> dans le champ de navigation puis mettre la variable <a title=\"gfx.color_management.mode documentation\" href=\"http:\/\/kb.mozillazine.org\/Gfx.color_management.enabled\" target=\"_blank\">gfx.color_management.mode<\/a> \u00e0 la valeur 1),<\/li>\n<li>pour changer le mode de rendu (r\u00e9serv\u00e9 \u00e0 ceux qui comprennent ce qu&rsquo;ils font): tapez <em>about:config<\/em> dans le champ de navigation puis mettre la variable <a title=\"gfx.color_management.rendering_intent documentation\" href=\"http:\/\/kb.mozillazine.org\/Gfx.color_management.rendering_intent\" target=\"_blank\">gfx.color management.rendering_intent<\/a> \u00e0 la valeur souhait\u00e9e.<\/li>\n<\/ul>\n<h5 style=\"text-align: left;\"><a href=\"http:\/\/www.apple.com\/fr\/safari\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-full wp-image-114\" title=\"Logo Safari\" alt=\"\" src=\"\/Site\/blog\/..\/blog.uploads\/2012\/04\/safari.jpg\" width=\"19\" height=\"21\" \/><\/a>\u00a0 <span style=\"color: #000000;\"><a title=\"Lien safari\" href=\"http:\/\/www.apple.com\/fr\/safari\" target=\"_blank\"><span style=\"color: #000000;\">Apple Safari<\/span><\/a><\/span><\/h5>\n<ul style=\"text-align: left;\">\n<li>supporte par d\u00e9faut la prise en charge des profils ICC incorpor\u00e9s dans les images,<\/li>\n<li>supporte par d\u00e9faut la prise en charge du profil d&rsquo;\u00e9cran d\u00e9fini par le syst\u00e8me dans le panneau de configuration-&gt;gestion des couleurs,<\/li>\n<li><span style=\"color: #ff0000;\">n&rsquo;assume<\/span><span style=\"color: #ff0000;\"> pas<\/span> par d\u00e9faut le profil sRGB pour afficher une image si aucun profil de couleur n&rsquo;est incorpor\u00e9 \u00e0 l&rsquo;image.<\/li>\n<\/ul>\n<h3 style=\"text-align: left;\">Navigateurs supportant partiellement la gestion des couleurs<\/h3>\n<h5 style=\"text-align: left;\"><a href=\"http:\/\/www.google.com\/chrome\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-full wp-image-115\" title=\"Logo Chrome\" alt=\"\" src=\"\/Site\/blog\/..\/blog.uploads\/2012\/04\/chrome.jpg\" width=\"21\" height=\"21\" \/><\/a>\u00a0 <span style=\"color: #000000;\"><a title=\"Lien Chrome\" href=\"http:\/\/www.google.com\/chrome\" target=\"_blank\"><span style=\"color: #000000;\">Google Chrome<\/span><\/a><\/span><\/h5>\n<ul style=\"text-align: left;\">\n<li><span style=\"color: #ff0000;\">ne supporte pas<\/span> la prise en charge des profils ICC incorpor\u00e9s dans les images,<\/li>\n<li><span style=\"color: #000000;\">ne supporte pas par d\u00e9faut la<\/span> prise en charge du profil d&rsquo;\u00e9cran d\u00e9fini par le syst\u00e8me dans le panneau de configuration-&gt;gestion des couleurs. Pour activer cette possibilit\u00e9, lancer Chrome avec l&rsquo;option:\n<pre><em>chrome.exe --enable-monitor-profile<\/em><\/pre>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 30px; text-align: left;\">\u00a0 Voir l&rsquo;exemple ci-dessous:<\/p>\n<p style=\"text-align: left;\"><img decoding=\"async\" loading=\"lazy\" class=\" wp-image-117 alignnone\" style=\"margin-left: 50px; margin-right: 50px;\" title=\"Comment lancer Chrome sous Windows pour utiliser le profil de couleur de l'\u00e9cran\" alt=\"\" src=\"\/Site\/blog\/..\/blog.uploads\/2012\/04\/lancer_chrome.jpg\" width=\"452\" height=\"511\" srcset=\"https:\/\/www.escapades-photographiques.ch\/Site\/blog\/..\/blog.uploads\/2012\/04\/lancer_chrome.jpg 452w, https:\/\/www.escapades-photographiques.ch\/Site\/blog\/..\/blog.uploads\/2012\/04\/lancer_chrome-265x300.jpg 265w\" sizes=\"(max-width: 452px) 100vw, 452px\" \/><\/p>\n<p style=\"padding-left: 30px; text-align: left;\">Attention: \u00e0 chaque mise-\u00e0-jour de Chrome, l&rsquo;option rajout\u00e9e ci-dessus dans le raccourci va \u00eatre effac\u00e9e et il faudra la rajouter !<\/p>\n<ul style=\"text-align: left;\">\n<li>Chrome n&rsquo;interpr\u00e8te donc pas les profils de couleur qui sont inclus dans les images mais il assume par d\u00e9faut le profil de couleur sRGB et effectue la conversion vers l&rsquo;espace de couleur de l&rsquo;\u00e9cran seulement si vous le lancez avec l&rsquo;option ad\u00e9quate.<\/li>\n<\/ul>\n<h5 style=\"text-align: left;\"><a href=\"http:\/\/www.microsoft.com\/france\/windows\/internet-explorer\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-full wp-image-120\" title=\"Logo Internet Explorer\" alt=\"\" src=\"\/Site\/blog\/..\/blog.uploads\/2012\/04\/internet_explorer.jpg\" width=\"22\" height=\"21\" \/><\/a>\u00a0 <span style=\"color: #000000;\"><a title=\"Lien Internet Explorer\" href=\"http:\/\/www.microsoft.com\/france\/windows\/internet-explorer\" target=\"_blank\"><span style=\"color: #000000;\">Microsoft Internet Explorer 9<\/span><\/a><\/span><\/h5>\n<ul style=\"text-align: left;\">\n<li>supporte par d\u00e9faut la prise en charge des profils ICC incorpor\u00e9s dans les images,<\/li>\n<li style=\"color: #ff0000;\"><span style=\"color: #ff0000;\">ne supporte pas<\/span><span style=\"color: #000000;\"> la prise en charge du profil d&rsquo;\u00e9cran d\u00e9fini par le syst\u00e8me dans le panneau de configuration-&gt;gestion des couleurs,<\/span><\/li>\n<li>Internet Explorer 9 se comporte \u00e0 l&rsquo;oppos\u00e9 de Chrome: il interpr\u00e8te correctement les profils de couleurs incorpor\u00e9s dans les images mais il consid\u00e8re que l&rsquo;espace de couleur de destination est sRGB qui ne correspond pas n\u00e9cessairement \u00e0 celui de l&rsquo;\u00e9cran. Ceci est particuli\u00e8rement vrai avec les \u00e9crans arts graphiques qui supportent bien plus que sRGB (souvent presque AdobeRGB) et assumer par d\u00e9faut sRGB pour de tels \u00e9crans conduit syst\u00e9matiquement \u00e0 un affichage sur-satur\u00e9 des couleurs.<\/li>\n<\/ul>\n<h3 style=\"text-align: left;\">Navigateurs ne supportant pas la gestion des couleurs<\/h3>\n<h5 style=\"text-align: left;\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-full wp-image-120\" title=\"Logo Internet Explorer\" alt=\"\" src=\"\/Site\/blog\/..\/blog.uploads\/2012\/04\/internet_explorer.jpg\" width=\"22\" height=\"21\" \/>\u00a0 Anciennes versions d&rsquo;Internet Explorer (version 8 ou inf\u00e9rieures)<\/h5>\n<h5 style=\"text-align: left;\"><a href=\"http:\/\/www.opera.com\/browser\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-full wp-image-122\" title=\"Logo Opera\" alt=\"\" src=\"\/Site\/blog\/..\/blog.uploads\/2012\/04\/opera.jpg\" width=\"21\" height=\"21\" \/><\/a>\u00a0 <span style=\"color: #000000;\"><a title=\"Lien Opera\" href=\"http:\/\/www.opera.com\/browser\" target=\"_blank\"><span style=\"color: #000000;\">Opera<\/span><\/a><\/span><\/h5>\n<p style=\"text-align: left;\">Pour ces deux types de navigateurs, les images de la toile seront \u00e0 coup s\u00fbr syst\u00e9matiquement sur-satur\u00e9es avec des \u00e9crans supportant bien plus que sRGB (\u00e9crans d\u00e9di\u00e9s \u00e0 la photographie) et sous-satur\u00e9es sur des \u00e9crans supportant moins que sRGB (\u00e9crans de certains portables) et ceci <strong>m\u00eame si vous avez calibr\u00e9 votre \u00e9cran<\/strong>.<\/p>\n<h3 style=\"text-align: left;\">R\u00e9sum\u00e9<\/h3>\n<h5 style=\"text-align: left;\">Pour celui qui navigue:<strong><br \/>\n<\/strong><\/h5>\n<ul style=\"text-align: left;\">\n<li>calibrer votre \u00e9cran,<\/li>\n<li>utilisez un navigateur qui supporte la gestion des couleurs, c&rsquo;est-\u00e0-dire Firefox, Safari ou Chrome avec l&rsquo;option\u00a0<em>&#8211;enable-monitor-profile<\/em> activ\u00e9e en sachant que ce dernier navigateur n&rsquo;accepte que les images destin\u00e9es \u00e0 sRGB (largement majoritaires sur le Web). N&rsquo;utilisez Internet Explorer 9 que si l&rsquo;espace des couleurs de votre \u00e9cran est tr\u00e8s proche de sRGB.<\/li>\n<\/ul>\n<h5 style=\"text-align: left;\">Pour celui qui met des images sur la toile:<\/h5>\n<ul style=\"text-align: left;\">\n<li>n&rsquo;utilisez que le profil de destination sRGB pour pr\u00e9parer les images que vous placez sur la toile,<\/li>\n<li>incorporer le profil sRGB dans vos images si vous voulez qu&rsquo;elles s&rsquo;affichent correctement sous Firefox et Safari (augmente la taille des images de 3\u00a0Koctets environ). A noter que certains CMS effacent ces profils en \u00ab\u00a0upload\u00a0\u00bb&#8230;<\/li>\n<li>n&rsquo;utilisez pas Flash pour afficher vos images sur la toile car \u00e0 ma connaissance il n&rsquo;y a pas de gestion des couleurs int\u00e9gr\u00e9e \u00e0 Flash et cela court-circuite la gestion des couleurs des navigateurs qui la supportent !<\/li>\n<\/ul>\n<h3 style=\"text-align: left;\">Images tests<\/h3>\n<h5 style=\"text-align: left;\">Image du Mustang avec profil sRGB standard<\/h5>\n<p style=\"text-align: left;\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-125\" title=\"Image test avec profil sRGB\" alt=\"\" src=\"\/Site\/blog\/..\/blog.uploads\/2012\/05\/034_2011-10-27_5DmII.jpg\" width=\"678\" height=\"452\" \/><\/p>\n<h5 style=\"text-align: left;\">Image du Mustang avec profil\u00a0\u00ab modifi\u00e9 \u00bb: rouge-&gt;bleu, bleu-&gt;vert, etc.<\/h5>\n<p style=\"text-align: left;\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-126\" title=\"Image test avec profil de couleur modifi\u00e9\" alt=\"\" src=\"\/Site\/blog\/..\/blog.uploads\/2012\/05\/034_2011-10-27_5DmII_icc_modified.jpg\" width=\"678\" height=\"452\" \/><\/p>\n<p style=\"text-align: left;\">Cette derni\u00e8re image s&rsquo;affiche normalement (comme la premi\u00e8re) sur un navigateur qui interpr\u00e8te correctement les profils de couleur. Attention toutefois, on ne peut pas tester ici si le navigateur utilise correctement le profil de couleur de l&rsquo;\u00e9cran: IE9 passera ce test sans que \u00e7a soit pour autant correct surtout avec un \u00e9cran dont la gamme des couleurs est \u00e9loign\u00e9 de sRGB comme ceux destin\u00e9s \u00e0 la photographie. Dans ce cas, seul votre \u0153il vous permettra de tester si l&rsquo;image affich\u00e9e ci-dessus est ok en la comparant avec la m\u00eame image sauv\u00e9e sur votre disque et correctement visualis\u00e9e avec un logiciel d&rsquo;\u00e9dition d&rsquo;images qui se respecte (Gimp, IrfanView avec gestion des couleurs activ\u00e9e, Photoshop, etc.).<\/p>\n<p style=\"text-align: left;\">Chrome ne passera pas ce test m\u00eame avec l&rsquo;option <em>&#8211;enable-monitor-profile<\/em> activ\u00e9e qui lui permet cependant d&rsquo;afficher correctement la plupart des images du Web car celles-ci sont g\u00e9n\u00e9ralement destin\u00e9es \u00e0 l&rsquo;espace de couleur sRGB qu&rsquo;il assume par d\u00e9faut.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La situation sur le front de la gestion des couleurs avec les navigateurs Web a \u00e9volu\u00e9. Cet article n&rsquo;est plus \u00e0 jour. Suivez ce\u00a0lien pour lire le nouvel article actualis\u00e9. Un des aspects important lorsque l&rsquo;on pr\u00e9sente ses photos en couleur sur Internet c&rsquo;est entre autre que l&rsquo;internaute qui visite le site soit en mesure <a href='https:\/\/www.escapades-photographiques.ch\/Site\/blog\/2012\/technique\/gestion-des-couleurs-des-navigateurs-web\/' class='excerpt-more'>[&#8230;]<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[32,29,30,28,31,33],"_links":{"self":[{"href":"https:\/\/www.escapades-photographiques.ch\/Site\/blog\/wp-json\/wp\/v2\/posts\/111"}],"collection":[{"href":"https:\/\/www.escapades-photographiques.ch\/Site\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.escapades-photographiques.ch\/Site\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.escapades-photographiques.ch\/Site\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.escapades-photographiques.ch\/Site\/blog\/wp-json\/wp\/v2\/comments?post=111"}],"version-history":[{"count":82,"href":"https:\/\/www.escapades-photographiques.ch\/Site\/blog\/wp-json\/wp\/v2\/posts\/111\/revisions"}],"predecessor-version":[{"id":2013,"href":"https:\/\/www.escapades-photographiques.ch\/Site\/blog\/wp-json\/wp\/v2\/posts\/111\/revisions\/2013"}],"wp:attachment":[{"href":"https:\/\/www.escapades-photographiques.ch\/Site\/blog\/wp-json\/wp\/v2\/media?parent=111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.escapades-photographiques.ch\/Site\/blog\/wp-json\/wp\/v2\/categories?post=111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.escapades-photographiques.ch\/Site\/blog\/wp-json\/wp\/v2\/tags?post=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}