IE11 - Blurred Images on pages on some sites  

Hope someone can help with this problem in IE 11.

When I go to some sites there are a number of blurred images.

E.G. This Link All Is Well until I click on the main story - then every image in that story is blurred UNLESS it is a still from a Video. The sidebar images and the images at the bottom from Sky/and the spam promoted stories are not affected. This is on every story on the SKY News site and some others. Any Story on this page. if I click on it, it is the same.

I have changed everything back to its defaults in IE and stopped any addons, emptied caches etc. but nothing helps. It does not happen in Edge or Chrome. As to when this started - I am fairly certain that it was the updates before the Anniversary update. It was happening on some other sites, but I cannot find them just now ( I visited them as a result of searches etc.).

Any help appreciated.

I'm not a web developer, so the ins-and-outs of why is beyond my reach (maybe someone else will come along who will be able to explain that part better). However the reason the pic is blurry is because different resolution images are being loaded for the two different pages.

The non-blurry page is using a 536x302 resolution image.




The blurry page is using a 206x116 resolution image (which is being stretched to 662X372, hence why it's blurry and you can see the compression artifacts).




If the blurry page is loaded with Microsoft Edge however, it loads an even higher resolution 992x558 image.

Note: As a tip, ‘Properties’ is not available in the Microsoft Edge right-click context menu like it is in Internet Explorer. Therefore, to see the image URL without going into F12 developer tools, select ‘copy’ and then paste into the address bar (or Notepad) to show actual image URL.




So, I think it must be to do with the way Internet Explorer is interpreting the code of the web page. Below is the code for that part and it seems there are variables however Internet Explorer uses the 'src' image, whereas Edge uses the highest resolution 'srcset' image. However like I said, I'm not a web developer so I'm not sure why IE ignores 'srcset', but to me it seems odd that Sky are using such a low resolution 'src' image for the second page and that's where the main problem lies.

IE OK:
src="http://e3.365dm.com/16/07/536x302/82687981-1_3700320.jpg?20160706161931" srcset="
http://e3.365dm.com/16/07/536x302/82...20160706161931 536w,
http://e3.365dm.com/16/07/736x414/82...20160706161931 736w">

IE Blurry:
src="http://e3.365dm.com/16/07/206x116/82687981-1_3700320.jpg?20160706161931" srcset="
http://e3.365dm.com/16/07/206x116/82...20160706161931 206w,
http://e3.365dm.com/16/07/352x198/82...20160706161931 352w,
http://e3.365dm.com/16/07/536x302/82...20160706161931 536w,
http://e3.365dm.com/16/07/736x414/82...20160706161931 736w,
http://e3.365dm.com/16/07/992x558/82...20160706161931 992w">

Edge:
src="http://e3.365dm.com/16/07/206x116/82...20160706161931" srcset="
http://e3.365dm.com/16/07/206x116/82...20160706161931 206w,
http://e3.365dm.com/16/07/352x198/82...20160706161931 352w,
http://e3.365dm.com/16/07/536x302/82...20160706161931 536w,
http://e3.365dm.com/16/07/736x414/82...20160706161931 736w,
http://e3.365dm.com/16/07/992x558/82687981-1_3700320.jpg?20160706161931 992w">

ARC1020 said:

Lots of looking into this..................

Sorry for not replying sooner

THANK YOU :) for doing all that work on this - more than I could have expected. Looks like there is nothing I can do for the time being. You may not be a developer for the web, but that is a terrific analytical answer on a web issue!!!!

Thanks for the tips for properties in EDGE, I had not thought to look for them in that way.

It is strange given that SKY Sports does not do the same thing.

VooDoo