PNG Colors are Wrong in Firefox (and how to deal with non-sRGB wide gamut monitors at work)

I created a PNG that was bright red, but in Firefox, it is a duller red. The fix was to remove the color profile from the PNG by using the tool TweakPNG.

What happened was that the PNG was created in the sRGB colorspace, but the system is running with a color profile for the monitor. Nowadays, most monitors are sRGB, so there's no problem. Nicer monitors with wider gamut, however, are calibrated with their own profile. Firefox will do color adjustments to make the colors accurate. Unfortunately, that means going duller.

I believe that when monitors had a narrower gamut than sRGB, color correction resulted in brighter or more contrasty colors.

Anyway, whatever. The strategy for HTML is to edit the image in sRGB, and strip the color profile out. Do this only when it's critical to match the CSS colors with the image. Don't do it for photos.

Nice Monitors for Graphics Staff

Also, there's the issue of setting your monitor. (I get to use a nice Dell U2410.) I'm still learning this, but here is what I'm doing. If you do graphics for work, you need at least an sRGB monitor, and preferably a better one that has 100% coverage of sRGB. It's worth it. You set it to the sRGB preset, download color profiles from TFT Central, and load those profiles into Color Management. Log out, log in, and the new settings should apply everywhere. The monitor will look worse than it did before, unfortunately.

If you compare this sRGB mode image to a low-end monitor, it'll look pretty similarly washed out. That's what you want - you want to edit your photos to look good within the limitations of the average monitor. But you need the nice monitor so at least you'll be editing toward an accepted colorspace.

If you do print work, you will need to switch to wide gamut mode (standard mode) on both the monitor and in Windows, then log out and log in to be sure all apps notice the change. It's not hard, but requires two settings changes.

If you stay in sRGB, and use the color profile, the colors will basically be accurate - but the preview will have less color detail.

Nice Monitors for Others

If a user isn't only looking at images for average computer LCDs, but also viewing content for print, television, etc. they'll need a decent preview monitor with wider-than-typical gamut. The low-end monitors in this class are the U2410 and Asus ProArt. At the same time, unless this is a tech or accounting company that's really into graphics, juggling monitor settings, color profiles, and software settings isn't going to be feasible. So, for these people, set the monitor to its wide-gamut default. It will tend to look "bright", but that's tolerable after a while.

Print and video files will come with correct color spaces (we hope), and the color management between the monitor and the printer should be correct. Web files will be sRGB - and will wash out a bit - but because we strip sRGB profiles for our own files, they'll show up bright. Stuff in Flash is not color corrected. Video? I don't know. Overall, though, you'll get two effects - correct color for print (which matters), and bright or even unrealistic color on the web, and no color mismatches on your own site. There may be color mismatches on other sites.

If accuracy for print doesn't matter, just get current sRGB monitors. They'll look better than the older monitors, and are much cheaper than preview monitors, and don't have the risk of website colors screwing up. Just know that these aren't good for previewing print materials.