web-dev-qa-db-ja.com

画像のスケーリングにより、firefox / internet Explorerの品質が低下しますが、chrome

http://jsfiddle.net/aJ333/1/ in Chromeその後、FirefoxまたはInternet Explorerで。画像は元々120pxで、私は28pxに縮小しますが、何に縮小しても、見た目はかなり悪くなります。

画像はPNGであり、アルファチャネル（透明度）があります。

関連するコードは次のとおりです。

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-mode CSSの行は何もしないようでしたが、問題に関する調査を行っているときにオンラインで見つけました。

htmlcssimagecross-browserscaling
49
Andrew Rasmussen

あなたは正しいようです。画像をより良く拡大するオプションはありません：
http://www.maxrev.de/html/image-scaling.html

FF14、IE9、OP12、GC21をテストしました。 image-rendering: -webkit-optimize-contrastを使用して無効にできるスケーリングが優れているのはGCのみです。他のすべてのブラウザにはスケーリングがありません/不十分です。

さまざまな出力のスクリーンショット： http://www.maxrev.de/files/2012/08/screenshot_interpolation_jquery_animate.png

2017年に更新

一方、いくつかのブラウザはスムーズなスケーリングをサポートしています。

  • ME38（Microsoft Edge）には優れたスケーリングがあります。無効にすることはできず、JPEGおよびPNGで機能しますが、GIFでは機能しません。

  • FF51（FF21以降の@karthikのコメントに関して）には、以下の設定で無効にできるスケーリングがあります。

    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では削除されました でした。

追伸スムーズスケーリングはデフォルトで行われます。これは、image-renderingオプションが必要ないことを意味します！

33
mgutt

遅い答えですが、これは動作します：

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

13
trgraglia

さまざまなブラウザで外観を「正規化」する1つの方法は、「サーバー側」を使用して画像のサイズを変更することです。 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で使用される方法です。

次に、Webページで公開する必要があります。かみそりを使用してみましょう：

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

そして、これは非常にうまくいきました！

理想的には、このサイズ変更アルゴリズムを使用して、イメージをさまざまな幅で事前に保存し、すべてのイメージの読み込みでコントローラープロセスを回避する方が良いでしょう。

（英語が下手ですごめんなさい、私はブラジル人です...）

7
Fernando Teles

問題は、画像のサイズ変更をブラウザに依存していることです。ブラウザーの画像スケーリングアルゴリズムが貧弱であることが有名で、これがalgorithmsいピクセル化を引き起こします。

Webページで使用する前に、まずグラフィックプログラムで画像のサイズを変更する必要があります。

また、スペルミスがあります：moz-crisp-edgesと言うべきです。しかし、それはあなたの場合にはあなたを助けません（サイズ変更アルゴリズムはあなたに高品質のサイズ変更を与えないので： https://developer.mozilla.org/En/CSS/Image-rendering ）

4
Timothy Armstrong

スケーリング元とスケーリング先のサイズ間で適切なアスペクト比を維持するようにしてください。たとえば、ターゲットサイズが28pxの場合、ソースサイズは56（28 x 2）や112（28 x 4）など、そのべき乗でなければなりません。これにより、現在使用している0.233333％ではなく、50％または25％でスケーリングできます。

4
Soviut

IEのスケーリングはダウンサイズの量に依存する

一部の人々は、偶数の小サイズでも問題を回避すると述べました。同意しません。

IE11では、画像を50％（たとえば300pxから150px）縮小すると、ギザギザのサイズ変更が発生します（最近接を使用しているように）。 〜99％または73％（例：300pxから276px）にサイズ変更すると、より滑らかな画像が得られます：バイリニアまたはバイキュービックなど.

これに応えて、私は網膜に近い画像を使用しています。従来の1：1ピクセルマッピング画面で使用されるよりも25％大きい可能性があるため、IEは少しだけサイズを変更し、 ugさを引き起こしません。

1
David Hoffman

これは可能です！少なくとも今では、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);
}
1
James

私はFirefoxでも同じことを見てきました、CSSはスケーリングされた透明なPNGの変換を非常にラフに変換します。

彼らが以前に背景色を設定していたとき、品質がはるかに優れていることに気づいたので、できるだけ低い不透明度値でRGBA背景を設定しようとしました。

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

これでうまくいきました。試してみてください。

1
MarkBaillie

どうやらChromeダウンスケーリングが最適ですが、実際の質問は、ショーを使用する場合にWeb上でこのような大規模な画像を使用するのはなぜですか？レスポンシブWebサイトの場合、一定量のスケーリングは理にかなっており、実際にはスケールダウンよりもスケールアップの方が適切ですが、そのような（申し訳ありませんが）スケールでは決してありません。

これはもっと理論的な問題であると思われます。これはChromeはうまく対処しているようですが、実際には起こらないはずであり、実際にIMHOで使用すべきではありません。

0
Chris