Html 图像缩放会导致firefox/internet explorer的质量差，但不会导致chrome

在Chrome中查看，然后在Firefox或Internet Explorer中查看。图像最初是120px，我正在缩小到28px，但是不管你把它缩小到什么程度，它看起来都很糟糕

该图像是一个PNG，它有一个alpha通道（透明度）

以下是相关代码：

HTML:

---

CSS的

图像渲染

和

-ms插值模式

行似乎没有任何作用，但我在对问题进行一些研究时在线找到了它们。

您的问题是，您依赖浏览器来调整图像的大小。浏览器的图像缩放算法是出了名的差，这将导致难看的像素化

在网页上使用图像之前，应先在图形程序中调整图像的大小

---

此外，你还有一个拼写错误：应该是moz crisp Edge；但是，这对您的情况没有帮助（因为这种调整大小的算法不会为您提供高质量的调整大小：）

您似乎是对的。没有任何选项可以更好地缩放图像：

我测试了FF14、IE9、OP12和GC21。只有GC具有更好的伸缩性，可以通过

图像渲染：-webkit优化对比度
来停用。所有其他浏览器都没有/伸缩性差

不同输出的屏幕截图：

2017年更新

同时，还有一些浏览器支持平滑缩放：

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

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

值optimizeQuality和optimizeSpeed出现在早期草稿中
（和SVG对应）定义为
自动值


OP43的行为类似于GC（并不是令人惊讶的），它仍然使用此选项禁用平滑缩放：

image-rendering: -webkit-optimize-contrast



在IE9-IE11中没有支持。
-ms插值模式
设置仅在IE6-IE8中起作用，但不起作用

默认情况下，将执行p.S.平滑缩放。这意味着不需要
图像渲染
选项
 在不同浏览器中“正常化”外观的一种方法是使用“服务器端”调整图像大小。使用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());
            }
        }
    }
}

使用System.IO；
使用System.Web.Helpers；
使用系统图；
使用系统、绘图、成像；
使用System.Drawing.Drawing2D；
使用System.Collections.Generic；
公共静态类WebImageExtension
{
私有静态只读IDictionary透明格式=
新字典（StringComparer.OrdinalIgnoreCase）{{{“png”，ImageFormat.png}，{“gif”，ImageFormat.gif}；
公共静态WebImage调整大小（此WebImage图像，整数宽度）
{
double aspectRatio=（double）image.Width/image.Height；
变量高度=转换为32（宽度/纵横比）；
图像格式；
if（！TransparencyFormats.TryGetValue（image.ImageFormat.ToLower（），out format））
{
返回图像。调整大小（宽度、高度）；
}
使用（图像大小图像=新位图（宽度、高度））
{
使用（var source=new位图（new MemoryStream（image.GetBytes（）））
{
使用（Graphics g=Graphics.FromImage（resizedImage））
{
g、 SmoothingMode=System.Drawing.Drawing2D.SmoothingMode.AntiAlias；
g、 插值模式=System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic；
g、 DrawImage（源、0、0、宽度、高度）；
}
}
使用（var ms=new MemoryStream（））
{
resizedImage.Save（ms，格式）；
返回新的WebImage（ms.ToArray（））；
}
}
}
}

请注意选项InterpolationMode.HighQualityBicubic。这是Chrome使用的方法

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

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

“，宽度=35}）”/>

这对我来说非常好

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

（对不起，我的英语很差，我是巴西人……
您应该尝试在缩放的大小之间保持适当的纵横比。例如，如果目标大小为28px，则源大小应为该大小的幂，例如56（28x2）或112（28x4）。这确保了你可以按50%或25%的比例缩放，而不是你目前使用的0.233333%。
Chrome缩小比例似乎是最好的，但真正的问题是，如果你使用show，为什么要在web上使用如此巨大的图像？上面的测试页面上显示的下载时间非常糟糕。特别是对于响应速度快的网站，一定程度的缩放是有意义的，实际上是放大而不是缩小。但从来没有这样（抱歉的双关语）的规模

这似乎更像是一个理论问题，Chrome似乎很好地解决了这个问题，但实际上不应该发生，实际上也不应该在实践中使用。请记住，web上的大小正在急剧增加。3年前，我做了一次大修，将我们500像素宽的站点布局提升到1000像素。现在，许多网站都在跳转到1200，我们跳转到了一个2560最大值，针对1600宽（或80%，取决于内容级别）的主内容区域进行了优化，具有响应能力，以便在笔记本电脑（1366x768）和移动设备（1280x720或更小）上实现完全相同的比率和外观

动态调整大小是其中不可或缺的一部分，而且随着响应能力的提高，它只会变得越来越重要
<img src="@Url.Action("ResizeImage", "Controller", new { urlImage = "<url_image>", width = 35 })" />

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

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

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