color correction for images in Firefox 3.5

Back in Firefox 3, we introduced support for color profiles in tagged images, but it was disabled by default. In Firefox 3.5 we were able to make the color correction process about 5x faster than it was in Firefox 3 so we’ve enabled support for color correction for tagged images.

Most images on the web are untagged. If you don’t know the difference between tagged images and untagged images the odds are good are you won’t notice this change. However, we suggest that you read on to learn about what it might mean for you if you want to include them and how future Firefox releases might change the interactions between CSS colors and images.

What’s a color profile?

People who spend a lot of time taking photographs or any kind of high-resolution color printing will understand that many output devices – LCDs, CRTs, paper etc – all have very different interpretations of what various colors mean. For example, uncorrected red will look very different on an LCD vs. a CRT. You can see this if you set up two very different monitors next to each other and the operating system doesn’t do color correction – colors will look more washed out in one of them vs. the other.

JPG and PNG images both have support for color profiles. These color profiles allow Firefox to take colors in the image and translate them into colors that are independent of any particular device.

While images contain color profiles it’s also important to note that output devices like monitors also have color profiles. As an example an output device may be better at displaying reds than blues. When you’re getting ready to show something that’s “red” on that device it might need to be converted from the neutral #ff0000 value to #f40301 in order to show up as red on the screen.

What this means is that there are actually two conversions that take place with color profiles. The first is to take the original color information in the image and, using the color profile, convert it into a device-independent color space. Then once it’s in that independent space you convert it again using the output device’s color profile to get it ready to display on the output device.

So what about CSS colors?

It’s important to understand how color profiles work and how they are converted to properly understand how CSS interacts with these color spaces.

In Firefox 3.5 we consider CSS colors to already be in the device output’s color space. Another way of saying this is that CSS colors are not in the neutral color space and are not converted into the output device like tagged images are.

What this means is that if you have a tagged image where a color is expected to match the CSS that’s right next to it, it won’t. Or at least it’s likely that it won’t on some output device – maybe not the one that you happen to be using for development. Remember that different output devices have different color profiles. Here’s an example of what that looks like:

In Firefox 3, this will look like one contiguous block of purple. In Firefox 3.5 and Safari you will notice that there’s a purple box within a purple box (unless your system profile is sRGB.) This is because the image is color corrected while the surrounding CSS is not.

This is where the statement about the future comes in. In a future release of Firefox we are likely to make it possible for people to turn on color correction for tagged images and CSS. You can test this setting today by changing the pref listed on the page on color correction on the Mozilla Developer Center to “Full color management.” In that case untagged images should continue to work as we will be rendering both CSS and untagged images in the sRGB color space.

Image support and tools

PNG’s can be tagged in three different ways. First they can have an iCCP chunk that contains the associated ICC profile. Second they can be explicitly tagged as sRGB using a sRGB chunk. Finally, they can contain gAMA and cHRM chunks that describe the image’s gamma and chromaticies. Using any of thse methods will cause Firefox to color correct the image.

You can remove all of the color correction chunks resulting in an untagged image using pngcrush:

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png

Alternatively, you can use TweakPNG and delete the gAMA, cHRM, iCCP and sRGB chunks by hand.


