web-dev-qa-db-fra.com

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

À gauche, le PNG d'origine et à droite, les versions réduites à environ la moitié de la taille d'origine à l'aide de <img width et height. Voir [Lien supprimé].

Pourquoi l'image redimensionnée semble-t-elle si floue dans Firefox. Y a-t-il quelque chose que je puisse faire à ce sujet sans changer le fichier image. Le flou est particulièrement gênant si l'image contient de grandes quantités de mathématiques ou de texte.

enter image description here

imagefirefoxresize
60
Frank Seifert

Il y a un ticket de bogue de longue date déposé dans Bugzilla lié à 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 apporter vous-même un correctif si vous le souhaitez.

La meilleure solution consiste à utiliser la propriété CSS transform pour appliquer une petite rotation à l'image problème et forcer le rendu sous-pixel, comme détaillé dans Réponse de Ryan Wheale .

28
Nick

Je sais que c'est tard, mais vous pouvez inciter Firefox à améliorer l'image en appliquant une rotation oh-si-légère. 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 à tout prix les reniflements du navigateur. J'ai emprunté ce reniflement à 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 le rendu d'image sous-pixel dans Webkit et Firefox. Ceci est utile pour les animations très lentes - mieux expliqué par l'exemple:

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

43
Ryan Wheale

La documentation de rendu d'image liée à partir de Firefox brouille une image lorsqu'elle est mise à l'échelle via css ou le style en ligne réponse à laquelle Su 'référencé inclut des instructions pour utiliser image-rendering:optimizeQuality (qui a corrigé le problème lors de mes tests sur FF4) - exemple:

enter image description here

12
danlefree

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

Voir ensuite: http://www.codinghorror.com/blog/2007/07/better-image-resizing.html 'Lorsque vous réduisez une image, utilisez bicubic, qui a un effet de netteté naturel. Vous souhaitez souligner les données qui restent dans la nouvelle image plus petite après avoir supprimé tous ces détails supplémentaires de l'image d'origine.

Je peux penser à quelques solutions de contournement possibles, mais aucune n'est simple:

  1. Redimensionnez l'image sur le serveur. Soit le servir à la moitié de la taille et permettre à Firefox de le mettre à l'échelle complète (ce qui sera probablement le cas), ou avoir des URL différentes pour les différentes tailles d'image.
  2. Vous pourrez peut-être faire fonctionner cela dans le navigateur avec des plugins (mais l'exemple que j'ai trouvé ne fait pas vraiment ce dont vous avez besoin, donc je l'ai supprimé).
3
GlennS

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

FF, 50%:

FF, 50%

FF, 25%:

FF, 25%

1
Tino Rüb

TL; DR: la mise à l'échelle de l'image ne devrait pas être corrigée prochainement. À peu près partout.

Version plus longue:

Eris Brasseur a une page qui répond bien à la question plus large "Pourquoi un logiciel de mise à l'échelle d'image est-il si mauvais?"

http://www.ericbrasseur.org/gamma.html

Étant donné que la position du W3C sur cette question est à peu près qu'il vaut mieux avoir une implémentation incorrecte mais également incorrecte partout, ils évitent tout traitement approprié avec Gamma (ce qui compliquerait légèrement les choses). Ainsi, toute personne habituée aux normes Web continuera probablement à ignorer Gamma, conduisant aux 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 Jeff Atwood le dit dans un article lié dans une autre réponse.

Dans un tel environnement, des méthodes comme Lanczos prospèrent, dont la renommée est surtout qu'elles fonctionnent assez bien même si elles sont mises en œuvre de manière incorrecte.

En d'autres termes, les navigateurs sont l'équivalent logiciel des hamburgers McDonald's, et ce fait restera. Ses implications n'ont pas besoin, mais les chances sont biaisées.

1
Simon Thum