Low Image quality in IE / wrong size selection

[crealistiques]

Hi Alexander,

I wish you could help me with this issue. It seems that the images of the the news list are not loaded correctly in IE 11. I wasn't able to figure out the reason.

http://goo.gl/nOGxd0

Maybe you can have a look at it. Thank you so much.

[crealistiques]

Just to let you know: I have now fixed this issue quick & dirty by deleting the lower quality media sources to force IE to load an acceptable image size. This works because IE seems to load the lowest image size always. That's not a solution, but I want to let you know, just in case you take a look at it. Thanks Alex

[jegbagus]

try to alter the code using this one :

var getWidth = function(elem, parent, width)
{
    width =  parent.offsetWidth;

    while(width < lazySizesConfig.minSize && parent && !elem._lazysizesWidth){
        width =  parent.offsetWidth;
        parent = parent.parentNode;
    }

    return width;
};

[aFarkas]

I would need a simplified testcase on codepen, jsfiddler, jsbin or what you want.

[ibischofer]

Hi Alexander,

we, too, believe are experiencing the same / a similar issue. It looks like the combination responsive / data-src attribute is the problem (we deliberately use the lower quality image, because of an improved Google Page Speed score).

Example: https://www.vacando.com/ticino/switzerland/

I would be very thankful if you could take a look!

Also, thanks for this great plugin!

[aFarkas]

@crealistiques I just looked into your example and I can not replicate your issue. In my case testing with IE11, the image size was 1100px and the 1140w image candidate was choosen (Although there were smaller candidatets 555w/737w candidates). In my eyes this is the best candidate to choose for this size.

Please give me a testcase or more/better instructions to replicate the problem.

@ibischofer No, your problem has to do with the fact that you are not using a polyfill like the respimg polyfill plugin or picturefill and IE11 does not support srcset.

In this case the browser will always load the src/data-src attribute. You can either use one of these polyfills. Or change your markup so that the data-src has a higher quality something like this:

<img src="very-small.jpg" data-src="medium.jpg" data-srcset="very-small.jpg 100w, small.jpg 250w, medium.jpg 500w, large.jpg 800w" />

[ibischofer]

@aFarkas case of RTFM, sorry for stealing your time. Many thanks!

[crealistiques]

@aFarkas Thank you very much for your time and effort. Actually it's hard for me to provide a simplified test case at the moment. I guess you checked the big header image on the given site where the problem does not occur. The wrong size selection only happens for me for the smaller list images down below. As already mentioned I fixed this q&d by removing the smaller source variants to ensure a proper display of the images at the given size. Thanks again Alex for your engagement!

[aFarkas]

@crealistiques I have not forgotten you. I'm just ill. Will be the first thing I will looking into, if I get better.

[crealistiques]

Hi Alex,

take your time, as mentioned I have found a temporary solution.

Thank you, I hope you will be fine soon.

Steffen

[aFarkas]

@crealistiques This issue should be fixed now. Thanks for your bug report.

[dotBits]

@aFarkas don't know whether to open a new issue because I've experienced the same with IE, it just chooses the candidate right before the right one. In particular with the most left image in screenshot, which looks right in other browsers. See here https://v4.musement.com

Any idea what's wrong? Thank you

[aFarkas]

@dotBits You have two errors in your markup:

1. Your width descriptors are broken: https://images.musement.com/default/0001/19/colosseum-roman-forum-and-palatine-hill-skip-the-line-tickets_header-18714.jpeg?w=290&q=60&fit=crop&h=245 320w, https://images.musement.com/default/0001/19/colosseum-roman-forum-and-palatine-hill-skip-the-line-tickets_header-18714.jpeg?w=335&q=60&fit=crop&h=245 640w, https://images.musement.com/default/0001/19/colosseum-roman-forum-and-palatine-hill-skip-the-line-tickets_header-18714.jpeg?w=690&q=60&fit=crop&h=420 960w

The 290 image has a descriptor of 320w, the 335 has a descriptor of 640w and the 690 has a descriptor of 960w.

2. you do art direction with srcset alone (for the first image in a row), but you should use picture here instead (or use the object-fit/parent-fit plugin instead (object-fit as polyfill for IE and parent-fit to add object-fit calculation to data-sizes="auto"). Or build a special plugin for this art direction purpose.

This should fix your issues.