图像缩放会导致 Firefox/Internet Explorer 质量不佳，但不会导致 chrome

Posted 2023-03-06

【中文标题】图像缩放会导致 Firefox/Internet Explorer 质量不佳，但不会导致 chrome

【英文标题】：Image scaling causes poor quality in firefox/internet explorer but not chrome

【发布时间】：2012-04-14 06:42:39

【问题描述】：

在 Chrome 中查看 http://jsfiddle.net/aJ333/1/，然后在 Firefox 或 Internet Explorer 中查看。图片原本是 120px，我现在缩小到 28px，但是无论你缩小到什么，它看起来都非常糟糕。

图像是 PNG，并且具有 Alpha 通道（透明度）。

以下是相关代码：

html：

<a href="http://tinypic.com?ref=2z5jbtg" target="_blank">
    <img src="http://i44.tinypic.com/2z5jbtg.png" border="0" >
</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这几行好像没什么作用，但是我在网上查了一下问题，在网上找到了。

【问题讨论】：

我最近的FF nightly，发现渲染和chrome一样好。这是FF18(latest stable)和FF21(latest nightly)的截图

【参考方案1】：

您的问题是您依赖浏览器来调整图像大小。众所周知，浏览器的图像缩放算法很差，这会导致丑陋的像素化。

您应该先在图形程序中调整图像大小，然后再在网页上使用它们。

另外，你有一个拼写错误：它应该是 moz-crisp-edges；但是，这对您的情况没有帮助（因为调整大小算法不会为您提供高质量的调整大小：https://developer.mozilla.org/En/CSS/Image-rendering）

【讨论】：

这是真的，但它确实使得在保留现有占位符图像的同时可视化更大的图像边界框变得异常困难......

鉴于响应式网页设计的最新发展，这不再是选项。如今，响应式设计通常使用较大的图像，然后将它们缩小以满足 CSS 中设置的任何媒体查询断点。

同样，在 iPhone 和 iPad 上的视网膜显示器等高 DPI 显示器上实现清晰图像的唯一方法是创建两倍大的图像并将其缩放到 50%。

虽然我不同意retina 的论点（你应该只在需要时提供retina 图像），但还有很多其他情况会发生缩放。就像任何时候你有一个涉及调整大小的动画一样。

如果您在需要动态缩放的响应式网站中有图像，则不是有效的解决方案。除非您为每种可能的分辨率都建议一个缩放图像，在这种情况下，您将增加加载时间。

【参考方案2】：

看来你是对的。没有任何选项可以更好地缩放图像：http://www.maxrev.de/html/image-scaling.html

我已经测试过 FF14、IE9、OP12 和 GC21。只有 GC 具有更好的缩放比例，可以通过image-rendering: -webkit-optimize-contrast 停用。所有其他浏览器的缩放都没有/很差。

不同输出的屏幕截图：http://www.maxrev.de/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

注意：Regarding MDN optimizeQuality 设置是 auto 的同义词（但 auto 不会禁用平滑缩放）：

早期草稿中存在的值 optimizeQuality 和 optimizeSpeed （并且来自其 SVG 对应物）被定义为 自动值。

OP43 的行为类似于 GC（并不令人惊讶，因为它是 based on Chromium since 2013）并且它仍然是禁用平滑缩放的这个选项：

image-rendering: -webkit-optimize-contrast

在 IE9-IE11 中不支持。 -ms-interpolation-mode 设置仅在 IE6-IE8 中有效，但为 removed in IE9。

附：默认情况下完成平滑缩放。这意味着不需要image-rendering 选项！

【讨论】：

肯定在 IE10 中得到确认，尽管谷歌浏览器确实在最新版本中为我平滑了缩小的图像。所有浏览器都应该这样做。太令人沮丧了！

我已经在 FF3.6 中对其进行了测试，两者 (JPG+PNG) 看起来都与当前版本的 Chrome (29) 一样好，但没有任何 CSS 选项。你能解释一下为什么缩放应该是不好的吗？

@FLekschas 我重新测试了所有浏览器，Firefox 现在支持良好的缩放。 Microsoft Edge 也是如此。

那么分辨率是多少，创建一个 28px 高的 png 文件版本，这样它就不必在锚元素中缩放？

【参考方案3】：

在不同浏览器中“标准化”外观的一种方法是使用“服务器端”来调整图像大小。使用 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使用的方法。

现在您需要在网页中发布。让我们使用剃须刀：

