After all the speculations, we are left with a haunting late-medieval image of a person with apparent Down syndrome with all the accouterments of divinity.
Matching Colors
Modern web browsers (i.e. Safari and Firefox) now do this wonderful thing: they can make the colors of a photo edited on one machine match the colors of that same photo displayed on another. You might be thinking, shouldn’t they be doing this already; color is color, right? Wrong, your display can do whatever it wants (or you want it) to do with color.
Think of it this way: remember when you figured out how to use the TV remote control? Remember how you found that menu where you could change all sorts of settings? Remember the “Tint” option that made the whole TV go red? Just like that (okay, it’s probably not like that at all, but just go with me here), you can make changes to your computer display settings. In fact, the settings are not exactly same from monitor to monitor.
Color management is here to save the day. It’s been integrated into your operating system and it’s now available in your web browser. Great for photographers, not so great for web designers who use images in their design; unless they know how to fix images that shouldn’t be color managed.
Common case: web designer uses image for header to make some fancy logo.1 To make the colors match between the image and the HTML, the designer sets the background color of the image to the background color described in the HTML.2 When the designer puts it all together the color match looks fine on his machine.
What the designer might not know about is the color profile lurking within the header image. When a user accesses the website in question, they may see a mismatch of color (“Before” in the image above). Sure it’s the same “color” from a guy’s perspective, but the shade of the colors is off as any girl would tell you. The colors of the header images have been mangled managed. The browser enforced the designer’s color settings to the user’s display of the image, but the CSS background color was left alone.
How do we fix this? We get rid of the color management for these type of images. Color management is not needed. We really don’t care if the user sees the exact same shade of the color we see on our machine. We just want all the shades to match.
When I discovered this problem with my designs, I asked for some help on doctype, a new Q&A specifically for web developers. I was given a few different options for striping the color management. In the end, I settled on a command-line approach using two command-line utilities3, pngcrush for PNG images and jpegtran for JPG images:
pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png
jpegtran -optimize -outfile out.jpg in.jpg
I put together a script to run both of these utilities automatically on a directory of images:
Update:
Check out Bjango’s thoughts on color management; more oriented towards setting up Photoshop.
- Hopefully they’re using PNG or GIF; JPG renders text horribly.
- Because the eight-year-old monolithic IE6 lacks support for transparent PNGs, they wouldn’t dare use one of those to make the correct color match.
- If you are not a UNIX power user, you may want to try one of the other options.
