Lorsqu'elles sont redimensionnées arbitrairement via le code HTML (width="..." height="...") ou CSS (width: ... height: ...), les images doivent être lissées pour ne pas heurter l'œil du visiteur à cause d'effets d'escaliers disgracieux.
De nos jours les navigateurs modernes s'en sortent relativement bien, mais ce n'était malheureusement pas le cas sur les anciens navigateurs qui furent lancés à une époque où la puissance des ordinateurs était encore assez limitée pour ne pouvoir garantir le lissage de toutes les images lors d'une navigation web quotidienne.
A gauche l'image d'origine (250 pixels de large), à droite la même image pour laquelle l'attribut width="300" a été spécifié.
Capture sous Mozilla Firefox, Apple Safari, Google Chrome
Le résultat est propre et sans bavure.
Capture sous Opera
L'algorithme est un peu moins performant mais cela reste regardable.
Capture sous Internet Explorer 6 et 7
Cachez ces pixels que je ne saurais voir !
Il est néanmoins possible de forcer le lissage bicubique sur ces navigateurs dépassés grâce à deux astuces respectives, lors de l'agrandissement ou de la réduction des images.
Fix pour Internet Explorer 7
Pour Internet Explorer 7 il est possible d'utiliser une simple directive CSS, nommée -ms-interpolation-mode.
img { -ms-interpolation-mode: bicubic; }
L'autre propriété (par défaut) de -ms-interpolation-mode (qui a été introduit avec IE7) est nearest-neighbor.
Fix pour Internet Explorer 6
Il va falloir ruser pour créer un élément englobant l'image, modifier son apparence grâce à un filtre AlphaImageLoader qui permet le lissage, et masquer l'image d'origine elle-même en fixant son opacité à 0.
<span style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='galets.jpg', sizingMethod='scale');position: absolute; z-index: 100; width: 300px; display: inline-block;"><img src="galets.jpg" alt="" width="300" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" /></span>
Résultat final sous Internet Explorer 6 et 7
Attention : ces contournements ne seront pas valides en CSS car il s'agit d'instructions propriétaires Microsoft. Vous pouvez bien entendu les placer dans une feuille de style spécifique aux navigateurs IE, ou à l'aide de commentaires conditionnels.
Ceci ne fonctionne que pour des images de type JPEG et GIF non transparent. L'idéal reste bien entendu de ne pas redimensionner les images ainsi "à la volée" dans le navigateur.
Commentaires
Merci pour l'astuce, en général je ne change pas la taille des images via le navigateur mais ça peut être utile.
C'est important de mettre la taille dans les propriétés de l'image ? Je tape encore à la main, ça risque de devenir casse-bonbon.
@Soky, oui c'est important ça permet de ne pas casser le site si un image n'est pas affichée et sur une petite connexion ça évite les effets de construction au fur et à mesure.
Sinon concernant Opera, la v10.50 améliore grandement le rendu des images redimensionnées. Cette version est disponible en pré-alpha.
Filter n'est pas à éviter pour des raisons de performance ?
Dans YSlow et dans les best pratices de Yahoo :
http://developer.yahoo.com/performance/rules....
Bien évidemment, un filtre va nécessiter plus de puissance que l'absence de traitement sur l'image. A chacun de choisir la solution qui lui convient et de faire les tests qui s'imposent.
bonne astuce, mais je préfère éviter d'avoir à l'utiliser.
Je pense que si on en vient à vouloir afficher une image à une plus grande échelle que celle d'origine, il y a un problème de conception quelque part.
Mais bon... il y a certainement des cas où c'est indispensable :)
J'ai testé sur une réduction d'image : le rendu est parfait, meilleur que Firefox. Si ça consomme trop de ressources, il vaut mieux ne pas l'utiliser...
Arf je viens de voir que la performance n'entre en compte que pour IE6 où il faut utiliser le filter alpha. Est-ce que IE7 a besoin de plus de performances pour utiliser sa propriété propriétaire ?