Not All JPEGs Are Created Equal (aka, Why is my image not showing up in IE8?)

JPEG (.jpg) images are supposed to display effortlessly in all web browsers without issue, right? WRONG. In the last 3 months, we’ve had half a dozen calls to our help desk about images mysteriously not showing up and they all were the same root cause: the images were saved in the incorrect color format. There are other causes for images not displaying, but this seems to be rather prevalent.

JPEG images can be saved as CMYK or RGB format.

  • RGB format (Red, Green, Blue) is a light-based additive color model designed explicitly for color display on electronic systems (i.e., screens)
  • CMYK (Cyan, Magenta, Yellow, Black) is a print format, for 4-color process printing. Most browsers understand this format BUT NOT ALL OF THEM. Internet Explorer 8, for example, does not.

While incredibly hard to troubleshoot, the fix is relatively easy: simply change the color format. There are lots of posts about how to do this, including this nice one from PLAVEB,  and there are even some free converters out on the internet (though I haven’t used one of these, myself). Fortunately, the issue seems resolved in the newer browsers, but it will be a while before we can forget about it completely.

Have you run into any image issues?

2 thoughts on “Not All JPEGs Are Created Equal (aka, Why is my image not showing up in IE8?)

  1. Holy smokes, I told the printers to print this. But when I took a
    second look, there was the logo, but my brand name was missing…
    All along it was a browser issue!

  2. Great post, Tanya! Another thing to note regarding CMYK jpegs – the color format can drastically change file size, since CMYK images are storing data for the extra color layer. Using the simple “Save” function from Photoshop, a 1080×721 pixel image saved as a CMYK .jpg is 1.8 MB (1775 KB), whereas the same image saved as a RGB .jpg is 713 KB – less than half the size!

    This is still a really large image to load on the web, though. If you are using Photoshop, the best and easiest way to solve both the color format and file size problems is to choose “Save for Web & Devices” from the File menu. In the right column, choose JPEG with a quality of 60 (this keeps enough quality for most photos) and press save at the bottom. The “Save for Web & Devices” automatically converts the file to RGB and reduces the file size to improve load time on the web. Now the same image is 168 KB – 1/10 the original file size and it will display in all browsers!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>