Pourquoi Firefox est-il si mauvais pour redimensionner les images?

À gauche, le format PNG d’origine et à droite, les versions réduites à environ la moitié de la taille d’origine en utilisant <img width and height . Voir [Lien supprimé].

Pourquoi l’image redimensionnée est-elle si floue dans Firefox? Est-ce que je peux faire quelque chose sans changer le fichier image? Le flou est particulièrement agaçant si l’image contient de grandes quantités de mathématiques ou de texte.

entrer la description de l'image ici

Il y a un ticket de bogue de longue date déposé dans Bugzilla concernant la réduction d’échelle des images de Firefox. Vous voudrez peut-être garder un œil sur le ticket pour suivre sa résolution éventuelle ou consortingbuer vous-même à un patch si vous le souhaitez.

La meilleure solution consiste à utiliser la propriété CSS de transform pour appliquer une petite rotation à l’image problème et forcer le rendu des sous-pixels, comme indiqué dans la réponse de Ryan Wheale .

Je sais que c’est en retard, mais vous pouvez faire passer Firefox pour améliorer l’image en appliquant une très légère rotation. J’ai essayé de translate() l’image pour obtenir le même effet … en vain.

CSS

 .image-scale-hack { transform: rotate( .0001deg ); } 

Javascript

 if( "MozAppearance" in document.documentElement.style ) { $('.logo img').addClass('image-scale-hack'); } 

J’évite les reniflages de navigateur à tout prix. J’ai emprunté ce sniff à yepnope.js et je ne me sens pas mal à ce sujet.

Il convient également de noter que cette même astuce peut être utilisée pour forcer un rendu d’image de sous-pixel à la fois dans Webkit et Firefox. Ceci est utile pour les animations très lentes – par exemple:

http://jsfiddle.net/ryanwheale/xkxwN/

La documentation de rendu d’image liée à Firefox brouille une image lorsqu’elle est redimensionnée via css ou une réponse de style en ligne que Su ‘référencé inclut des instructions pour utiliser image-rendering:optimizeQuality (qui corrige le problème lors de mes tests sur FF4) – exemple:

entrer la description de l'image ici

Je pense que votre réponse se trouve dans le lien ci-dessus https://developer.mozilla.org/En/CSS/Image-rendering : ‘Actuellement, auto et OptimalQuality sont égaux par défaut, les deux entraînent un ré-échantillonnage bilinéaire.’ ‘valeur par défaut IE8 +: bicubique (haute qualité)’

Ensuite, rendez-vous sur: http://www.codinghorror.com/blog/2007/07/better-image-resizing.html ‘Lorsque vous faites une image plus petite, utilisez bicubic, qui a un effet de netteté naturel. Vous souhaitez mettre l’accent sur les données qui restnt dans la nouvelle image plus petite après avoir éliminé tout ce détail supplémentaire de l’image d’origine. ‘

Je peux penser à quelques solutions possibles, mais aucune n’est simple:

  1. Redimensionnez l’image sur le serveur. Servez-le à moitié, et permettez à Firefox de le redimensionner au maximum (ce qui est sans doute acceptable) ou d’utiliser des URL différentes pour les différentes tailles d’image.
  2. Vous pourrez peut-être faire cela dans le navigateur avec des plugins (mais l’exemple que j’ai trouvé ne fait pas vraiment ce dont vous avez besoin, alors je l’ai supprimé).

TL; DR: La mise à l’échelle de l’image ne sera probablement pas corrigée prochainement. A propos de n’importe où

Version plus longue:

Eris Brasseur a une page qui traite bien de la question plus large “Pourquoi tout logiciel de dimensionnement d’image est-il si mauvais?”

http://www.4p8.com/eric.armseur/gamma.html

Étant donné que la position du W3C sur cette question est à peu près la même qu’il est préférable d’avoir une implémentation incorrecte mais tout aussi incorrecte, ils évitent toute manipulation correcte du Gamma (ce qui compliquerait légèrement les choses). Ainsi, toute personne habituée aux standards du Web est susceptible de continuer à ignorer Gamma, entraînant les effets décrits par Eric et dans ce fil. Cela garantit que même la réduction d’échelle est loin d’être bien définie, comme le dit Jeff Atwood dans un article lié dans une autre réponse.

Dans un tel environnement, les méthodes telles que Lanczos se développent, dont la réputation est principalement liée au fait qu’elles fonctionnent très bien, même si elles ne sont pas correctement implémentées.

En d’autres termes, les navigateurs sont l’équivalent logiciel des hamburgers de McDonald’s, et cela restra le cas. Ses implications n’ont pas besoin, mais les chances sont faussées.

Maintenant (2017) le bug est fermé il y a 2 ans. Un petit test:

FF, 50%:

FF, 50%

FF, 25%:

FF, 25%

Une solution à ce problème consiste à redimensionner l’image d’origine avec un éditeur d’image à la taille souhaitée et à utiliser l’image telle qu’elle est, sans définir la largeur et la hauteur dans la feuille de style.