<img src="@Url.Action("ResizeImage", "Controller", new  urlImage = "<url_image>", width = 35 )" />

这对我来说效果很好！

理想情况下，最好事先以不同的宽度保存图像，使用此调整大小算法，以避免每次图像加载时控制器处理。

（对不起我的英语不好，我是巴西人......）

【讨论】：

using System.Web.Helpers; 在哪里生成错误，我们需要为此下载任何库吗..

这不是浏览器渲染的修复。它是可以在服务器上调整图像大小的众多解决方案中的一种。

下采样只会让问题变得更糟，关键是使用大图像，然后让浏览器缩小到亚像素分辨率以防止像素化，但浏览器似乎不能正确地做到这一点。跨度>

我想知道这样做有多可行，然后在客户端上有一个函数，当它认为图像可能会调整大小时，它会返回服务器再次执行所有这些操作。目前（2017 年）这仅在 Internet Explorer 上需要，但仍然需要。

【参考方案4】：

您应该尝试在要缩放的尺寸之间保持适当的纵横比。例如，如果您的目标尺寸是 28px，那么您的源尺寸应该是它的幂，例如 56 (28 x 2) 或 112 (28 x 4)。这可确保您可以扩展 50% 或 25%，而不是当前使用的 0.233333%。

【讨论】：

在可能的情况下很好，但是有些用户会在大型用户用例中上传奇怪的比例

【参考方案5】：

似乎 Chrome 缩小比例是最好的，但真正的问题是，如果你使用的显示如此大规模缩小，为什么还要在网络上使用如此巨大的图像？在上面的测试页面上看到的下载时间很糟糕。尤其是对于响应式网站，一定程度的缩放是有意义的，但实际上更多的是放大而不是缩小。但从来没有这样的（对不起双关语）规模。

似乎这更像是一个理论上的问题，Chrome 似乎可以很好地处理，但实际上不应该发生，实际上不应该在实践中使用恕我直言。

【参考方案6】：

请记住，网络上的尺寸正在急剧增加。 3 年前，我进行了一次大修，将我们 500 像素宽的网站布局提高到 1000。现在，许多网站都在跳到 1200，我们跳过了这一点，达到了 2560 的最大值，优化为 1600 宽（或 80% 取决于在内容级别）具有响应能力的主要内容区域，可在笔记本电脑（1366x768）和移动设备（1280x720 或更小）上实现完全相同的比例和外观。

动态调整大小是其中不可或缺的一部分，并且只会变得越来越重要，因为 2013 年响应能力变得越来越重要。

我的智能手机可以毫无问题地处理页面上的 25 个项目正在调整大小的内容——无论是调整大小的计算还是带宽。 3 秒从新加载页面。在我们使用了 6 年的演示笔记本电脑 (1366x768) 和投影仪 (800x600) 上看起来很棒。

只有在 Mozilla Firefox 上它看起来真的很糟糕。它甚至在 IE8 上看起来还不错（自从我 2.5 年前安装它以来从未使用/更新过）。

【讨论】：

这没有回答原始问题，因为该问题与在某些浏览器中缩小图像时的质量有关，并且这与考虑未来校对时的最佳网络实践有关。

【参考方案7】：

我在firefox看到过同样的事情，css transform scaled transparent png的看起来很粗糙。

我注意到，当他们以前设置背景颜色时，质量要好得多，所以我尝试设置不透明度值尽可能低的 RGBA 背景。

background:rgba(255,255,255,0.001);

这对我有用，试一试。

【参考方案8】：

迟到的答案，但这有效：

/* 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/

【讨论】：

这个解决方案的问题是它以前在其他浏览器中看起来很好，然后它们看起来都很垃圾。

【参考方案9】：

IE 缩放取决于缩减量

有人说偶数缩小可以避免这个问题。我不同意。

在 IE11 中，我发现将图像缩小 50%（例如 300 像素到 150 像素）会产生锯齿状的调整大小（就像它使用最近邻一样）。 将大小调整到 ~99% 或 73%（例如 300 像素到 276 像素）会产生更平滑的图像：双线性或双三次等。

作为回应，我一直在使用类似视网膜的图像：可能比在传统 1:1 像素映射屏幕上使用的图像大 25%，因此 IE 只会调整一点大小而不会触发丑陋.

【参考方案10】：

这是可能的！至少现在 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);

【讨论】：

太有趣了，2017 年的解决方案是将图像旋转足够多，以使其在浏览器中呈现不同的呈现方式，但用户不会注意到......太 hacky