Bildskalierung verursacht schlechte Qualität in Firefox/Internet Explorer, aber nicht in Chrome

Sehen http://jsfiddle.net/aJ333/1/ in Chrome und dann entweder in Firefox oder Internet Explorer. Das Bild ist ursprünglich 120 Pixel groß und ich verkleinere es auf 28 Pixel, aber es sieht ziemlich schlecht aus, egal auf was Sie es verkleinern.

Das Bild ist ein PNG und hat einen Alphakanal (Transparenz).

Hier ist der entsprechende Code:

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

Der image-rendering und -ms-interpolation-mode CSS-Zeilen schienen nichts zu bewirken, aber ich fand sie online, als ich etwas über das Problem recherchierte.

Es scheint, dass Sie recht haben. Keine Option skaliert das Bild besser:
http://www.maxrev.de/html/image-scaling.html

Ich habe FF14, IE9, OP12 und GC21 getestet. Nur GC hat eine bessere Skalierung, die sich durch deaktivieren lässt image-rendering: -webkit-optimize-contrast. Alle anderen Browser haben keine/schlechte Skalierung.

Screenshot der unterschiedlichen Ausgabe: http://www.maxrev.de/files/2012/08/screenshot_interpolation_jquery_animate.png

Aktualisierung 2017

Mittlerweile unterstützen einige weitere Browser Smooth Scaling:

• ME38 (Microsoft Edge) hat eine gute Skalierung. Es kann nicht deaktiviert werden und funktioniert für JPEG und PNG, aber nicht für GIF.

• FF51 (in Bezug auf den Kommentar von @karthik seit FF21) hat eine gute Skalierung, die durch die folgenden Einstellungen deaktiviert werden kann:

  image-rendering: optimizeQuality
  image-rendering: optimizeSpeed
  image-rendering: -moz-crisp-edges
  

  Notiz: Apropos MDN das optimizeQuality Einstellung ist ein Synonym für auto (aber auto deaktiviert nicht die glatte Skalierung):

  Die Werte optimizeQuality und optimizeSpeed, die im frühen Entwurf vorhanden sind (und von ihrem SVG-Gegenstück stammen), sind als Synonyme für den Wert auto definiert.

• OP43 verhält sich wie GC (auch wenn es nicht überraschend ist basierend auf Chromium seit 2013) und es ist immer noch diese Option, die die glatte Skalierung deaktiviert:

  image-rendering: -webkit-optimize-contrast
  

Keine Unterstützung in IE9-IE11. Der -ms-interpolation-mode Einstellung funktionierte nur in IE6-IE8, wurde aber in IE9 entfernt.

PS Glatte Skalierung erfolgt standardmäßig. Das bedeutet nein image-rendering Option ist erforderlich!

Späte Antwort, aber das funktioniert:

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

Hier ist auch ein weiterer Link, der sich mit der Browserunterstützung befasst:

https://css-tricks.com/almanac/properties/i/image-rendering/

Eine Möglichkeit, das Erscheinungsbild in den verschiedenen Browsern zu “normalisieren”, besteht darin, die Größe des Bildes “serverseitig” zu ändern. Ein Beispiel mit einem C#-Controller:

public ActionResult ResizeImage(string imageUrl, int width)
{
    WebImage wImage = new WebImage(imageUrl);
    wImage = WebImageExtension.Resize(wImage, width);
    return File(wImage.GetBytes(), "image/png");
}

wobei WebImage eine Klasse in System.Web.Helpers ist.

WebImageExtension ist unten definiert:

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

Beachten Sie die Option InterpolationMode.HighQualityBicubic. Dies ist die von Chrome verwendete Methode.

Jetzt müssen Sie auf einer Webseite veröffentlichen. Lass uns Rasiermesser benutzen:

<img src="https://stackoverflow.com/questions/9945363/@Url.Action("ResizeImage", "Controller", new { urlImage = "<url_image>", width = 35 })" />

Und das hat bei mir sehr gut funktioniert!

Idealerweise ist es besser, das Bild vorher in verschiedenen Breiten zu speichern, indem Sie diesen Größenänderungsalgorithmus verwenden, um den Controller-Prozess bei jedem Bildladen zu vermeiden.

(Sorry für mein schlechtes Englisch, ich bin Brasilianer…)

Ihr Problem ist, dass Sie sich auf den Browser verlassen, um die Größe Ihrer Bilder zu ändern. Browser haben notorisch schlechte Bildskalierungsalgorithmen, die die hässliche Pixelisierung verursachen.

Sie sollten Ihre Bilder zuerst in einem Grafikprogramm skalieren, bevor Sie sie auf der Webseite verwenden.

Außerdem haben Sie einen Rechtschreibfehler: Es sollte moz-crisp-edges heißen; Das wird Ihnen jedoch in Ihrem Fall nicht helfen (weil dieser Größenänderungsalgorithmus Ihnen keine qualitativ hochwertige Größenänderung liefert: https://developer.mozilla.org/En/CSS/Image-rendering)

Sie sollten versuchen, ein korrektes Seitenverhältnis zwischen den Größen beizubehalten, von und zu denen Sie skalieren. Wenn Ihre Zielgröße beispielsweise 28 Pixel beträgt, sollte Ihre Quellgröße eine Potenz davon sein, z. B. 56 (28 x 2) oder 112 (28 x 4). Dadurch wird sichergestellt, dass Sie um 50 % oder 25 % statt um die derzeit verwendeten 0,233333 % skalieren können.

Ich habe dasselbe in Firefox gesehen, CSS-Transformationsskalierte transparente PNGs, die sehr rau aussehen.

Mir ist aufgefallen, dass die Qualität viel besser war, wenn sie zuvor eine Hintergrundfarbe eingestellt hatten, also habe ich versucht, einen RGBA-Hintergrund mit einem möglichst niedrigen Deckkraftwert einzustellen.

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

Das hat bei mir funktioniert, probier es aus.

IE-Skalierung hängt von der Größe der Verkleinerung ab

Einige Leute sagten, dass eine Verkleinerung um einen Bruchteil das Problem vermeidet. Ich bin nicht einverstanden.

In IE11 finde ich, dass das Reduzieren eines Bildes um 50% (z. B. 300px auf 150px) zu einer gezackten Größenänderung führt (als würde der nächste Nachbar verwendet). Eine Größenänderung auf ~99 % oder 73 % (z. B. 300 Pixel auf 276 Pixel) ergibt ein glatteres Bild: bilinear oder bikubisch usw.

Als Reaktion darauf habe ich Bilder verwendet, die nur Retina-ähnlich sind: vielleicht 25 % größer als auf einem herkömmlichen 1:1-Pixel-Mapping-Bildschirm, sodass der IE die Größe nur ein wenig ändert und nicht die Hässlichkeit auslöst.