Microsoft Edge中的像素化图像缩小 [英] Pixelated image downscaling in Microsoft Edge

问题描述

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

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;
}

这是一个 JSfiddle ，可以重现我的问题.

Here's a JSfiddle to reproduce my problem.

推荐答案

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

Poor-quality downscaling of images is a known problem in Edge, and has been for years now.

我也可以确认您看到平滑缩放图像的短暂闪光的经历.有时，只是有时，图像似乎保持平滑缩放！ (似乎可以肯定地重现此问题的一种方法是在页面加载后 调整图像的大小，例如将JSfiddle中的大小设置为50x50px-在Edge中，图像调整大小并看上去很糟糕，但在其他浏览器中，结果却很平滑.)

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.)

此问题实际上早于Edge的发布.最近，MS似乎在摆弄它，但是他们当然没有解决它.这是与此有关的MS论坛上的一个线程(请注意，有些人非常绝望地希望将问题归咎于图形卡！):

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

这是2015年8月以来关于此问题的另一篇文章，因此绝对没有新内容！ https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/9279264-better-image-scaling-no-more-jaggies-for-downscal

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

真正挖掘历史，这是2013年的另一个演示！ https://bug486918.bmoattachments.org/attachment.cgi?id=428179

Really digging into the history, here's another demo -- from 2013! https://bug486918.bmoattachments.org/attachment.cgi?id=428179

(该演示摘自2013年一篇MS博客文章的评论:

(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!)

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

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/

还有关于SO的其他几篇文章.

And there are several other posts about it here on SO.

一个可能的解决方案似乎是OTT，将图像添加到画布上并重新缩放比例，但是，如果您有多个图像，则可能会导致严重的滞后: https://github.com/sukhoi1/ie-bicubic-img-interpolation-plugin/wiki

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

唯一真正的解决方案似乎是要等到MS修复此问题.现在就押注哪一年！

The only real solution seems to be to wait until MS fix this. Taking bets now on which year that will be!

这篇关于Microsoft Edge中的像素化图像缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！