Pixelated image downscaling in Microsoft Edge - html

Question

I recently made a logo for my website with a resolution of 400x400. It scales down to 40x40 just fine in any other browser I have tested, but it acts weirdly in Edge. Every time I refresh the page, it renders properly for a split second, before changing to an ugly, pixelated look after the page completes loading.
How it looks before the page loads fully (and how I want it to look):
How it looks when page finishes loading:
HTML:
<img src="/images/logo.png" class="logo">
CSS:
.logo {
width: 40px;
height: 40px;
}
EDIT: Here's a JSfiddle to reproduce my problem.

Answer 1

Poor-quality downscaling of images is a known problem in Edge, and has been for years now.
I can confirm your experience of seeing a brief flash of smoothly-rescaled image, too. And sometimes, just sometimes, an image seems to remain smoothly scaled! (It seems that one way to definitely re-create the problem is to re-size an image after the page is loaded, such as setting the size in your JSfiddle to 50x50px -- in Edge, the image resizes and looks awful, but in other browsers the result is smooth.)
The issue actually pre-dates the release of Edge. Recently MS seem to have fiddled with it, but they've certainly not fixed it. Here's a thread on an MS forum about it (note how some people are bizarrely desperate to wish the problem away, blaming it on graphics cards!): https://social.technet.microsoft.com/Forums/ie/en-US/e800cbaf-a539-43ba-b5f9-1d29fe709ddc/the-awful-internet-explorer-image-renderengine
Here's another post from August 2015 about this issue, so it's definitely nothing new! https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/9279264-better-image-scaling-no-more-jaggies-for-downscal
Really digging into the history, here's another demo -- from 2013! https://bug486918.bmoattachments.org/attachment.cgi?id=428179
(That demo is from a comment on a MS blogpost from 2013: https://blogs.msdn.microsoft.com/ie/2013/09/12/using-hardware-to-decode-and-load-jpg-images-up-to-45-faster-in-internet-explorer-11/ so it's been talked about for at least four years now!)
This same issue has been reported and confirmed as a bug by the Edge team twice, since at least November 2016, with no fix...
1 - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9869140/
2 - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14420925/
And there are several other posts about it here on SO.
The one possible solution seems to be rather OTT, adding the image to a canvas and rescaling that, but if you've got more than one or two images, this can cause serious lag: https://github.com/sukhoi1/ie-bicubic-img-interpolation-plugin/wiki
The only real solution seems to be to wait until MS fix this. Taking bets now on which year that will be!

Answer 2

I had a bit of improvement with my PNGs when I converted them to use the RGB color mode (used GIMP). It previously used 'indexed' colors.

Answer 3

I've found a workaround for this,
Edge down-scales the image when the size is large,
if we resize the image based on the actual size required the pixelation will be gone/reduced