Images failing to load in IE with DOM: 7009 error (unable to decode) in console

When loading many images on a single page in IE (reproduced in IE11), some of them begin to fail to load, and have something similar to the following warning in the console:

DOM7009: Unable to decode image at URL: '[some unique url]'.

When I look at the network traffic, there does appear to valid responses received for each of these images from the server. It's not always the same images each time. If I use the dev tools to force the image to reload (example: I update the url to include some some extraneous url parameter "&test=1"), it loads/renders normally without error. I've reproduced this behavior with different types of images (jpegs/pngs; example png included below). It seems to happen more frequently as the number of images go up, and may also have some correlation with the size of each image.

Any thoughts as to what might be causing this? Potential work-arounds? Any help is appreciated.

Solution 1:

It looks like the actual problem is addressed in another Stack Overflow question. All of the answers here get around the issue in various ways, but this is likely happening because the file is not the format it claims to be. Because nosniff is enabled, the browser is unable to work around this issue, and attempts to decode the wrong image type.

In other words: Your file extension does not match the actual encoding

Solution 2:

I had this problem in a site hosted in IIS due the X-Content-Type-Options header being set in a parent applications web.config like this:

<system.webServer>   
 <httpProtocol>    
  <customHeaders>    
   <add name="X-Content-Type-Options" value="nosniff" />    
  </customHeaders>    
 </httpProtocol> 
</system.webServer>  

Removing it in the applications web.config fixed it:

<remove name="X-Content-Type-Options" />