Images stored on Amazon AWS S3 not rendered in Internet Explorer

Question

for my AdLit web application, I store some images on Amazon AWS S3. But these images don't get rendered in any version of Internet Explorer (tested with IE8, IE9 and IE11)

you can check this out on:

http://www.adlit.be/team

The images get rendered in Safari, Firefox and Chrome, but not in Internet Explorer.

Does anyone have experience with this issue? And how can it be fixed?

thanks for your help,

Anthony

Answer 1

According to W3C spec, images normally get mime-sniffed regardless of what is declared in the server response Content-Type header.

But since there is also an MS-proprietary X-Content-Type-Options:nosniff header present, IE does not in this case conduct the mime-sniff step.  And therefore, per W3C, the Content-Type header gives the final mime-type.  But that is "application/octet-stream", which is not a supported image type.



(Fiddler filter - click for full size)

Answer 2

The photos are JPEG images but they are all named image with no extension. This means that your server isn't giving them an image Content-Type. Your server instead sends an HTTP header of:

Content-Type:application/octet-stream

Chrome and Firefox are apparently clever enough to notice that the request comes from an <img> element and to recognize the JPEG format from the binary content itself. But you would make things a lot easier if you get your server to send a more appropriate header:

Content-Type:image/jpeg

I have two guesses:

1. If you rename your photos on the server from image to image.jpg or image.jpeg then your server will infer the proper Content-Type, and
2. Given the correct Content-Type, IE will display the photos.

Oh wait, Amazon S3. I think that web service from S3 will infer Content-Type from the file extension, but if not you can explicitly set metadata on S3 objects, including (especially) Content-Type.