156 comments

  1. Dan

    It looks like a contigious block of purple to me in a 3.5 build, so I’m guessing my system profile is sRGB as you say? Is this equivalent to not having a system profile?

    June 17th, 2009 at 17:37

  2. Rob Russell

    Same here. Any links for how I can set my colour profile?

    While we’re on the image subject, when is Firefox on Linux going to scale images nicely like it does on Windows?

    June 17th, 2009 at 18:04

  3. Jeff Muizelaar

    Yes, sRGB is used if you do not have a system profile or your profile is bogus.

    June 17th, 2009 at 19:14

  4. Herohtar

    Ditto on the contiguous purple block in 3.5

    June 17th, 2009 at 19:20

  5. Gordon P. Hemsley

    I, too, have a contiguous purple block. (Mostly. I think I can see the line at certain angles of viewing my monitor. Or I’m imagining it. Can’t be sure.)

    However, I’ve had gfx.color_management.mode set to 1 since the Firefox 3.0 betas, so it overrides the 3.5 default of 2. (This is detailed in the MDC article.) I assume that has something to do with it?

    June 17th, 2009 at 21:45

  6. Christopher Blizzard

    @Gordon – If you’ve set the color management mode to 1 then it’s correcting the CSS as well as the image, so it will look contiguous. The setting in Firefox 3 was 0, in 3.5 it’s 2. Eventually we’ll probably switch it to 1.

    And on your blog you asked about video editing software using HTML5 video and the answer is yes. There’s some work going on at wikimedia to build something like that. Also check out pad.ma which has a lot of online archives of video but has an excellent HTML5-based scrubber interface that lets you seek around in video and build clips. It’s a start of an editor, I think.

    June 17th, 2009 at 22:11

  7. Erik Bruchez

    For the record I do have a non-contiguous purple block on OS X / MacBook Pro. Good job!

    -Erik

    June 17th, 2009 at 22:52

  8. Jeff Walden

    “In a future release of Firefox we are likely to make it possible for people to turn on color correction for tagged images and CSS.”

    Was “tagged” a typo of “untagged”, I think?

    June 17th, 2009 at 23:06

  9. […] 原文地址:color correction for images in Firefox 3.5 系列地址:颠覆网络35天 […]

    June 18th, 2009 at 21:57

  10. Kane

    How Can I Disable This Feature ?

    June 20th, 2009 at 17:05

  11. […] faster than color managing everything and (b) makes this setting the default. See here for more: color correction for images in Firefox 3.5 at hacks.mozilla.org […]

    June 20th, 2009 at 23:39

  12. […] Candidate of Firefox 3.5, and many of us are, it’s worth looking into the posts at the Mozilla Hacks site to get to know how some of the most powerful new features in the browser work. There are over […]

    June 22nd, 2009 at 13:02

  13. […] Candidate of Firefox 3.5, and many of us are, it’s worth looking into the posts at the Mozilla Hacks site to get to know how some of the most powerful new features in the browser work. There are more […]

    June 23rd, 2009 at 04:10

  14. […] Colour profiles are now a enabled for images. Not for CSS colours though. It’s not like any other browser does it anyway… So it’s still useless for website designs… http://hacks.mozilla.org/2009/06/color-correction/ […]

    June 26th, 2009 at 00:37

  15. […] to appear incorrectly. I will not explain in detail about color profiles but you can read about it here. I am going to tell you how to fix […]

    June 27th, 2009 at 07:28

  16. VeryStrange

    My site had a photo with an added border colored hex 303030 (rgb 48,48,48). Now FF 3.5 renders it as hex 333333 (rgb 51, 51, 51). FF 3 did not have this problem nor does IE7. How do I fix what 3.5 broke? It seems the developers didn’t consider this situation?
    Thanks

    June 28th, 2009 at 19:52

  17. […] HTML5 та позамережеве збереження програм, текст <canvas>, профілі ICC та трансформації […]

    June 30th, 2009 at 07:32

  18. […] storage HTML5 e supporto alla memorizzazione dei dati in modalità non in linea, testo con i , profili ICC e trasformazioni […]

    June 30th, 2009 at 08:25

  19. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 08:32

  20. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 08:59

  21. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 09:08

  22. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 09:48

  23. […] le stockage local HTML5 et le stockage hors-ligne d’application, le texte <canvas>, les profils ICC et les transformations […]

    June 30th, 2009 at 09:48

  24. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 10:29

  25. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 11:06

  26. […] almacenamiento local de HTML5 de aplicaciones en modo sin conexión, texto <canvas>, perfiles ICC, y transformaciones […]

    June 30th, 2009 at 11:13

  27. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 11:43

  28. […] lokale und Offline-Speicherung für Anwendungen nach HTML5, <Canvas>-Text, ICC-Farbprofile und […]

    June 30th, 2009 at 11:52

  29. […] 查詢選擇器、HTML5 本地端儲存及離線應用程式儲存、<canvas> 文字、ICC 設定檔,以及 SVG […]

    June 30th, 2009 at 12:02

  30. […] Photoshop and post, if tagged with an ICC profile and saved as jpg’s or png’s, can be color corrected by FF 3.5. Now all I need that new monitor I’ve been eyeing […]

    June 30th, 2009 at 12:07

  31. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 12:15

  32. […] lokale und Offline-Speicherung für Anwendungen nach HTML5, <Canvas>-Text, ICC-Farbprofile und […]

    June 30th, 2009 at 12:28

  33. […] almacenamiento local de HTML5 de aplicaciones en modo sin conexión, texto <canvas>, perfiles ICC, y transformaciones […]

    June 30th, 2009 at 12:29

  34. […] almacenamiento local de HTML5 de aplicaciones en modo sin conexión, texto <canvas>, perfiles ICC, y transformaciones […]

    June 30th, 2009 at 12:42

  35. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 12:50

  36. […] e supporto alla memorizzazione dei dati in modalità non in linea, testo con i <canvas>, profili ICC e trasformazioni […]

    June 30th, 2009 at 13:06

  37. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 13:28

  38. […] query selectors, armazenamento local HTML5 e aplicações de armazenamento offline, texto, perfis de ICC e SVG […]

    June 30th, 2009 at 13:29

  39. […] almacenamiento local de HTML5 de aplicaciones en modo sin conexión, texto <canvas>, perfiles ICC, y transformaciones […]

    June 30th, 2009 at 13:30

  40. […] almacenamiento local de HTML5 de aplicaciones en modo sin conexión, texto <canvas>, perfiles ICC, y transformaciones […]

    June 30th, 2009 at 14:21

  41. […] almacenamiento local de HTML5 de aplicaciones en modo sin conexión, texto <canvas>, perfiles ICC, y transformaciones SVG.) Mejor […]

    June 30th, 2009 at 15:02

  42. […] e supporto alla memorizzazione dei dati in modalità non in linea, testo con i <canvas>, profili ICC e trasformazioni […]

    June 30th, 2009 at 15:32

  43. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 16:03

  44. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 16:31

  45. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 17:12

  46. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 18:09

  47. […] 查詢選擇器、HTML5 本地端儲存及離線應用程式儲存、<canvas> 文字、ICC 設定檔,以及 SVG 變形特效。 Categories: OpenSUSE Linux, SuSE Linux 相關應用, […]

    June 30th, 2009 at 18:58

  48. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 18:58

  49. […] supporto alla memorizzazione dei dati in locale e in modalit

    June 30th, 2009 at 19:30

  50. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 19:33

  51. […] javascript query selectors, HTML5 offline data storage for applications, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 20:38

  52. tomk

    so in ffox 3.5 i see a contiguous purple rectangle, but when i open this page in safari 4.0.1, i see the darker purple block. so, it’s not my system profile. i set the gfx.colour_management to 2, (i had it on 1) and still no difference.

    help?

    June 30th, 2009 at 20:58

  53. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 22:23

  54. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 22:58

  55. […] storage HTML5 e supporto alla memorizzazione dei dati in modalità non in linea, testo con i , profili ICC e trasformazioni […]

    June 30th, 2009 at 23:00

  56. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    June 30th, 2009 at 23:35

  57. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    July 1st, 2009 at 01:09

  58. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    July 1st, 2009 at 01:11

  59. […] selectors, lo storage locale di HTML5 e storage offline delle applicazioni, <canvas> text, ICC profiles, e […]

    July 1st, 2009 at 02:17

  60. Fufu

    Firefox 3.5 does not recognize any more ICC v4 profiles, even setting color management to 2. 3.0 version could do it, there is no reason to remove this feature.

    You can check it here: http://www.color.org/version4html.xalter

    Downgrading or Safari.

    July 1st, 2009 at 02:21

  61. […] le stockage local HTML5 et le stockage hors-ligne d’application, le texte <canvas>, les profils ICC et les transformations […]

    July 1st, 2009 at 03:05

  62. […] properties, JavaScript query selectors, HTML5 local storage and offline application storage, text, ICC profiles, and SVG transforms. […]

    July 1st, 2009 at 03:48

  63. […] 查詢選擇器、HTML5 本地端儲存及離線應用程式儲存、<canvas> 文字、ICC 設定檔,以及 SVG […]

    July 1st, 2009 at 05:33

  64. […] e supporto alla memorizzazione dei dati in modalità non in linea, testo con i <canvas>, profili ICC e trasformazioni […]

    July 1st, 2009 at 06:17

  65. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    July 1st, 2009 at 06:31

  66. […] application storage, <canvas> text, ICC profiles, and SVG […]

    July 1st, 2009 at 06:53

  67. […] almacenamiento local de HTML5 de aplicaciones en modo sin conexión, texto <canvas>, perfiles ICC, y transformaciones […]

    July 1st, 2009 at 08:48

  68. […] 查詢選擇器、HTML5 本地端儲存及離線應用程式儲存、<canvas> 文字、 ICC設定檔,以及 SVG […]

    July 1st, 2009 at 09:06

  69. […] almacenamiento local de HTML5 de aplicaciones en modo sin conexión, texto <canvas>, perfiles ICC, y transformaciones […]

    July 1st, 2009 at 09:52

  70. […] supporto alla memorizzazione dei dati in locale e in modalità non in linea, profili colore ICC e trasformazioni SVG; – un motore JavaScript tutto nuovo (TraceMonkey) che, grazie alla […]

    July 1st, 2009 at 11:12

  71. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    July 1st, 2009 at 12:20

  72. tomk

    just after i posted my comment i realised i’d have to quit and restart ffox for the changes to take effect

    *bangs head*

    it works now, although yeah as fufu says only supporting ICC v2, unlike safari.

    cheers

    July 1st, 2009 at 17:47

  73. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    July 1st, 2009 at 19:15

  74. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    July 1st, 2009 at 19:22

  75. […] almacenamiento local de HTML5 de aplicaciones en modo sin conexión, texto <canvas>, perfiles ICC, y transformaciones […]

    July 1st, 2009 at 21:27

  76. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    July 1st, 2009 at 22:29

  77. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    July 1st, 2009 at 22:45

  78. […] lokale und Offline-Speicherung für Anwendungen nach HTML5, <Canvas>-Text, ICC-Farbprofile und […]

    July 1st, 2009 at 23:40

  79. […] le stockage local HTML5 et le stockage hors-ligne d’application, le texte <canvas>, les profils ICC et les transformations […]

    July 2nd, 2009 at 04:59

  80. […] le stockage local HTML5 et le stockage hors-ligne d’application, le texte <canvas>, les profils ICC et les transformations […]

    July 2nd, 2009 at 07:09

  81. […] image is correctly tagged). Basically images will look the same as in Photoshop. Read more here: http://hacks.mozilla.org/2009/06/color-correction/ This means you are more likely to view images here on retouchpro correctly (as people sometimes […]

    July 2nd, 2009 at 07:59

  82. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    July 2nd, 2009 at 11:09

  83. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    July 2nd, 2009 at 21:35

  84. […] e supporto alla memorizzazione dei dati in modalità non in linea, testo con i <canvas>, profili ICC e trasformazioni […]

    July 3rd, 2009 at 02:17

  85. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    July 3rd, 2009 at 05:08

  86. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    July 3rd, 2009 at 11:00

  87. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    July 4th, 2009 at 12:00

  88. JH

    Need to color-match CSS colors to colors in JPEG images?

    If you do, a JPEG equivalent of your helpful pngcrush example is to use jpegtran to strip color profiles. i.e.:

    jpegtran -optimize -outfile out.jpg in.jpg

    jpegtran is part of libjpeg, the standard JPEG reference library, so chances are it is already installed on Linux/Mac machines.

    If it isn’t you can install via your package manager, or else source is here (very easy/fast compile from source on my Mac): http://www.ijg.org/

    Or use google and you can find precompiled binaries ready to run, i.e. for Windows here: http://sylvana.net/jpegcrop/jpegtran/

    July 4th, 2009 at 18:57

  89. […] All browsers with the exception of Safari and Firefox 3 (with modifications) were not color managed. That meant only pictures saved in sRGB color profile will display close to the intended colors. Images tagged with any other color profiles will render incorrectly resulting often in muted colors. In Firefox 3, users could turn on color management at the expense of a performance hit. Firefox 3.5 now has color management turned on by default as they have improved performance 5x faste… […]

    July 4th, 2009 at 20:52

  90. […] Mozilla Blog […]

    July 4th, 2009 at 21:23

  91. Color Correction for Images in Firefox 3.5…

    You know how Safari has a wonderful little habit of making your PNGs not match their CSS backgrounds? The whole color profile thing? Well, now Firefox 3.5 has it too, so the problem audience just became a whole lot bigger. Time to strip those color …

    July 5th, 2009 at 07:53

  92. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    July 5th, 2009 at 11:17

  93. Jon

    Wouldn’t this also be an issue if you’re using any wide-gamut monitor, regardless of whether the image is tagged or not? Normal web page, everything is sRGB. But on your monitor, the CSS colors will come out screwed up, because they won’t be converted to your wide-gamut color space as if they were sRGB, but the images will be converted to your monitor’s color space?

    Firefox with color management enabled assumes untagged images are sRGB, which is the right thing to do. So Firefox is the only way to browse the web and not have 99% of the your colors F’ed up and super saturated. (Every nice 24 inch is 110% gamut now, which means everything except photoshop and Firefox is completely distorted).

    I hate the new Wide Gamut displays. I’ve got two monitors, one normal, and one wide-gamut, and it’s almost unusable. I have to open Firefox on one monitor and an un-managed browser like Chrome on the other to get the colors to match. Progress.

    July 5th, 2009 at 13:40

  94. […] almacenamiento local de HTML5 de aplicaciones en modo sin conexión, texto <canvas>, perfiles ICC, y transformaciones […]

    July 5th, 2009 at 17:37

  95. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    July 5th, 2009 at 23:27

  96. […] HTML5 и хранилище оффлайновых приложений, текст <canvas>, ICC-профили и […]

    July 6th, 2009 at 01:32

  97. prem ypi

    feature is cool in the sense of its innovation, but at times developer gives sepia or retro look to the images. These images, though looking poor, don’t need to be re corrected…

    July 6th, 2009 at 23:34

  98. Nik

    So lets say I am not a techie (not the case, but let’s assume it) and have no clue about gamuts, profiles, etc. But I happened to like FireFox over the rest (not quite true since inception of Chrome, but anyway), happened to do lots of photographs including using PhotoShop and all I know is how to upload photos to the web. Typical scenario for semi-pro photographer (do not assume real photographer knows anything about OS systems, color gamuts, profiles, etc, but they sure do know how to make living out of their main skill).

    Now that I got to use FireFox 3.5 in default configuration – all my photos essentially screwed, so all I can do is go back to beloved IE. Like this proposal? This is what happens in reality. Oh, no, do not suggest them to go about:config – this just sounds as scary as hell. Let alone reading technical docs like this very page.

    So whoever decided to make this revolution in color profiles, please, do not forget poor professionals who never will know what killed them. People will go crazy seeing their lovely images in FF3.5. Give them, general population, way to get the same images they had before. Leave your revolution to those who like just that.

    No, I am not a pity man, I have “corrected” my FF in Fedora 11 to show what I used to see, and I could probably discuss what are advantages of Wide Gamut vs Adobe sRGB or whatever. But the truth is: you have just betrayed majority of your regular FF users.

    FF is not for “pros”, it is for all the real people, so keep it for them.

    Alas.

    July 8th, 2009 at 23:33

  99. iconoclast

    I’m using vista, FF 3.5, IE and I just installed Safari. None of them showed different purple blocks.

    In FF CM was turned on, and in Vista aRGB was set, however I did not set FF’s value for gfx.color_management.display_profile, which is a string: the absolute path of the icc profile you wish to use; if left empty it defaults to sRGB

    July 9th, 2009 at 16:04

  100. […] e propriedades, seletores de pedidos JavaScript, armazenagem offline HTML5, texto <canvas>, perfis ICC e transformações […]

    July 10th, 2009 at 00:06

  101. alex

    All my colour management settings are set to their defaults in FF3.5 yet I still see a contiguous purple rectangle. Not working for me I am afraid

    July 10th, 2009 at 07:25

  102. Jao

    This is a major disaster that 3.5 no longer supports v4 profiles. Most current display calibrators generate v4 profiles and so color management will NOT correctly work in 3.5 whatever you set. Useless! Again, 3.0 did this just fine. Why break this? Very disappointing. This needs to be fixed ASAP.

    July 10th, 2009 at 14:41

  103. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    July 11th, 2009 at 06:03

  104. Johan Fredrik Varen

    Seeing only one contiguous block of purple in FF3.5, I took a screenshot and inspected the RGB values of the block just to make sure I wasn’t color blind. However, does anyone know where the screenshot feature of the OS copies the RGB values from? If it’s from the screen buffer, is the content of this buffer in the independent color space or in a device readied color space?

    July 12th, 2009 at 03:10

  105. […] 其他功能:支持字体下载、CSS媒体查询、JavaScript查询选择器、HTML5本地存储和离线应用存储、“Canvas”文本、ICC属性、SVGa转换等。 […]

    July 12th, 2009 at 22:46

  106. […] consultadas: http://www.color.org http://hacks.mozilla.org/2009/06/color-correction/ […]

    July 13th, 2009 at 15:05

  107. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    July 14th, 2009 at 00:17

  108. […] color correction for images in Firefox 3.5 […]

    July 15th, 2009 at 14:25

  109. […] query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG […]

    July 16th, 2009 at 00:52

  110. […] 查詢選擇器、HTML5 本地端儲存及離線應用程式儲存、<canvas> 文字、ICC 設定檔,以及 SVG […]

    July 16th, 2009 at 12:54

  111. RJX

    I also agree with Jao, ICC Profile v. 4 is no longer supported. Heck the purple block image on this page used to work but now it doesn’t anymore. PLEASE fix Firefox to suppor ICC v. 4 profiles again. PLEASE

    July 17th, 2009 at 08:20

  112. […] в третьей версии в FireFox добавлена поддержка профилей изображений. В версии 3.5 процесс коррекции изображений ускорен в […]

    July 17th, 2009 at 11:12

  113. jeroen

    Isn’t this supposed to be a standards compliant browser?

    At the moment it is the only one where on several of my sites the gradient background no longer connects to the background color, white has turned to light shades of blue, etc.

    Even IE6 does better.

    Very disappointed.

    July 17th, 2009 at 13:59

  114. theo

    @Nik, @jeroen: I totally agree with you both.

    The new color management ‘features’ can have disastrous effects for website owners and can be a major pain in the *ss for less tech-savvy people.

    You almost got me switched to Google Chrome here!

    Writing a batch script now to remove all those color correction chunks from my PNG files…

    July 22nd, 2009 at 14:26

  115. […] almacenamiento local de HTML5 de aplicaciones en modo sin conexión, texto <canvas>, perfiles ICC, y transformaciones […]

    July 23rd, 2009 at 14:07

  116. Ron Hildebrand

    I’m a professional photographer, and shoot in sRGB. Each and every photograph on my site is in sRGB, and the majority sit on a color background (to accommodate irregular edges and shapes of various borders, matching an adjacent CSS color. So most images and graphics show the mismatch caused by your splendid “innovation”.

    Your suggestion above to “strip the color profile” is an absolute joke. There are hundreds of hours of work to work through every image on my site, open it in Photoshop, remove the color profile and resave it, optimized for quicker opening on the Web. That’s right, I can’t just strip the color profile, as each image is already optimized. This must all be done through Photoshop, and optimized again once the profile is stripped. And that’s only if there’s enough color information left after the initial optimization to resave and reoptimize without a degraded image resulting.

    If I leave it as is, every Firefox 3.5 visitor to my site will see a site with chunks of mis-matched CSS and jpg color, and just simply incorrectly displayed images. This major change in the way images are displayed now negatively affects the primary promotional tool for my business.

    July 27th, 2009 at 15:28

  117. Tama

    Well, everything above is basically gobbledygook. I’m trying to sell art on an art site, and as more people upload FF3.5, they are going to think my work SUCKS. Why couldn’t you make it so techies could turn whatever the hell this feature is ON instead of making all the rest of us try to turn it OFF? I, too, may have to resort to the dreaded IE.

    July 28th, 2009 at 10:55

  118. […] 原文地址:color correction for images in Firefox 3.5 系列地址:颠覆网络35天 […]

    August 2nd, 2009 at 21:58

  119. Gordon P. Hemsley

    I’d just like to note for the record that part of the problem people have been complaining about may have been fixed in Firefox 3.5.2.

    If not, I’m pretty sure it’s listed in the Known Issues section of the release notes (and has been since the beginning):
    http://www.mozilla.com/en-US/firefox/3.5.2/releasenotes/#issues

    August 3rd, 2009 at 14:42

  120. Tama

    I downloaded 3.5.2 beta last night and it worked like a charm – thank you.

    August 3rd, 2009 at 15:05

  121. Ron Hildebrand

    On August 3, 2009 at 2:42 pm, Gordon wrote:

    I’d just like to note for the record that part of the problem people have been complaining about may have been fixed in Firefox 3.5.2.

    If not, I’m pretty sure it’s listed in the Known Issues section of the release notes (and has been since the beginning)
    ______________________________________________________

    REPLY
    Yes, you will indeed find this as an issue–the article above is a response to the original listing of the issue. But 3.5.2 does not set color correction “off” as default and “on” as an option, which is the only way to handle this.

    Thanks to Firefox 3.5, I now have cluttered my site with warnings that the mis-matched colors Firefox 3.5 users now see is due to a change in the way CMS and RGB colors relate to each other when viewed with Firefox, and to see the site as intended, visitors should use any browser but Firefox 3.5 and later. Not a desirable workaround from either my nor, I’m sure, Mozilla’s viewpoint, but short of completely re-working my site, it’s the only solution until Mozilla sets color correction “off” as default.

    August 4th, 2009 at 15:23

  122. Mauro

    I’m using Firefox 3.5.2 and I see a contiguous block of purple. However, if I go to the following site (suggested by a user):
    http://www.color.org/version4html.xalter
    the result is that with FF3.5.2 I can see ICCv2 profile is supported (while ICCv4 isn’t), while with IE8 no ICC profiles are supported. So, in some way FF3.5.2 colour correction is working, but not on this page, that is supposed to show FF3.5.x capabilities!!

    Anyway, how to know if my system profile is sRGB or anything else? I’m on Windows XP x64 Edition and in my Display Properties I have a color profile for my monitor (Color Management tab of Advanced settings), however it is named with my monitor name and I can’t find a way to know what kind of profile it is.

    August 5th, 2009 at 00:23

  123. Lika

    This sucks! I upgraded to FF 3.5.2 last night. As a result I’m seeing nothing but mess all over the internet including some of my own sites where CSS colors and images are clashing.

    A few days ago I had a couple of people tell me they were using FF and my site colors looked off. I just told them it must be their monitor or graphics card because I too use FF and everything is fine. Of course before I said that I had friends check and it was ok for them too. Now, after upgrading myself, I see my visitors must have been using 3.5x as well. Thanks FF for making me look like an idiot.

    August 9th, 2009 at 12:07

  124. […] Wat links met meer informatie: http://hsivonen.iki.fi/png-gamma/ http://hacks.mozilla.org/2009/06/color-correction/ […]

    August 11th, 2009 at 04:11

  125. Anarkhya

    The new color management ‘features’ can have disastrous effects for website owners and can be a major pain in the *ss for less tech-savvy people.

    Thanks to Firefox 3.5, I now have cluttered my site with warnings that the mis-matched colors Firefox 3.5 users now see is due to a change in the way CMS and RGB colors relate to each other when viewed with Firefox.

    Each and every photograph on my site is in sRGB, and the majority sit on a color background (to accommodate irregular edges and shapes of various borders, matching an adjacent CSS color. So most images and graphics show the mismatch caused by your splendid “innovation”.

    I’m trying to sell art on an art site, and as more people upload FF3.5, they are going to think my work SUCKS. Why couldn’t you make it so techies could turn whatever the hell this feature is ON instead of making all the rest of us try to turn it OFF? I, too, may have to resort to the dreaded IE.

    —————————————-

    I definitely agree with these comments. all people involved with gfx, design, photography and css are going mad with the choice you made. I do believe that killing retrocompatibility is not a fair move. I mean rendering colors should be a decision formed by the artist not the browser.
    Correct me if I’m wrong but from what I see, my PNG images created with The Gimp were rendered properly before the 3.5, I mean what I saw in Gimp was what I saw in FireFox.
    Now, my PNG are translated with wrong colors (causing a break with css colors and css-design based on png transparency). I’m no real expert in this field, I judge from what I see, and what I see is that FireFox allows itself to translate my PNG colors into something else I didn’t choose.
    I have a name for this: corrupted display…

    We, website owners, can’t explain to every visitor that a special color feature has been released and you have to enter about:config, change the gfx color management bla bla bla if you want to see intended colors. We just can’t, this is not efficient. Please take this into consideration.

    Please!

    August 11th, 2009 at 08:06

  126. kyis

    On firefox 3.5 with a calibrated screen (color profile generated and updated regularly using a colorimetric probe)
    I do see 2 different purples. ^^

    August 17th, 2009 at 15:45

  127. Ric Grupe

    I assume this issue has been resolved.

    I compared a jpeg in photoshop CS4 side by side with one I had uploaded to SmugMug and see no difference using FF 3.5.2.

    August 18th, 2009 at 14:17

  128. Ron Hildebrand

    Ric Grupe wrote:

    I assume this issue has been resolved.

    I compared a jpeg in photoshop CS4 side by side with one I had uploaded to SmugMug and see no difference using FF 3.5.2.
    ___________________________________________________________
    REPLY
    I’m not sure how this actually tests the issue, Ric. CS4 will display your jpg with any embedded profile, and that’s what the new versions of FF do, too, so you will not see any difference between the images in your comparison, since you are not comparing matched CSS and RGB colors in your test.

    Browsers have been “profile blind” up until now, so matching a CSS color in html with the same color in a profiled (probably most often, sRGB) jpg image resulted in an on-screen match to the viewer. Now, with FF recognizing the profile by defualt (instead of supplying FF with profile recognition off by default), CSS and image colors will not match. You have to actually strip the profile from an image now to get a match between the same colors in CSS and RGB. For many web owners, this means either many, many hours of reworking affected images to strip RGB profiles, or having a crappy looking site when viewed with FF.

    Implementation of profile recoginition is a good thing. But introducing it with this feature on by default, instead of keeping it as an optional choice made by the user, blindsides site owners who have never had to deal with this issue. Firefox continues, it seems, to think this is no big deal, but to those of us who have spent hundreds of hours on sites that now look like crap thanks to this clumsy inplementation of profile recognition, it is.

    Ron Hildebrand

    August 19th, 2009 at 09:14

  129. jpn

    Color management still doesn’t work in FF 3.5.2 on my wide gamut, hardwarecalibrated NEC SpectraView 2690. Even with tagged Images colors are oversaturated. FF 3.0.x instead works fine.

    August 20th, 2009 at 22:29

  130. Massic

    I really don’t understand why this happened. I switched to Firefox from IE because it was straightforward and ran a low profile on my system. With the buggy new version releases and especially now with this color profile issue, I really have to wonder as to the direction that it’s developers are going in.

    I’m an artist by trade and while I do enjoy an opportunity to learn more about web development, I do not appreciate it when a formerly reliable piece of software has forced me to the issue by rendering my work unacceptable.

    August 22nd, 2009 at 09:45

  131. gvim

    Great thinking, Mozilla. As usual the tyrrany of the geek eating his own tail ends in disaster for all. The principle of KISS was long ago lost with Firefox developers who seem to be intent on imploding. Build a great browser to unseat M$ then trash it. Get serious and turn this stupid “feature” off by default. If you must have it on by default at least provide some decent menu item for non-geeks to disable rather than fiddling with about:config.

    August 23rd, 2009 at 06:29

  132. […] supporto alla memorizzazione dei dati in locale e in modalità non in linea, profili colore ICC e trasformazioni SVG; – un motore JavaScript tutto nuovo (TraceMonkey) che, grazie alla […]

    August 24th, 2009 at 11:27

  133. […] Posted by dscmblgltns on August 25, 2009 A reminder not to upgrade to Firefox 3.5 yet, as there are unresolved colour management issues. […]

    August 25th, 2009 at 08:56

  134. marco panichi

    i made a site for a customer and…terrible surprise! blue png header was darker (than the background) in his old mac+safari!

    and then I googled and find this article…good job

    but…this problem is really annoying…I will have to TweakPNG every image? nahhh…. :(

    August 27th, 2009 at 03:23

  135. ardarvin

    “Most images on the web are untagged. If you don’t know the difference between tagged images and untagged images the odds are good are you won’t notice this change.”

    Lies. I, like most people in this comment thread, knew nothing of color profiles before ff3.5 and now our sites look like garbage. Photoshop adds these tags to PNG and JPG images.

    Please PLEASE turn off color correction by default. I really don’t want to have to go through all my images and delete their color profiles (probably to have Photoshop just add them in again). This is such a bad “feature”.

    August 28th, 2009 at 15:46

  136. Marty

    I recently noticed many images were coming up with a green cast. I thought something was wrong with my monitor. Then I noticed that sometimes the thumbnail image looked ok but wen I clicked on the image the enlarged (jpg) image had a green cast. So this must be happening in the browser I say to myself. A google search pointed me to color management in 3.5.2 and now I am embroiled in a maze of acronyms – CSS, ICC, PCS etc – yikes – I just want pictures to display properly! So I turn off color management (set gfx.color_management.mode to 0) and things look ok now. I guess my monitor profile is not set correctly – but who has time to track that down??? Not that I am the sharpest blade in the drawer, but I’m guessing many users will be thinking it is time to buy a new monitor! Geez – Firefox is helping Dell sell monitors…

    August 28th, 2009 at 23:21

  137. Tama

    Well, although I THOUGHT 3.5.2 was going to do the trick, alas, I am still having over-saturated images. It’s better, but any image that is subtle looks horrible. I thought this was fixed.

    September 9th, 2009 at 00:51

  138. Peter

    Re: “In a future release of Firefox we are likely to make it possible for people to turn on color correction for (un)tagged images and CSS.”
    —————————————————————-
    If you haven’t figured out how to do this yet, you’re obvious not ready to have colour correction by default.
    If you think your colour correction is better, when you do figure this out, rather than making it ‘possible for people to turn on’, will you make it the default (as the main problem is the mismatching)? If so how soon can we expect this? In the meantime are you going to revert back until you’re actually ready to have colour correction by default? I’m just wondering if it’s worth wasting time now if you’re going to fix this very serious problem sometime soon.

    September 13th, 2009 at 18:19

  139. Patrick Alexander

    I’m not sure I understand all the dismay on this. Especially:

    “I mean rendering colors should be a decision formed by the artist not the browser.”

    Then Firefox 3.5 should be a good thing. Now, rendering colors is a decision formed by the artist. Earlier, rendering colors was a decision formed by the browser. Problems result when artists are used to having browsers ignore embedded color profiles and have edited images to get them to look good when the color profile is ignored… but have still maintained the embedded color profiles. The artist is sending mixed messages to any program that attempts to interpret the images. The artist created an image with an embedded color profile telling the program one thing, but the artist didn’t intend for the program to pay attention to that embedded color profile. Can we really blame programmers for not being able to create programs that can accurate interpret the artist’s intent? Earlier browsers didn’t even try!

    September 16th, 2009 at 17:54

  140. Fuki

    FF should render the same all sRGB images and all non-tagged images. And that’s the end of the problem! I’m not sure why it has not happened in the first place.

    September 19th, 2009 at 03:59

  141. Tama

    “Earlier browsers didn’t even try!”

    And earlier browsers didn’t make my images look like crap.

    Mozilla is way over-assuming the technical expertise of someone who may happen to know how to upload an image taken with a digital camera and possibly tweaked with some software. I still, after reading and trying like mad to understand what this is all about, am in the dark. Color profiles? sRGB? CSS? TweakPNG? I know the difference between RGB and CMYK and that’s about it.

    I like FF but please try to remember that LAYPEOPLE use this browser!!

    September 19th, 2009 at 20:55

  142. Fuki

    I was wrong. FF shouldn’t display equally all “sRGB” images and all non-tagged images. This would work if your environment is “sRGB”, but with wide-gamut LCD monitors that has changed…

    I use Windows Vista and have “Dell 2407WFP-HC” (the color gamut on this monitor almost matches “Adobe RGB” and is significantly wider than “sRGB”).

    So…

    I’ve just tested FF 3.5.3 with 4 images:
    -“sRGB” image with embedded profile
    -“sRGB” image without embedded profile
    -“Adobe RGB” image with embedded profile
    -“Adobe RGB” image without embedded profile

    I left “gfx.color_management.mode” on its default setting: 2.

    The results are:

    FF is displaying everything as it should!
    Images with profiles are displayed correctly (as in Photoshop).
    Images without profiles are displayed with distorted colors (as they should :) ). Even “sRGB” images are displayed with distorted colors because FF displays them in your monitors gamut and if you have some new wide-gamut LCD (like me) the images will be displayed according to your monitors gamut.

    The solution to the problem…

    All images SHOULD HAVE proper tags embedded! That’s it.
    If your image does not have proper ICC profile embedded, don’t cry to FF because colors don’t match on some monitors!
    Most (I think ALL) recent point-and-shoot cameras embed “sRGB” profile with the images so this wouldn’t be a problem. And if you’re a pro than you should have known better.

    BTW Good work Mozilla!

    September 20th, 2009 at 07:56

  143. Ron Hildebrand

    There’s still a major isue.

    RGB colors will not match up with CSS colors, as they would if turning profile recognition on or off was an option, with the option set to “off”, for the vast majority of casual Web visitors that know nothing about it. There are many of us that never bothered to strip the color profiles out of photographs, because it was an unnecessary extra step to do so.

    I have scads of sRGB images and graphics on my site mixed with CSS “matching” (at least they were matching at one time, Mozilla) backgrounds. Since you can’t have irregular borders where CSS and RGB colors butt together, that has to be done by floating an image over a rectange of CSS color. Now, these don’t match. Take a look at the two examples below. The first shows a photograph with an irregular border dropped into a CSS field that at one time, matched the surrounding CSS background. Now, you see the entire rectangle of the image area, because the CSS color used as a background now is displayed as a managed color, unlike the surrounding CSS page background color:
    http://www.hildebrandstudio.com/seniors/sen_gal_frame.html

    Then, here’s the blog theme I modified with a custom header. Instead of seamlessly blending into the surrounding CSS background, it looks like pure unaldulterated crap:

    http://www.hildebrandstudio.com/blog/

    If Mozilla would just deliver FF with color profiles off, those of us needing hundreds of hours of reworking our sites to accomodate this could simply warn visitors to turn the profiles off to view our sites. Hell, I’d even post a page telling people how to do that! Now, I just tell visitors not to use FF if they want to see the site as intended.

    Ron Hildebrand

    September 20th, 2009 at 08:51

  144. tozz

    What most people doesn’t seem to realize is that the biggest problem for a lot of people is that their very expensive equipment generates ICC v4 profiles for their hardware.
    My Eizo CG241W that has hardware calibration will generate a ICC v4 profile, this means Firefox 3.5 won’t read it, and it doesn’t matter what the rest of the images in the world has or hasn’t, since it’s “broken” from the start.
    The only browser that supports ICC v4 today is Safari. The Chrome developers seems as ignorant about the problem as the Mozilla developers. Opera doesn’t even care about colors, it’s kind of annoying to use two browsers for daily browsing (since I visit a lot of photography related sites) but as it stands right now it’s the only way.

    I just can’t grasp how the Mozilla team could fail so miserably with this.

    September 20th, 2009 at 09:53

  145. […] PNGs and JPGs converted to GIFs.. you ask why? I’m using Firefox 3.5.1 at work and it’s color correction sucks greatly! The bottom and footer images where actually corrected to brown and didn’t fit […]

    October 5th, 2009 at 15:23

  146. Erik

    Ok — so, after a LOT of reading what I have figured out is:

    Using Photoshop CS4 to create JPEG images that are sRGB tagged means that I’m left with v4 ICC profiles that Firefox 3.5.x doesn’t interpret correctly and THAT is why all my images look like sh+t in Firefox now? (ie: over saturated like crazy, for starters.) Is this right?

    I used to LOVE FF. Why’d you go and break it? I can’t even use it anymore.

    BTW: That notion of stripping the color profile information out of all of our images is absolutely crazy. Fix the browser! PLEASE.

    October 15th, 2009 at 13:14

  147. Sebastien

    > Color management still doesn’t work in FF 3.5.2 on my wide gamut,
    > hardwarecalibrated NEC SpectraView 2690. Even with tagged Images
    > colors are oversaturated. FF 3.0.x instead works fine

    Same here, except that I can not even get it to work on FF 3.0.15.
    Running a Dell C22W (Crystal), calibrated, and pointing to the profile using gfx.color_management.display_profile and gfx.color_management.enabled set to On. From a DNG file in Lightroom, I exported a JPEG in Adobe RGB and the same in sRGB. Both look identical when displayed from Lightroom (i.e. color managed), but both look oversatured in FF. If color management is disabled, only the Adobe RGB will look correct, i.e. pretty much identical to the one in LR, since it’s send straight to the wide gamut monitor.

    October 29th, 2009 at 21:55

  148. Ken

    Yeah, having browsers correctly interpret embedded color profiles is a noble idea, but this should be left “off” by default for two reasons:

    1) Not supporting ICC v4. What’s the point of going half-way with this?
    2) Many users do not have properly calibrated monitors. Let the power users who want to see the web in its “intended colors” turn it on.
    3) A “transitional” mode to match CSS to the color profile of surrounding jpegs seems necessary to avoid breaking nonstandard web pages.

    Though this is yet another example of most browsers not being standards compliant and developers getting lazy (ie, not stripping color profiles from images that are intended to match background CSS colors) because it didn’t matter. Switching to a standards-compliant method is going to break web pages, there’s no way around it. But easing the transition is a good idea.

    January 18th, 2010 at 12:26

  149. […] måter å vise bilder på, altså rendre bilder, og dette blir blant annet tatt opp på hacks.mozilla.org, hvor det er et eksempel på hvordan et bilde rendres forskjellig av Firefox 2 og Firefox […]

    January 28th, 2010 at 13:36

  150. [»Twilight«]

    This is bullshit. Other browser don’t have any issues with color distortion, why should firefox have? I can’t imagine, how all images with wrongly embedded color profile on the web will be resaved correctly. Most sites will suck on some monitors, like on my.

    February 25th, 2010 at 04:46

  151. Dave

    I upgraded to windows 7 and in the process upgraded firefox. As a web builder, I noticed color variation between ccs colors and jpg colors in firefox. It looked really crappy. I found your site helpful to fix the problem. Thanks!

    August 26th, 2010 at 06:24

  152. zeola

    i was searching for some small beautiful pics. and found the beautiful purple flower

    January 26th, 2011 at 01:02

  153. […] lokale und Offline-Speicherung für Anwendungen nach HTML5, <canvas>-Text, ICC-Farbprofile und […]

    January 26th, 2011 at 16:06

  154. MULTIATOM

    Thank you. :) The TweakPNG very nice software. :)

    February 10th, 2011 at 17:21

  155. […] e supporto alla memorizzazione dei dati in modalità non in linea, testo con i <canvas>, profili ICC e trasformazioni […]

    June 26th, 2011 at 09:29

  156. […] Ein Windows-Tool war nicht ganz das, was ich gesucht hatte, und so landete ich schließlich auf dieser Seite. Dort wird ein Programm namens pngcrush erwähnt, zusammen mit einer Kommandozeile dafür, […]

    July 6th, 2011 at 07:43

Comments are closed for this article.