Microsoft Edge中的像素化图像缩小

Question

我最近为我的网站制作了一个分辨率为400x400的徽标。它在我测试过的任何其他浏览器中都可以缩小到40x40，但它在Edge中很奇怪。每次刷新页面时，它都会正常呈现一瞬间，然后在页面完成加载后更改为难看的像素化外观。

在页面完全加载之前它的外观（以及我希望它看起来如何）：

页面加载时的外观如何：

HTML：

<img src="/images/logo.png" class="logo">

CSS：

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

编辑：这里有一个JSfiddle来重现我的问题。

Answer 1

图像质量下降是Edge中已知的问题，并且已经存在多年了。

我也可以确认您看到短暂的重新调整图像的短暂体验。有时，有时，图像似乎保持平滑缩放！ （似乎确定重新创建问题的一种方法是在页面加载后重新调整图像，例如将JSfiddle中的大小设置为50x50px - 在Edge中，图像调整大小并且看起来很糟糕，但在其他浏览器中，结果很顺利。）

问题实际上是在Edge发布之前。最近MS似乎已经摆弄它，但他们肯定没有解决它。这是MS论坛上关于它的一个帖子（请注意有些人非常绝望地希望解决问题，将其归咎于显卡！）：https://social.technet.microsoft.com/Forums/ie/en-US/e800cbaf-a539-43ba-b5f9-1d29fe709ddc/the-awful-internet-explorer-image-renderengine

这是2015年8月关于这个问题的另一篇文章，所以它绝对不是什么新鲜事！ https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/9279264-better-image-scaling-no-more-jaggies-for-downscal

真正深入了解历史，这是另一个演示 - 从2013年开始！ https://bug486918.bmoattachments.org/attachment.cgi?id=428179

（该演示来自对2013年MS博客帖子的评论：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/所以至少已经讨论了四年了！）

此问题已被报告并被Edge团队确认为两次错误，至少从2016年11月开始，没有修复......

1 - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9869140/

2 - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14420925/

此处还有其他一些关于它的帖子。

一种可能的解决方案似乎是OTT，将图像添加到画布并重新缩放，但如果您有一个或两个以上的图像，这可能会导致严重的延迟：https://github.com/sukhoi1/ie-bicubic-img-interpolation-plugin/wiki < / p>

唯一真正的解决方案似乎是等到MS修复此问题。现在下注将在哪一年！

Answer 2

当我将PNG转换为使用RGB色彩模式（使用GIMP）时，我有了一些改进。以前使用“索引”颜色。

Answer 3

我已经找到了解决方法， 尺寸较大时，边缘会按比例缩小图像，

如果我们根据所需的实际尺寸调整图像大小，像素化将消失/减少