JPEG + PNG Color Management Strategies for the Web

The first step in the design process of any website is to mockup the design in Photoshop. One of the most frustrating parts of the design process can be converting your mockup into image slices whose colors mix well with native CSS styles. Mark Edwards, over at Bjango, has a great writeup on color profile management and UI design. The basic tenants are: don’t color manage, use native monitor color profile, use RGB, and do not attach color profiles to JPG or PNG images.

However, in my senario, I often work with graphics that have been designed by people who work in print and don’t understand web image generation in the slightest. Often I’ll receive unoptimized PNGs, JPGs in CMYK, images with color profiles, etc. This can cause image display issues in IE, color shifting, and generally hurt the performance of a website.

In order to help myself optimize images for the web I created a small tool with an associated BASH script to convert CYMK images to RGB, strip color profiles, and optimize image file size.

This tool arose from noticing that Preview.app seems to optimize file size pretty well for PNG and JPEG. I tried to mimick the Preview.app export and while looking through the NSImage APIs noticed you could pretty easily strip color profiles and convert CMYK to RGB.