La mise à l’échelle des images entraîne une qualité médiocre dans Firefox / Internet Explorer, mais pas dans Chrome

Voir http://jsfiddle.net/aJ333/1/ dans Chrome, puis dans Firefox ou Internet Explorer. L’image est à l’origine de 120 pixels, et je redescends à 28 pixels, mais ça a l’air pas mal, peu importe ce que vous réduisez.

L’image est un fichier PNG et possède un canal alpha (transparence).

Voici le code correspondant:

HTML:

 Image and video hosting by TinyPic  

CSS:

 a { width: 28px; height: 28px; display: block; } img { max-width: 100%; max-height: 100%; image-rendering: -moz-crisp-edges; -ms-interpolation-mode: bicubic; } 

Le image-rendering et les lignes de -ms-interpolation-mode de CSS ne semblaient pas faire quoi que ce soit, mais je les ai trouvées en ligne tout en faisant des recherches sur le problème.

Il semble que tu as raison. Aucune option n’améliore l’image:
http://www.maxrev.de/html/image-scaling.html

J’ai testé FF14, IE9, OP12 et GC21. Seul le GC a une meilleure mise à l’échelle qui peut être désactivée grâce au image-rendering: -webkit-optimize-contrast . Tous les autres navigateurs ont une mise à l’échelle nulle ou médiocre.

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

Mise à jour 2017

Pendant ce temps, d’autres navigateurs prennent en charge la mise à l’échelle en douceur:

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

  • FF51 (concernant le commentaire de @karthik depuis FF21) a une bonne mise à l’échelle qui peut être désactivée par les parameters suivants:

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

    Remarque: En ce qui concerne MDN, le paramètre OptimalQuality est synonyme de auto (mais auto ne désactive pas la mise à l’échelle en douceur):

    Les valeurs OptimalQuality et OptimalSpeed ​​présentes dans le premier brouillon (et provenant de son homologue SVG) sont définies comme synonymes pour la valeur automatique.

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

     image-rendering: -webkit-optimize-contrast 

Pas de support dans IE9-IE11. Le paramètre -ms-interpolation-mode n’a fonctionné que dans IE6-IE8, mais a été supprimé dans IE9 .

PS La mise à l’échelle en douceur est effectuée par défaut. Cela signifie qu’aucune option de image-rendering n’est nécessaire!

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 un autre lien qui parle de la prise en charge du navigateur:

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

Une façon de «normaliser» l’apparence dans les différents navigateurs consiste à utiliser votre «côté serveur» pour redimensionner l’image. Un exemple utilisant un contrôleur C #:

 public ActionResult ResizeImage(ssortingng 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 System.Web.Helpers.

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 TransparencyFormats = new Dictionary(SsortingngComparer.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 Chrome.

Maintenant, vous devez publier dans une page Web. Permet d’utiliser le razor:

  

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

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

(Désolé pour mon anglais pauvre, 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 de l’image notoirement médiocres, ce qui provoquera la pixellisation laide.

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

De plus, vous avez une faute d’orthographe: il faut dire moz-crisp-edge; Cependant, cela ne vous aidera pas dans votre cas (car cet algorithme de redimensionnement ne vous donnera pas un redimensionnement de haute qualité: https://developer.mozilla.org/En/CSS/Image-rendering )

Vous devez essayer de maintenir un rapport d’aspect correct entre les tailles à partir desquelles vous effectuez la mise à l’échelle. Par exemple, si votre taille cible est de 28px, votre taille de source doit être une puissance de ce type, par exemple 56 (28 x 2) ou 112 (28 x 4). Cela garantit que vous pouvez effectuer une mise à l’échelle de 50% ou 25% plutôt que le 0,233333% que vous utilisez actuellement.

J’ai vu la même chose dans Firefox, css transforme les png transparents à l’échelle très rugueuse.

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

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

Cela a fonctionné pour moi, essayez-le.

La mise à l’échelle d’IE dépend du montant de la taille réduite

Certaines personnes ont dit qu’une fraction de taille réduite évite le problème. Je ne suis pas d’accord.

Dans IE11, je trouve que la réduction d’une image de 50% (par exemple, de 300 à 150 pixels) produit un redimensionnement irrégulier (comme dans le cas du plus proche voisin). Un redimensionnement à ~ 99% ou 73% (par exemple 300 à 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 1: 1 classique, 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 mettre l’image à l’échelle. L’astuce consiste non seulement à utiliser une échelle (), mais aussi à appliquer une très petite rotation. Cela permet à IE d’utiliser une interpolation plus fluide 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); } 

La réduction de la taille de Chrome est la meilleure, mais la vraie question est de savoir pourquoi utiliser une telle image sur le Web si vous utilisez show est tellement réduite? Les temps de téléchargement vus sur la page de test ci-dessus sont terribles. Surtout pour les sites Web réactifs, une certaine quantité d’échelle a du sens, en fait plus une échelle que de réduire. Mais jamais dans une telle échelle (désolé).

Il semble que ce soit plus un problème théorique que Chrome semble traiter de manière harmonieuse mais ne devrait en fait pas se produire et ne devrait en fait pas être utilisé dans la pratique à mon humble avis.

Rappelez-vous que les tailles sur le Web augmentent considérablement. Il y a 3 ans, j’ai effectué une refonte pour porter notre disposition de sites de 500 px à 1000. Maintenant, lorsque de nombreux sites font le saut à 1200, nous avons dépassé cette limite et sums passés à 2560 max. au niveau du contenu) la zone de contenu principale avec la réactivité pour permettre les mêmes ratios et l’apparence exactement sur un ordinateur portable (1366×768) et sur mobile (1280×720 ou plus petit).

Le redimensionnement dynamic en fait partie intégrante et ne deviendra plus que de plus en plus important en 2013.

Mon smartphone n’a aucun problème à gérer le contenu avec 25 éléments sur une page en cours de redimensionnement – ni le calcul du redimensionnement ni la bande passante. 3 secondes charge la page de frais. Parfait sur notre ordinateur portable de présentation de 6 ans (1366×768) et sur le projecteur (800×600).

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