Pixelated image downscaling in Microsoft Edge

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:

CSS:

.logo {
    width: 40px;
    height: 40px;
}

EDIT: Here's a JSfiddle to reproduce my problem.

user_915762 · Answer

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!

user_3179761 · Answer

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.

user_3330871 · Answer

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

Pixelated image downscaling in Microsoft Edge

3 Answers