图像缩放会导致Firefox / Internet Explorer中的质量不佳，但不是Chrome浏览器
请在Chrome浏览器中查看http://jsfiddle.net/aJ333/1/ ，然后在Firefox或Internet Explorer中查看。 该图像最初是120px，而我缩小到28px，但不pipe怎样缩小到它看起来都差不多。
图像是一个PNG，它有一个alpha通道（透明度）。
以下是相关的代码：
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：
a { width: 28px; height: 28px; display: block; } img { max-width: 100%; max-height: 100%; image-rendering: -moz-crisp-edges; -ms-interpolation-mode: bicubic; }
CSS的image-rendering和-ms-interpolation-mode行似乎没有任何作用，但我发现它们在线，同时对这个问题做了一些研究。
看来你是对的。 没有选项可以更好地缩放图像：
http://www.maxrev.de/html/image-scaling.html
我testing过FF14，IE9，OP12和GC21。 只有GC具有更好的缩放比例，可以通过image-rendering: -webkit-optimize-contrast来禁用image-rendering: -webkit-optimize-contrast 。 所有其他浏览器都没有缩小比例。
不同输出的屏幕截图： http : files/2012/08/screenshot_interpolation_jquery_animate.png
2017年更新
同时一些浏览器支持平滑缩放：
-
ME38（Microsoft Edge）具有良好的扩展性。 它不能被禁用，它适用于JPEG和PNG，但不适用于GIF。
-
FF51（关于@karthik自FF21以来的评论）具有良好的缩放比例，可以通过以下设置禁用：
image-rendering: optimizeQuality image-rendering: optimizeSpeed image-rendering: -moz-crisp-edges注意： 对于MDN ，
optimizeQuality设置是auto的同义词（但auto不禁用平滑缩放）：早期草案（来自SVG对应部分）中存在的optimizeQuality和optimizeSpeed值被定义为自动值的同义词。
-
OP43的行为就像GC（ 自2013年起基于Chromium，并不令人惊讶），而且它仍然是禁用平滑缩放的选项：
image-rendering: -webkit-optimize-contrast
在IE9-IE11中不支持。 -ms-interpolation-mode设置仅在IE6-IE8中有效，但在IE9中被删除 。
PS平滑缩放是默认完成的。 这意味着不需要image-rendering选项！
迟到的答案，但这个作品：
/* 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://css-tricks.com/almanac/properties/i/image-rendering/
在不同浏览器中“正常化”外观的一种方法是使用“服务器端”来调整图像的大小。 一个使用C＃控制器的例子：
public ActionResult ResizeImage(string imageUrl, int width) { WebImage wImage = new WebImage(imageUrl); wImage = WebImageExtension.Resize(wImage, width); return File(wImage.GetBytes(), "image/png"); }
WebImage是System.Web.Helpers中的一个类。
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()); } } } }
注意选项InterpolationMode.HighQualityBicubic。 这是Chrome使用的方法。
现在你需要在网页上发布。 让我们使用razor：
<img src="@Url.Action("ResizeImage", "Controller", new { urlImage = "<url_image>", width = 35 })" />
而这对我来说很好！
理想情况下，使用这个resize的algorithm可以事先在不同的宽度上保存图像，以避免每个图像负载中的控制器进程。
（对不起我英文不好，我是巴西人…）
你的问题是你依靠浏览器来调整你的图像。 浏览器的图像缩放algorithm非常差，这将导致丑陋的像素化。
在网页上使用它们之前，您应该首先在graphics程序中调整图像大小。
另外，你有一个拼写错误：它应该说moz脆边; 但是，这不会帮助你的情况（因为resizealgorithm不会给你一个高质量的resize： https ： //developer.mozilla.org/En/CSS/Image-rendering ）
您应该尝试保持您缩放的尺寸之间的适当宽高比。 例如，如果您的目标尺寸是28px，那么您的源尺寸应该是该尺寸的幂，例如56（28 x 2）或112（28 x 4）。 这确保您可以缩放50％或25％，而不是您目前使用的0.233333％。
IE缩放取决于缩小的数量
有人说，缩小规模甚至可以避免这个问题。 我不同意。
在IE11中，我发现将图像缩小50％（例如300px到150px）会产生锯齿状resize（如使用最近邻居）。 resize到99％或73％（例如300px到276px）会产生更平滑的图像：双线性或双三次等
作为回应，我一直在使用仅仅是视网膜图像的图像：比在传统的1：1像素映射屏幕上使用的图像大25％，因此IE只resize，不会触发丑陋。
这个有可能！ 至less现在的CSS转换有很好的支持：
您需要使用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); }
似乎Chrome的缩小是最好的，但真正的问题是为什么使用如此大规模的图像在networking上，如果你使用show是如此大规模缩小？ 在上面的testing页面中看到的下载时间是可怕的。 特别是对于响应式网站来说，一定数量的缩放是有意义的，但实际上比缩小比例更大。 但从来没有这样（对比双关）的规模。
似乎这是一个理论上的问题，Chrome似乎很好地处理，但实际上不应该发生，实际上不应该在实践中使用恕我直言。
我已经看到在Firefox中的相同的东西，CSS变换缩放透明PNG的看起来很粗糙。
我注意到，当他们以前有一个背景颜色设置的质量好多了，所以我尝试设置尽可能低的不透明度的RGBA背景。
background:rgba(255,255,255,0.001);
这对我来说，试试看吧。
请记住，networking上的大小正在急剧增加。 3年前，我做了一次大修，把我们的500像素宽的网站布局提高到了1000个。现在，许多网站都跳到了1200，我们跳过去了，最后达到了最大宽度为2560的宽度（或者80％在内容层面）主要内容区域与响应能力允许在笔记本电脑（1366×768）和移动（1280×720或更小）上完全相同的比例和外观和感觉。
dynamicresize是其中不可或缺的一部分，只会变得更多 – 所以在2013年，响应速度变得越来越重要。
我的智能手机没有问题处理与调整页面上的25个项目的内容 – 既不是resize的计算，也不是带宽。 3秒钟从新鲜的页面加载页面。 看起来不错，我们的6年陈述笔记本电脑（1366×768）和投影仪（800×600）。
只有在Mozilla Firefox浏览器看起来真的很残酷。 它甚至在IE8上看起来很好（从2.5年前安装以来从未使用/更新过）。
