Pourquoi Firefox est-il si mal à redimensionner les images?

Question

À gauche, le fichier PNG original et à droite, les versions réduites à environ la moitié de la taille originale avec <img width et height . Voir [Lien supprimé].

Pourquoi l'image redimensionnée est-elle si floue dans Firefox? Y a-t-il quelque chose que je puisse faire 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.

Answer 1

Je sais que c'est tard, mais vous pouvez tromper firefox dans le rendu de l'image amélioré par l'application d'un oh-so-légère rotation. J'ai essayé d' translate() l'image pour obtenir le même effet... en vain.

img {
    transform: rotate( .0001deg );
}

À noter également, cette même astuce peut être utilisée pour forcer les sous-pixel de l'image de rendu dans les deux webkit et mozilla firefox. Ceci est utile pour les très lent animations - mieux expliqué par exemple:

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

EDIT: Veuillez s'il vous plaît NE PAS ajouter le code ci-dessus à votre feuille de style!! Cela force le navigateur à faire plus de maths que feriez habituellement. Utiliser seulement ont été vous en avez vraiment besoin! Je ne veux pas être responsable de la ligne ci-dessus sur chaque hasard écrite de la feuille de style. Au lieu de cela, votre CSS devrait ressembler à ceci:

CSS

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

Javascript

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

Ne me parlez pas de navigateur renifle. - Je les éviter à tout prix. J'ai emprunté cette détection de yepnope.js et je ne me sens pas mal à ce sujet.

Answer 2

Il y a un bug de longue date ticket déposé dans Bugzilla lié à Firefox image de downscaling. Vous aimeriez garder un œil sur le billet de suivre son éventuelle résolution ou de contribuer à un patch vous-même si vous vous en sentez capable.

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

Answer 3

L' image-rendu de la documentation liée à partir de l' Firefox flou d'une image lors du redimensionnement par css ou en ligne, le style de réponse que Su' référencé comprend des instructions pour l'utilisation de image-rendering:optimizeQuality (qui a corrigé le problème dans mes tests sur FF4) - exemple:

Answer 4

Je pense que votre réponse est dans le lien ci-dessus https://developer.mozilla.org/En/CSS/Image-rendering: "Actuellement auto et optimizeQuality sont égaux par défaut, à la fois résultat dans bilinéaire rééchantillonnage.' valeur par défaut IE8+: bicubique (haute qualité)'

Prochaine voir: http://www.codinghorror.com/blog/2007/07/better-image-resizing.html "Lorsque la réalisation d'une image plus petite, l'utilisation bicubique, qui a un naturel affûtage effet. Vous voulez mettre en valeur les données qui reste dans la nouvelle image plus petite après avoir écarté tous ce détail supplémentaire à partir de l'image d'origine.'

Je peux penser à un couple de solutions de contournement possibles, mais ne sont ni simples:

1. Redimensionner l'image sur le serveur. Soit le servir jusqu'à la moitié de la taille et de permettre à Firefox de l'échelle jusqu'à complète (dont on peut supposer qu'il sera ok), ou qui ont des Url différentes pour les différentes tailles d'image.
2. Vous pouvez être en mesure de faire ce travail dans le navigateur avec le plugin (mais l'exemple que j'ai trouvé n'est pas réellement ce que vous avez besoin, donc je l'ai enlevé).