A rookie mistake no doubt, but whilst troubleshooting another issue a client had found on one of my sites when viewed on Internet Explorer 8, I noticed something else odd. Some images weren’t displaying.
Nothing too sinister about these images, they are JPEGs (.jpg), they are small, other images in the same format worked fine.
So why is it that a JPG will not display in IE8?
Having a look around the web I saw other people having a similar issue, and a lot of the help provided suggested checking IE settings (making sure images were set to display) and things along those lines. But I knew this wasn’t my problem, considering other images worked perfectly fine.
It wasn’t until this morning when I decided to compare two images (one working, one not) that I finally discovered the issue; the image mode.
I had semi remembered that different modes of image could cause weird results when viewed through a browser, and this was one such time. Upon closer inspection of the images, the one that was working fine was in RGB mode and the one that wasn’t was in CMYK mode. Changing the mode from CMYK to RGB got it working.
I did this via Photoshop CS5 > openeing the image and then selecting Image > Mode > and choosing RGB.
So with that fixed, what are the different modes for?
Quick and Dirty Lowdown of RGB v CMYK
RGB (red, green, blue) is best used for web based JPEG (.jpg) images, as they are designed explicitly for computer screens or similar.
CMYK (cyan, magenta, yellow, black) is the mode used for print design, for 4 colour process printing.
Modern browsers seem to understand the CMYK format, but you don’t have to go too far back (IE8) for browsers to start leaving these images out completely.
In short, check the mode of the images you are using (if you receive images from graphic design companies, a lot of the time they will be in CMYK format, especially if coming from Illustrator or similar design program).