La mise à l'échelle de l'Image provoque une mauvaise qualité dans firefox / internet explorer mais pas dans chrome

Réponse Tardive mais cela fonctionne:

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

Voici également un autre lien qui parle du support du navigateur:

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

Une façon de "normaliser" l'apparence dans les différents navigateurs est d'utiliser votre "côté serveur" pour redimensionner l'image. Un exemple utilisant un contrôleur C#:

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

Où WebImage est une classe dans le système.Web.Helper.

WebImageExtension est défini ci-dessous:

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

Notez L'option InterpolationMode.HighQualityBicubic. C'est la méthode utilisée par google Chrome.

Maintenant, vous devez publier dans une page web. Permet d'aller utiliser rasoir:

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

Et cela a très bien fonctionné pour Moi!

Idéalement, il sera préférable d'enregistrer l'image au préalable dans différentes largeurs, en utilisant cet algorithme de redimensionnement, pour éviter le processus de contrôleur dans chaque charge d'image.

(désolé pour mon pauvre anglais, je suis brésilien...)

Votre problème est que vous comptez sur le navigateur pour redimensionner vos images. Les navigateurs ont des algorithmes de mise à l'échelle d'image notoirement pauvres, ce qui entraînera la pixellisation laide.

Vous devez d'abord redimensionner vos images dans un programme graphique avant de les utiliser sur la page Web.

En outre, vous avez une erreur d'orthographe: il devrait dire moz-crisp-edges; cependant, cela ne vous aidera pas dans votre cas (parce que cet algorithme de redimensionnement ne vous donnera pas un redimensionnement de haute qualité: https://developer.mozilla.org/En/CSS/Image-rendering )

Vous devriez essayer de maintenir un rapport d'aspect approprié entre les tailles à partir de et vers. Par exemple, si votre taille cible est 28px, alors votre taille source devrait être une puissance de cela, telle que 56 (28 x 2) ou 112 (28 x 4). Cela garantit que vous pouvez évoluer de 50% ou 25% plutôt que le 0.233333% que vous utilisez actuellement.

J'ai vu la même chose dans firefox, CSS transform scaled transparent png est très rugueux.

J'ai remarqué que lorsqu'ils avaient auparavant une couleur d'arrière-plan définie, la qualité était bien meilleure, alors j'ai essayé de définir un arrière-plan RGBA avec une valeur d'opacité aussi faible que possible.

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

Cela a fonctionné pour moi, essayez - le.

IE mise à L'échelle dépend de la quantité de réduction

Certaines personnes ont dit qu'une réduction de la taille de la fraction even évite le problème. Je suis en désaccord.

Dans IE11, je trouve que la réduction d'une image de 50% (par exemple 300px à 150px) donne un redimensionnement dentelé (comme il utilise le plus proche voisin). Un redimensionnement à ~ 99% ou 73% (par exemple 300px à 276px) donne une image plus lisse: bilinéaire ou bicubique etc.

En réponse, j'ai utilisé des images qui ne sont que de la rétine: peut-être 25% plus grandes que celles qui seraient utilisées sur un Écran de mappage de pixels 1:1, de sorte que IE ne redimensionne qu'un peu et ne déclenche pas la laideur.

C'est possible! Au moins maintenant que les transformations css ont un bon support:

Vous devez utiliser une transformation CSS pour redimensionner l'image - l'astuce n'est pas seulement d'utiliser une scale(), mais aussi d'appliquer une très petite rotation. Cela déclenche IE pour utiliser une interpolation plus lisse de l'image:

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

Semble Chrome downscaling est le meilleur, mais la vraie question est pourquoi utiliser une telle image massive sur le web si vous utilisez show est si massivement réduit? Downloadtimes comme on le voit sur la page de test ci-dessus sont terribles. Surtout pour les sites sensibles une certaine quantité de mise à l'échelle est logique, en fait plus une mise à l'échelle que l'échelle vers le bas si. Mais jamais dans une telle échelle (jeu de mots désolé).

Semble que C'est plus un problème théorique que Chrome semble traiter bien mais ne devrait pas se produire et en fait ne devrait pas être utilisé dans la pratique IMHO.

Rappelez-vous que les tailles sur le web augmentent considérablement. Il y a 3 ans, j'ai fait une refonte pour amener notre mise en page de site de 500 px à 1000. Maintenant, où de nombreux sites font le saut à 1200, nous avons sauté au-delà et sommes allés à un 2560 max optimisé pour 1600 large (ou 80% selon le niveau de contenu) zone de contenu principal avec réactivité pour permettre les mêmes rapports et l'apparence sur un ordinateur portable (1366x768) et sur mobile (1280x720 ou plus petit).

Le redimensionnement dynamique fait partie intégrante de cela et ne fera que le devenir-de sorte que la réactivité devient de plus en plus importante en 2013.

Mon smartphone n'a aucun mal à gérer le contenu avec 25 éléments sur une page en cours de redimensionnement-ni le calcul pour le redimensionnement ni la bande passante. 3 secondes charge la page de frais. Ressemble beaucoup sur notre ordinateur portable de présentation de 6 ans (1366x768) et sur le projecteur (800x600).

Ce n'est que sur Mozilla Firefox que ça a l'air vraiment atroce. Il semble même très bien sur IE8 (jamais utilisé / mis à jour depuis que je l'ai installé il y a 2,5 ans).