Back to the original question of changing the src of the image then as I guessed there is a script in the page that is swapping the data image for a real image.
The code is found here:
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i = 0; i < imgDefer.length; i++) {
if (imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
}
}
}
window.onload = init;
If we add data-src and data-srcset attributes to the image with the correct filenames then the js can be updated to match.
e.g. Html:
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="Discovery" width="110" height="110" srcset="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs 1x, data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs 2x" data-srcset="http://www.modovis.com/wp-content/uploads/2016/12/Process-DYIcon110.png 1x, http://www.modovis.com/wp-content/uploads/2015/12/Process-DYIcon600-1.png 2x" data-src="http://www.modovis.com/wp-content/uploads/2016/12/Process-DYIcon110.png">
JS:
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i = 0; i < imgDefer.length; i++) {
if (imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
}
if (imgDefer[i].getAttribute('data-srcset')) {
imgDefer[i].setAttribute('srcset', imgDefer[i].getAttribute('data-srcset'));
}
}
}
window.onload = init;
That should then render the image tag like this:
<img src="http://www.modovis.com/wp-content/uploads/2016/12/Process-DYIcon110.png" alt="Discovery" width="110" height="110" srcset="http://www.modovis.com/wp-content/uploads/2016/12/Process-DYIcon110.png 1x, http://www.modovis.com/wp-content/uploads/2015/12/Process-DYIcon600-1.png 2x" data-srcset="http://www.modovis.com/wp-content/uploads/2016/12/Process-DYIcon110.png 1x, http://www.modovis.com/wp-content/uploads/2015/12/Process-DYIcon600-1.png 2x" data-src="http://www.modovis.com/wp-content/uploads/2016/12/Process-DYIcon110.png">
Remember to test thoroughly as JS isn’t my strongpoint.
One last thing to note is that the original pixellated images in IE edge seem to be caused by this swapping out the image routine. If in your original page you did not supply a data image the image comes out perfect when resized down to 110 in IE edge. It’s only when the image is subsequently swapped that it gets pixellated.
Probably a related issue I also note that (in IE edge) if on the same page you render the image at its natural size and at a small size as well it will make the smaller version pixellated once again. Displaying an image at a smaller size does not on its own make it pixellated unless you are already (or subsequently) showing the image at its natural size. If you display the image with width and height attributes of the natural size but size it smaller with CSS then once again it does not get pixellated. It’s very weird!
To test this out in edge just display a natural image smaller.
e.g.
<img src="images/img600.png" width="110" height="110" alt="test">
The image above is fine and not pixellated at the small size.
However if you do this then the small image looks pixellated.
<img src="images/img600.png" width="600" height="600" alt="test">
<img src="images/img600.png" width="110" height="110" alt="test">
Very weird indeed.
