图像缩放导致firefox/Internet Explorer的质量不佳,但不是chrome

Question

在Chrome中查看http://jsfiddle.net/aJ333/1/,然后在Firefox或Internet Explorer中查看.图像最初是120像素,我缩小到28像素,但无论你将它缩小到什么程度,它看起来都很糟糕.

图像是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;
}

在image-rendering和-ms-interpolation-modeCSS的线条似乎并没有做任何事情,但我发现他们在网上,而做对这个问题的一些研究.

Answer 1

看来你是对的.没有选项可以更好地扩展图像: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
  

  注意:关于MDN,该optimizeQuality设置是auto(但auto不禁用平滑缩放)的同义词:

  早期草案中出现的值optimizeQuality和optimizeSpeed(来自其SVG对应物)被定义为自动值的同义词.

• OP43的行为类似于GC(自2013年以来它基于Chromium并不令人惊讶),它仍然是禁用平滑缩放的选项:

  image-rendering: -webkit-optimize-contrast
  

在IE9-IE11中不支持.该-ms-interpolation-mode设置仅适用于IE6-IE8,但在IE9中已删除.

PS平滑缩放默认完成.这意味着不需要任何image-rendering选项!

Answer 2

迟到的答案,但这有效:

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

Answer 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 })" />

这对我来说非常好!

理想情况下,最好使用此调整大小算法预先以不同的宽度保存图像,以避免每个图像加载中的控制器进程.

(抱歉我的英语很差,我是巴西人...)