image-rendering

Résumé

La propriété CSS image-rendering agit comme un indice pour l'user-agent afin de savoir comment il doit procéder pour le rendu des images.
image-rendering s'applique aux images redimensionnées (et à d'autres éléments, voir plus bas). Par exemple, si la taille naturelle d'une image est 100×100px mais que l'auteur de la page spécifie ces dimensions comme 200×200px (ou 50×50px), alors l'image devra être agrandie (ou réduite) aux nouvelles dimensions en utilisant l'algorithme spécifié. La mise à l'échelle peut aussi être appliquée suite à une interaction avec l'utilisateur (effet de zoom).

Syntaxe

image-rendering:  auto | inherit | optimizeSpeed | optimizeQuality | -moz-crisp-edges | -o-crisp-edges 

Valeurs

auto
Valeur par défaut, dépend de l'user-agent. Depuis la version 1.9 de Gecko (Firefox 3.0), Gecko utilise le redimensionnement bilinéaire (haute qualité).
optimizeQuality
Indique que l'user-agent doit mettre l'accent sur ma qualité plutôt que sur la rapidité de rendu. Gecko utilise le redimensionnement bilinéaire (haute qualité).
optimizeSpeed
L'user-agent utilise un algorithme de redimensionnement qui doit être rapide. Actuellement Gecko (Firefox) utilise le redimensionnement avec le plus proche voisin (qualité basse).
-moz-crisp-edges | -o-crisp-edges
Extensio Mozilla. Gecko (Firefox) utilise toujours le redimensionnement avec le plus proche voisin (qualité basse). utilisez cette valeur pour éviter que les bords des images agrandies soient flous. bug 423756.
-webkit-optimize-contrast
Extension WebKit (WebKit bug 56627). WebKit utilise un redimensionnement pixellisant. L'algorithme resemble à celui du plus proche voisin, mais ça peut être une version spécifique à WebKit, et d'autres algorithme peuvent êre utilisés pour cela aussi. Utilisez cette valeur pour éviter que les bords des images agrandies soient flous.
  • Actuellement auto et optimizeQuality sont égales par défaut, ils aboutissent tous deux à un redimensionnement bilinéaire.
  • Actuellement optimizeSpeed et -moz-crisp-edges sont égales, elles aboutissent toutes deux à un redimensionnement avec le plus proche voisin.
  • Attention : à la différence du moteur de rendu Gecko, optimizeSpeed et -webkit-optimize-contrast ne signifient par la même chose dans WebKit.

Exemples

img  { 
       image-rendering: optimizeQuality;  /* Firefox 3.6+ ; comportement identique à celui par défaut, pas besoin de spécifier */
       -ms-interpolation-mode: bicubic;   /* Internet Explorer 7.0 ; par défaut dans IE8+ */
     }
/* s'applique aux GIF et aux PNG ; évite les bords flous */

img[src$=".gif"], img[src$=".png"] {

                   image-rendering: -moz-crisp-edges;         /* Firefox */
                   -ms-interpolation-mode: nearest-neighbor;  /* IE */
                 }
html  { image-rendering: -moz-crisp-edges; }        /* toutes les images, vidéos, images d'arrière-plan */
img   { -ms-interpolation-mode: nearest-neighbor; } /* toutes les images, IE */
div { 
        background: url(chessboard.gif) no-repeat 50% 50%;
        image-rendering: -moz-crisp-edges;
}
video { image-rendering: optimizeSpeed; }

Exemples en direct

image-rendering:optimizeQuality; -ms-interpolation-mode:bicubic;
78%squares.gif 100%squares.gif 138%squares.gif réduitehut.jpg agrandieblumen.jpg

image-rendering:-moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering:-webkit-optimize-contrast; -ms-interpolation-mode:nearest-neighbor;
78%squares.gif 100%squares.gif 138%squares.gif réduitehut.jpg agrandieblumen.jpg

Notes

  • bug 486918 (qualité d'image très mauvaise en réduction)

Spécifications

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 1.1 (Second Edition) Recommendation  

Il n'y a pas de spécification CSS définissant cette propriété.

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base

image-rendering: auto | -webkit-optimize-contrast

3.6 (1.9.2)
image-rendering
7.0
-ms-interpolation-mode: bicubic | nearest-neighbor
  • s'applique seulement aux images (JPG, GIF, PNG, ...)
  • dans IE7 seulement pour les images sans ransparence
  • n'est pas héritée
  • valeur par défaut dans IE7 : nearest-neighbor (qualité basse)
  • valeur par défaut dans IE8 et plus : bicubic (haute qualité)

11.60

image-rendering: auto | -o-crisp-edges | optimizeSpeed | optimizeQuality

6533.21.1, r86920

image-rendering: auto | optimizeSpeed | optimizeQuality | -webkit-optimize-contrast

  • -webkit-optimize-contrast est similaire à -moz-crisp-edges, dans le fait qu'il sélectionne un algorithme pixellisant en addition à l'agorithme de redimensionnement qui rend l'image floue. L'algorithme pixellisant semble être celui du plus proche voisin.
  • -webkit-optimize-contrast à été implémenté dans les versions quotidiennes de WebKit depuis le 20 mai 2011.
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base ? ? ? ? ?

Référez-vous aussi à Microsoft MSDN propriété -ms-interpolation-mode (en).

Canvas peut être une solution de replis pour crisp-edge/optimize-contrast à l'aide de la manipulation manuelle de imageData.

Pièces jointes

Fichier Taille Date Joint par
blumen.jpg
2288 octets 2009-06-05 14:19:00 Jürgen Jeka
squares.gif
232 octets 2009-06-05 14:19:01 Jürgen Jeka
hut.jpg
18558 octets 2009-06-05 14:20:11 Jürgen Jeka
moveDialog.png
19863 octets 2012-02-02 15:33:20 Potappo

Étiquettes et contributeurs liés au document

Contributeurs ayant participé à cette page : DavidWalsh, FredB
Dernière mise à jour par : FredB,
Masquer la barre latérale