We encountered a strange incident yesterday: an image that showed up in Firefox, Chrome, and Safari but not Internet Explorer (IE). …There was a red X in a box where the image should be:

Strange, indeed. Typical of IE to be annoying (grrrr!).

After a bit of head scratching and digging we discovered that IE (all versions – ETA looks like this is issue has finally been resolved with IE9, currently in beta as of 17/9/2010) doesn’t play nice with images that are saved in CMYK color format. Makes sense (sort of) as CMYK (Cyan, Magenta, Yellow, Key [Black]) is for print and RGB (Red, Green, Blue) is for electronic screens/web.

“Haleemon”, you ask, “what ARE you going on about?”

When an image is created/modified, it’s coloring is one of various formats; 3 of the most common formats are CMYK, RGB, and Greyscale. Most browsers can render any of the formats even if it’s a CMYK image.

Practical example: A client sends you their logo to add to your website, but the logo was created for their print campaign. Most people, except for the Graphic Designer, wouldn’t know the difference (or care for that matter) but alas, Internet Explorer does.

Quick fix – open up Photoshop or Gimp and save the image as an RGB image.

Here’s how: In Photoshop or GIMP, from the menu go to Image, then select Mode, then click on RGB and save the new image.

Reupload the new image to the website and voila, problem solved!

IE actually has a number of these types of (ahem) issues. As web developers we stay abreast of these issues to ensure that the websites we create render correctly in all browsers.

If you are an IE user, I’ll leave you with the challenge to try out one of the other popular browsers, such as Firefox, Chrome, Safari, for a month. Feel free to comment back and let us know what you think.

If you like speed, check out this Youtube video on Google Chrome’s speed. But alas, I digress…

Comments are closed.