Behind the scene

It was quick call from one of our client regarding issue that images are not being displayed on IE8 while checking their beta website. With my surprise, same site is rendering all images properly in Firefox 3.6, and Google Chrome. I tried once again with check back into the code and verified all the relevant IMG tags and it seems everything is fine.

Cause of Problem

The reason is Internet Explorer has issues displaying JPEG images that have been encoded using CMYK, rather than the default RGB encoding. Even Internet explorer does not supports other image formats like EPS, GIF created in CMYK mode.

Typically, JPG files are encoded in a three-channel RGB format.  It is possible, in some programs like Photoshop or Corel Draw, to create JPG files that are encoded in four- channel CMYK color format. Microsoft Internet Explorer is unable to display JPG files that are not in three-channel RGB color format.

Example of RGB vs CMYK images

Firefox 2.x and earlier version also doesn’t support images created in CMYK color format. You can refer below browser matrix that supports CMYK encoded images.

Solution

To resolve this problem, simply open the file in Image Editor i.e. Photoshop or GIMP, and re-encode it by copying the image, going to File > New, and making sure "Color Mode:" is set to "RGB" at "8-bit". Once the new canvas is open, paste the file, and save as a JPG.

Quick Solution for Photoshop users

Check the color mode of the image. In Photoshop, by clicking "Image," then "Mode," you can check it. If CMYK, change it to RGB before saving it for use on the web. To avoid JPG saving in CMYK, you can also use the "Save for Web" option in Photoshop or Photoshop Elements, instead of choosing "Save As…" and choosing JPG. "Save for Web" will convert your image to RGB before saving.

Now Firefox 3.x supports CMYK JPG

Good news for Firefox users is… Firefox has resolve the CMYK Image rendering issue and now Firefox 3.x supports CMYK images. For further reference, see Mozilla Firefox CMYK Image rendering Bug Post in their Bugzilla system… https://bugzilla.mozilla.org/show_bug.cgi?id=44781

Browser Matrix for RGB vs CMYK Image rendering support

Conclusion

CMYK format is universally accepted format for Print Media, while Web Designing always prefer to encode your images to RGB format to avoid CMYK image rendering issue in IE. If your website’s images are not displaying in IE8, check the image in Firefox 3.0 or greater. If it displays there, it’s likely to be in the CMYK color mode. Fix the problem by changing the color mode of the image, re saving it and then replacing in your website.