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

Voir http://jsfiddle.net/aJ333/1/{[6] } dans Chrome, puis dans Firefox ou Internet Explorer. L'image est à l'origine 120px, et je réduis à 28px, mais elle a l'air mauvaise à peu près, peu importe ce que vous réduisez.

L'image est un PNG et il a un canal alpha (transparence).

Voici le code pertinent:

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

Les lignes image-rendering et -ms-interpolation-mode de CSS ne semblaient rien faire, mais je les ai trouvées en ligne pendant en faisant quelques recherches sur le problème.

49
demandé sur Taylor Edmiston 2012-03-30 18:53:53

10 réponses

, Il semble que vous avez raison. Aucune option ne redimensionne mieux l'image:
http://www.maxrev.de/html/image-scaling.html

J'ai testé FF14, IE9, OP12 et GC21. Seul GC a une meilleure mise à l'échelle qui peut être désactivée via image-rendering: -webkit-optimize-contrast. Tous les autres navigateurs n'ont pas ou mauvaise échelle.

Capture D'écran des différentes sorties: http://www.maxrev.de/files/2012/08/screenshot_interpolation_jquery_animate.png

Mise à Jour 2017

En attendant un peu plus les navigateurs prennent en charge la mise à l'échelle lisse:

  • ME38 (Microsoft Edge) a une bonne mise à l'échelle. Il ne peut pas être désactivé et cela fonctionne pour JPEG et PNG, mais pas pour GIF.

  • FF51 (en ce qui concerne le commentaire de @karthik depuis FF21) a une bonne mise à l'échelle qui peut être désactivée via les paramètres suivants:

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

    Note: concernant MDN le paramètre optimizeQuality est synonyme de auto (mais auto ne désactive pas la mise à l'échelle lisse):

    Les valeurs optimizeQuality et optimizeSpeed présent au début du projet (et provenant de son homologue SVG) sont définis comme des synonymes pour le valeur auto.

  • OP43 se comporte comme GC (pas surprenant car il est basé sur Chromium depuis 2013) et c'est toujours cette option qui désactive la mise à l'échelle lisse:

    image-rendering: -webkit-optimize-contrast
    

Aucun support dans IE9-IE11. Le paramètre -ms-interpolation-mode ne fonctionnait que dans IE6-IE8, mais était supprimé dans IE9.

P.S. la mise à l'échelle lisse est effectuée par défaut. Cela signifie pas de image-rendering l'option est nécessaire!

30
répondu mgutt 2017-05-23 11:54:44

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/

12
répondu trgraglia 2015-05-22 09:19:26

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...)

7
répondu Fernando Teles 2012-08-21 18:28:23

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 )

4
répondu Timothy Armstrong 2012-03-30 15:01:15

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.

4
répondu Soviut 2013-02-02 07:01:15

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.

1
répondu MarkBaillie 2014-01-24 10:01:12

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.

1
répondu David Hoffman 2016-06-22 16:42:46

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);
}
1
répondu James 2017-08-30 08:57:24

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.

0
répondu Chris 2013-02-02 11:26:12

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).

-2
répondu JimmyDee 2013-02-19 08:25:23