I have to preface that I’m *not* a web designer (should I send you some snapshots of the web pages I have produced, you would definitely agree with me… that’s why I’m not adding pictures to this post :-)).
Therefore the topic of this post may seem obvious to the web designers amongst you.
Anyway, here’s what I have noticed some days ago, in the context of a SharePoint 2010 intranet project where some CQWPs display the most recent items (news, etc..), along with a thumbnail image beside the item body.
Well, the final effect was that some of the images were not displayed at all in the rollup page.
After double-checking the publishing status of each item, I could confirm that each picture item was checked-in and approved, so that it should be visible to all authenticated users.
But while navigating to the assets library that contains the pictures as a site owner, the exact same behavior was visible there: even the XSLT list view web part shows the items, with pictures dispayed as a red cross.
Then, Fiddler comes to the rescue. I fired it up, trying to figure out what was the real network traffic behind the picture download. I got an HTTP 200, and the response mime type was correctly set to image/jpeg.
Ok, then there’s some issue with the image itself. I saved the stream locally, then tried to open the image with any kind of picture viewer tools and… the image displays correctly, no matter of the tool I have used.
This is a confirmation that the image type is not well supported by the browser.
It’s a browser issue, so the next step is to navigate to the image url using different browsers and try to spot the difference… and the difference was now quite evident.
IE8 had issues with that specific image, while neither FF nor Chrome nor IE9 suffered any problem.
Then, I just had to google for “IE8 JPG” to find what I was looking for.
I knew that JPG is too vague, since you can get different encodings and internal representations, ending up with a JPG file extension as well.
But I didn’t know that IE8 dropped support for jpeg images saved as CMYK.
Here you can find some information about this issue, and even a web page where you can test how your browser behaves with CMYK JPEGs:
sometimes always strange 🙂