{"id":544,"date":"2012-03-28T14:43:56","date_gmt":"2012-03-28T14:43:56","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=544"},"modified":"2012-03-28T14:47:49","modified_gmt":"2012-03-28T14:47:49","slug":"image-colors-render-differently-browsers","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/image-colors-render-differently-browsers\/","title":{"rendered":"Image colors render differently in various browsers"},"content":{"rendered":"

I ran into this issue today, specifically with a 24-bit transparent PNG, saved via Photoshop's "Save for Web" feature.<\/p>\n

The name "Save for Web" should imply a foolproof export of an image, using color profiles, headers, formats, etc that render consistently across all browsers.<\/p>\n

This wasn't the case, at least within my Photo Shop CS3 (yes, I'm behind) configuration.<\/p>\n

The issue was that Photoshop was converting my PNG image to sRGB. What is sRGB? I have no clue, but Firefox apparently doesn't like it.<\/p>\n

While IE and webkit browsers rendered the colors as sampled in Photoshop, Firefox used a slightly "darker" version.<\/p>\n

I suppose I can't blame Firefox without any hard evidence, it could actually be IE and webkit browsers that are doing it wrong.<\/p>\n

In either case, if you are having the same issue, in the Save For Web dialog, note the little "Right Arrow" button next to the preset dropdown. There is an option to "Convert to sRGB".  You may want to turn this option off.<\/p>\n

Also bear in mind, this may only apply to PNG images. The same, opposite, or something entirely different may apply for other image formats.<\/p>\n","protected":false},"excerpt":{"rendered":"

I ran into this issue today, specifically with a 24-bit transparent PNG, saved via Photoshop's "Save for Web" feature. The name "Save for Web" should…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[77,12],"tags":[154,163,162],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/544"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=544"}],"version-history":[{"count":4,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/544\/revisions"}],"predecessor-version":[{"id":548,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/544\/revisions\/548"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}