html - Microsoft Edge 中的像素化图像缩小

Question

我最近为我的网站制作了一个分辨率为 400x400 的 Logo 。它在我测试过的任何其他浏览器中都可以缩小到 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/ 所以它已经被讨论了至少四年了!)

自至少 2016 年 11 月以来，Edge 团队已两次报告并确认为同一问题，但没有修复...

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

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

SO 上还有其他几篇关于它的帖子。

一个可能的解决方案似乎相当 OTT，将图像添加到 Canvas 并重新缩放它，但如果你有不止一两个图像，这可能会导致严重的延迟:https://github.com/sukhoi1/ie-bicubic-img-interpolation-plugin/wiki

唯一真正的解决方案似乎是等到 MS 解决这个问题。现在就赌那一年!