Internet Explorer Aborts Images With The Wrong Mime-Type
This is a really quick post; but, it took me over an hour to debug the other day, so I thought I would share. I was in a situation where I had to serve up images. This seemed to work well in every browser except IE (Internet Explorer). Furthermore, IE seemed to serve up some images and not others. After slowly narrowing it down, I finally figured out that it was a mime-type issue.
When I stated to dig into the problem, IE was aborting some of the image requests. When I looked in the network activity, IE was showing me:
"(Aborted)"
The confusing thing was that if I copied the image URL and opened up in another browser window, IE would prompt me to save the image. Then, after saving it, Windows had no problem opening up the image. So, it wasn't a "corrupt" image issue - something else was going on.
The thing that finally cued me in was the fact that IE prompted me to save the image rather than simply showing it inline. This made me think it had something to do with the Content-Disposition or the Mime-Type. And, after reviewing the code that served up the image, I discovered that my JPG images were being served with the mime-type:
"image/jpg"
Unfortunately (my bad!) the official mime-type of JPG images is:
"image/jpeg"
Once I fixed this, IE started serving up the JPG images properly.
Reader Comments
What? You mean the browser didn't know what you meant? That's crazy talk! :P
It can be frustrating when that happens. Thank you for bringing this up. What gets me, though, is that I seem to recall IE uploading files with the image/jpg MIME type if the extension is "jpg". I might be mistaken, of course...
@Paul,
Another one that gets us, which is not a programming error, but a user error - people will often upload PNG files with a mislabeled ".jpg" file extension. This is another case where Firefox and Chrome are like "what-evs, I'll show it anyway" and IE is like, "Oh my gosh, how do I cope with such a catastrophic failure!".
*swish* - this definitely saved me some time today :)
I can reproduce but the only thing I don't understand is how it load the image after refresh. I get .png with text/ plain mine type. Some time ie11 load the image fine. Specially if I use <link rel="prefetch". For some user it's more likely to abort.
@Yinon,
I'm not sure I entirely understand, sorry.
I mean this issue is not persistent. Some time IE do load the image. and I try to understand the conditions. It look like it related to speed. When I work with localhost server it always load successfully ( load time of <20 ms ).
It look like if response is very fast or after page refresh IE assume the content type by the extension or by scanning the first 200 bytes of the file even if Mime Type is Wrong.
check: https://msdn.microsoft.com/en-us/library/ms775148(v=vs.85).aspx
@Yinon,
Hmm, super interesting. Honestly, I have no idea why you would see that kind of behavior. I wonder if it somehow gets the binary into the browser cache and then can re-interpret the mime-type from their. Just guessing, no idea really.