Html 图像缩放会导致 Firefox/Internet Explorer 质量不佳，但不会导致 chrome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9945363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image scaling causes poor quality in firefox/internet explorer but not chrome
提问by Andrew Rasmussen
See http://jsfiddle.net/aJ333/1/in Chrome and then in either Firefox or Internet Explorer. The image is originally 120px, and I'm scaling down to 28px, but it looks bad pretty much no matter what you scale it down to.
在 Chrome 中查看http://jsfiddle.net/aJ333/1/，然后在 Firefox 或 Internet Explorer 中查看。图像最初是 120 像素，我正在缩小到 28 像素，但是无论您将其缩小到什么程度，它看起来都很糟糕。
The image is a PNG and it has an alpha channel (transparency).
该图像是一个 PNG，它有一个 alpha 通道（透明度）。
Here's the relevant code:
这是相关的代码：
HTML:
HTML：
<a href="http://tinypic.com?ref=2z5jbtg" target="_blank">
<img src="http://i44.tinypic.com/2z5jbtg.png" border="0" alt="Image and video hosting by TinyPic">
</a>?
CSS:
CSS：
a {
width: 28px;
height: 28px;
display: block;
}
img {
max-width: 100%;
max-height: 100%;
image-rendering: -moz-crisp-edges;
-ms-interpolation-mode: bicubic;
}
The image-renderingand -ms-interpolation-modelines of CSS didn't seem to do anything, but I found them online while doing some research on the problem.
CSS的image-rendering和-ms-interpolation-mode行似乎没有做任何事情，但是我在对问题进行一些研究时在网上找到了它们。
采纳答案by mgutt
It seems that you are right. No option scales the image better:
http://www.maxrev.de/html/image-scaling.html
看来你是对的。没有选项可以更好地缩放图像：http:
//www.maxrev.de/html/image-scaling.html
I've tested FF14, IE9, OP12 and GC21. Only GC has a better scaling that can be deactivated through image-rendering: -webkit-optimize-contrast. All other browsers have no/poor scaling.
我测试了 FF14、IE9、OP12 和 GC21。只有 GC 具有更好的扩展性，可以通过image-rendering: -webkit-optimize-contrast. 所有其他浏览器都没有/较差的缩放。
Screenshot of the different output: http://www.maxrev.de/files/2012/08/screenshot_interpolation_jquery_animate.png
不同输出的屏幕截图：http: //www.maxrev.de/files/2012/08/screenshot_interpolation_jquery_animate.png
Update 2017
2017 年更新
Meanwhile some more browsers support smooth scaling:
同时更多的浏览器支持平滑缩放：
ME38 (Microsoft Edge) has good scaling. It can't be disabled and it works for JPEG and PNG, but not for GIF.
FF51 (Regarding @karthik 's comment since FF21) has good scaling that can be disabled through the following settings:
image-rendering: optimizeQuality image-rendering: optimizeSpeed image-rendering: -moz-crisp-edgesNote: Regarding MDNthe
optimizeQualitysetting is a synonym forauto(butautodoes not disable smooth scaling):The values optimizeQuality and optimizeSpeed present in early draft (and coming from its SVG counterpart) are defined as synonyms for the auto value.
OP43 behaves like GC (not suprising as it is based on Chromium since 2013) and its still this option that disables smooth scaling:
image-rendering: -webkit-optimize-contrast
ME38 (Microsoft Edge) 具有良好的扩展性。它不能被禁用，它适用于 JPEG 和 PNG，但不适用于 GIF。
FF51（关于@karthik 自 FF21 以来的评论）具有良好的缩放，可以通过以下设置禁用：
image-rendering: optimizeQuality image-rendering: optimizeSpeed image-rendering: -moz-crisp-edges注意：关于 MDN，该
optimizeQuality设置是auto（但auto不禁用平滑缩放）的同义词：早期草案中存在的值 optimizeQuality 和 optimizeSpeed（来自其 SVG 副本）被定义为 auto 值的同义词。
OP43 的行为类似于 GC（这并不奇怪，因为它自 2013 年以来就基于 Chromium）并且它仍然是禁用平滑缩放的选项：
image-rendering: -webkit-optimize-contrast
No support in IE9-IE11. The -ms-interpolation-modesetting worked only in IE6-IE8, but was removed in IE9.
不支持 IE9-IE11。该-ms-interpolation-mode设置仅在 IE6-IE8 中有效，但在 IE9 中被删除。
P.S. Smooth scaling is done by default. This means no image-renderingoption is needed!
PS 默认情况下进行平滑缩放。这意味着不需要任何image-rendering选项！
回答by trgraglia
Late answer but this works:
迟到的答案，但这有效：
/* applies to GIF and PNG images; avoids blurry edges */
img[src$=".gif"], img[src$=".png"] {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
https://developer.mozilla.org/en/docs/Web/CSS/image-rendering
https://developer.mozilla.org/en/docs/Web/CSS/image-rendering
Here is another link as well which talks about browser support:
这是另一个讨论浏览器支持的链接：
https://css-tricks.com/almanac/properties/i/image-rendering/
https://css-tricks.com/almanac/properties/i/image-rendering/
回答by Fernando Teles
One way to "normalize" the appearance in the different browsers is using your "server-side" to resize the image. An example using a C# controller:
在不同浏览器中“标准化”外观的一种方法是使用“服务器端”来调整图像大小。使用 C# 控制器的示例：
public ActionResult ResizeImage(string imageUrl, int width)
{
WebImage wImage = new WebImage(imageUrl);
wImage = WebImageExtension.Resize(wImage, width);
return File(wImage.GetBytes(), "image/png");
}
where WebImage is a class in System.Web.Helpers.
其中 WebImage 是 System.Web.Helpers 中的一个类。
WebImageExtension is defined below:
WebImageExtension 定义如下：
using System.IO;
using System.Web.Helpers;
using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
using System.Collections.Generic;
public static class WebImageExtension
{
private static readonly IDictionary<string, ImageFormat> TransparencyFormats =
new Dictionary<string, ImageFormat>(StringComparer.OrdinalIgnoreCase) { { "png", ImageFormat.Png }, { "gif", ImageFormat.Gif } };
public static WebImage Resize(this WebImage image, int width)
{
double aspectRatio = (double)image.Width / image.Height;
var height = Convert.ToInt32(width / aspectRatio);
ImageFormat format;
if (!TransparencyFormats.TryGetValue(image.ImageFormat.ToLower(), out format))
{
return image.Resize(width, height);
}
using (Image resizedImage = new Bitmap(width, height))
{
using (var source = new Bitmap(new MemoryStream(image.GetBytes())))
{
using (Graphics g = Graphics.FromImage(resizedImage))
{
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g.DrawImage(source, 0, 0, width, height);
}
}
using (var ms = new MemoryStream())
{
resizedImage.Save(ms, format);
return new WebImage(ms.ToArray());
}
}
}
}
note the option InterpolationMode.HighQualityBicubic. This is the method used by Chrome.
请注意选项 InterpolationMode.HighQualityBicubic。这是Chrome使用的方法。
Now you need publish in a web page. Lets going use razor:
现在您需要在网页中发布。让我们使用剃须刀：
<img src="@Url.Action("ResizeImage", "Controller", new { urlImage = "<url_image>", width = 35 })" />
And this worked very fine to me!
这对我来说非常有效！
Ideally will be better to save the image beforehand in diferent widths, using this resize algorithm, to avoid the controller process in every image load.
理想情况下，使用此调整大小算法预先以不同的宽度保存图像会更好，以避免在每个图像加载中进行控制器处理。
(Sorry for my poor english, I'm brazilian...)
（对不起，我的英语不好，我是巴西人……）
回答by Soviut
You should try to maintain a proper aspect ratio between the sizes you're scaling from and to. For example, if your target size is 28px, then your source size should be a power of that, such as 56 (28 x 2) or 112 (28 x 4). This ensures you can scale by 50% or 25% rather than the 0.233333% you're currently using.
您应该尝试在缩放的大小之间保持适当的纵横比。例如，如果您的目标尺寸是 28 像素，那么您的源尺寸应该是它的幂，例如 56 (28 x 2) 或 112 (28 x 4)。这确保您可以按 50% 或 25% 而不是您当前使用的 0.233333% 进行缩放。
回答by Timothy Armstrong
Your problem is that you are relying on the browser to resize your images. Browsers have notoriously poor image scaling algorithms, which will cause the ugly pixelization.
您的问题是您依赖浏览器来调整图像大小。众所周知，浏览器的图像缩放算法很差，这会导致丑陋的像素化。
You should resize your images in a graphics program first before you use them on the webpage.
您应该先在图形程序中调整图像大小，然后再在网页上使用它们。
Also, you have a spelling mistake: it should say moz-crisp-edges; however, that won't help you in your case (because that resizing algorithm won't give you a high quality resize: https://developer.mozilla.org/En/CSS/Image-rendering)
另外，你有一个拼写错误：它应该说 moz-crisp-edges；但是，这对您的情况无济于事（因为调整大小算法不会为您提供高质量的调整大小：https: //developer.mozilla.org/En/CSS/Image-rendering）
回答by David Hoffman
IE Scaling Depends on Amount of Downsize
IE 缩放取决于缩小的数量
Some people said that an even fraction downsize avoids the problem. I disagree.
有些人说，即使缩小尺寸也可以避免这个问题。我不同意。
In IE11 I find that reducing an image by 50% (e.g. 300px to 150px) yields a jagged resize (like it's using nearest-neighbor). A resize to ~99% or 73% (e.g. 300px to 276px) yields a smoother image: bilinear or bicubic etc.
在 IE11 中，我发现将图像缩小 50%（例如 300px 到 150px）会产生锯齿状的调整大小（就像它使用最近的邻居一样）。调整到 ~99% 或 73%（例如 300px 到 276px）会产生更平滑的图像：双线性或双三次等。
In response I've been using images that are just retina-ish: maybe 25% bigger than would be used on a traditional 1:1 pixel mapping screen, so that IE only resizes a bit and doesn't trigger the ugliness.
作为回应，我一直在使用类似视网膜的图像：可能比传统的 1:1 像素映射屏幕上使用的图像大 25%，因此 IE 只调整一点大小，不会触发丑陋。
回答by James
This is possible! At least now that css transforms have good support:
这个有可能！至少现在 css 转换有很好的支持：
You need to use a CSS transform to scale the image - the trick is not just to use a scale(), but also to apply a very small rotation. This triggers IE to use a smoother interpolation of the image:
您需要使用 CSS 转换来缩放图像 - 技巧不仅是使用 scale()，而且还应用非常小的旋转。这会触发 IE 使用更平滑的图像插值：
img {
/* double desired size */
width: 56px;
height: 56px;
/* margins to reduce layout size to match the transformed size */
margin: -14px -14px -14px -14px;
/* transform to scale with smooth interpolation: */
transform: scale(0.5) rotate(0.1deg);
}
回答by MarkBaillie
I've seen the same thing in firefox, css transform scaled transparent png's looking very rough.
我在 Firefox 中看到过同样的事情，css 变换缩放透明 png 看起来很粗糙。
I noticed that when they previously had a background color set the quality was much better, so I tried setting an RGBA background with as low an opacity value as possible.
我注意到，当他们以前设置背景颜色时，质量要好得多，所以我尝试设置一个 RGBA 背景，使其不透明度值尽可能低。
background:rgba(255,255,255,0.001);
This worked for me, give it a try.
这对我有用，试一试。
回答by Chris
Seems Chrome downscaling is best but the real question is why use such a massive image on the web if you use show is so massively scaled down? Downloadtimes as seen on the test page above are terrible. Especially for responsive websites a certain amount of scaling makes sense, actually more a scale up than scale down though. But never in such a (sorry pun) scale.
似乎 Chrome 缩小是最好的，但真正的问题是，如果您使用 show 如此大规模地缩小，为什么要在网络上使用如此大的图像？在上面的测试页面上看到的下载时间很糟糕。特别是对于响应式网站，一定程度的缩放是有意义的，但实际上更多的是放大而不是缩小。但从来没有这样（抱歉，双关语）规模。
Seems this is more a theoretical problem which Chrome seems to deal with nicely but actually should not happen and actually should not be used in practice IMHO.
似乎这更像是一个理论问题，Chrome 似乎很好地处理了它，但实际上不应该发生，实际上不应该在实践中使用恕我直言。
回答by JimmyDee
Remember that sizes on the web are increasing dramatically. 3 years ago, I did an overhaul to bring our 500 px wide site layout to 1000. Now, where many sites are doing the jump to 1200, we jumped past that and went to a 2560 max optimized for 1600 wide (or 80% depending on the content level) main content area with responsiveness to allow the exact same ratios and look and feel on a laptop (1366x768) and on mobile (1280x720 or smaller).
请记住，网络上的尺寸正在急剧增加。3 年前，我进行了大修，将 500 px 宽的网站布局调整为 1000。现在，许多网站都在跳到 1200 像素，我们跳过了这一点，并转到了针对 1600 像素进行优化的最大 2560 像素（或 80%，具体取决于在内容级别）具有响应能力的主要内容区域，以允许在笔记本电脑（1366x768）和移动设备（1280x720 或更小尺寸）上具有完全相同的比例和外观。
Dynamic resizing is an integral part of this and will only become more-so as responsiveness becomes more and more important in 2013.
动态调整大小是其中不可或缺的一部分，并且只会随着响应能力在 2013 年变得越来越重要而变得越来越重要。
My smartphone has no trouble dealing with the content with 25 items on a page being resized - neither the computation for resizing nor the bandwidth. 3 seconds loads the page from fresh. Looks great on our 6 year old presentation laptop (1366x768) and on the projector (800x600).
我的智能手机可以轻松处理调整大小的页面上 25 个项目的内容 - 无论是调整大小的计算还是带宽。3 秒从新加载页面。在我们 6 岁的演示笔记本电脑 (1366x768) 和投影仪 (800x600) 上看起来很棒。
Only on Mozilla Firefox does it look genuinely atrocious. It even looks just fine on IE8 (never used/updated since I installed it 2.5 years ago).
只有在 Mozilla Firefox 上，它看起来才真正残暴。它甚至在 IE8 上看起来也很好（自从我 2.5 年前安装它以来从未使用/更新过）。
