image-rendering

La propriété image-rendering fournit une indication au navigateur à propos de l'algorithme qui devrait être utilisé pour redimensionner les images. Elle s'applique à l'élément visé, aux images fournies via les autres propriétés CSS et aux éléments fils.

L'agent utilisateur redimensionnera une image si l'auteur de la page indique des dimensions différentes que la taille naturelle de l'image ou si l'utilisateur interagit en zoomant par exemple. Cette propriété n'a aucun effet sur les images qui ne sont pas redimensionnées. Si, par exemple, la taille naturelle de l'image est 100px par 100px et que l'auteur indique les dimensions 200px par 200px (ou 50px par 50px), l'image sera agrandie (ou réduite) aux nouvelles dimensions via l'algorithme indiqué. Le redimensionnement peut aussi avoir lieu suite aux interactions utilisateurs (avec un zoom par exemple).

Syntaxe

/*Valeurs avec un mot-clé*/
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* Valeurs globales */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;

Valeurs

auto
L'image devrait être redimensionnée grâce à un algorithme qui optimise l'apparence de l'image. Les algorithmes de redimensionnement « doux » comme l'interpolation bilinéaire, sont acceptables. Ces algorithmes sont destinés à être utilisés sur des images comme des photos. Depuis la version 1.9 (Firefox 3.0), Gecko utilise un algorithme de rééchantillonnage bilinéaire.
crisp-edges
L'algorithme utilisé doit avant tout préserver le contraste et les bords de l'image, il ne doit pas ajouter de couleur intermédiaire ou de flou. Cette valeur est conçue pour être utilisée sur du pixel art. Les algorithmes éligibles sont par exemple l'interpolation au plus proche voisin, les familles d'algorithmes 2×SaI et hqx.
high-quality
Cette valeur est proche de smooth mais favorise un redimensionnement avec une qualité élevée. Si les ressources du système sont limitées, ce sont les images ciblées avec high-quality qui devraient être priorisées par rapport aux autres s'il est nécessaire de dégrader la qualité.
pixelated
Lorsque l'image est agrandie c'est l'algorithme « du plus proche voisin » qui doit être utilisé afin que l'image apparaisse comme composée de grands pixels. Lorsque l'image est réduite, le comportement est le même que auto.
smooth
L'algorithme utilisé pour le redimensionnement doit maximiser l'apparence de l'image. Les algorithmes qui adoucissent les couleurs (ex. l'interpolation bilinéaire) sont acceptables. Cette valeur est destinée aux images telles que les photos.
Note : Les valeurs optimizeQuality et optimizeSpeed qui étaient présentes dans un brouillon de la spécification (et qui provenaient de la spécification équivalente pour SVG) sont synonymes respectifs de smooth et pixelated.

Syntaxe formelle

auto | crisp-edges | pixelated

Exemples

CSS

.pixels_petits {
  height: 50px;
  width: 50px;
}

.pixels_grands {
  height: 69px;
  width: 69px;
}

.chapeau_petit {
  height: 89px;
  width: 89px;
}
.defaut {
  image-rendering: auto;
}

.contraste {
  image-rendering: crisp-edges;
}

HTML

<p>Avec <code>auto</code> :</p>
<img class="pixels_petits defaut" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/>
<img class="pixels_grands defaut" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/>
<img class="chapeau_petit defaut" alt="chapeau" src="https://mdn.mozillademos.org/files/2767/hut.jpg"/>

<p>Avec <code>crisp-edges</code> :</p>
<img class="pixels_petits contraste" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/>
<img class="pixels_grands contraste" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/>
<img class="chapeau_petit contraste" alt="chapeau" src="https://mdn.mozillademos.org/files/2767/hut.jpg"/>

Résultat

Note : En pratique, les règles pixelated et crisp-edges peuvent être combinées en cas de besoin (l'une pouvant combler les éventuelles manques de l'autre et vice versa). Si besoin, un <canvas> peut fournir une alternative pour les valeurs crisp-edge et optimize-contrast via la manipulation manuelle des données de l'image ou avec imageSmoothingEnabled.

Spécifications

Spécification État Commentaires
CSS Images Module Level 3
La définition de 'image-rendering' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Note : Cette valeur était, initialement, proche de la propriété SVG image-rendering. Cependant, ces valeurs ont « divergé » et sont assez différentes désormais.

Valeur initialeauto
Applicabilitétous les éléments
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
image-rendering
Expérimentale
Chrome Support complet 13Edge Aucun support NonFirefox Support complet 3.6IE Aucun support NonOpera Support complet 15Safari Support complet 6WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 14Safari iOS Support complet 6Samsung Internet Android Support complet 1.0
crisp-edges
Expérimentale
Chrome Support complet 13
Autre nom
Support complet 13
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-optimize-contrast
Edge Aucun support NonFirefox Support complet 65
Support complet 65
Support complet 3.6
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Aucun support NonOpera Support complet 15
Autre nom
Support complet 15
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-optimize-contrast
Aucun support ? — 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari Support complet 6
Autre nom
Support complet 6
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-optimize-contrast
WebView Android Support complet ≤37
Autre nom
Support complet ≤37
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-optimize-contrast
Chrome Android Support complet 18
Autre nom
Support complet 18
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-optimize-contrast
Firefox Android Support complet 65
Support complet 65
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android Support complet 14
Autre nom
Support complet 14
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-optimize-contrast
Aucun support ? — 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari iOS Support complet 6
Autre nom
Support complet 6
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-optimize-contrast
Samsung Internet Android Support complet 1.0
Autre nom
Support complet 1.0
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-optimize-contrast
optimizeQuality
ObsolèteNon-standard
Chrome Support complet 28Edge Aucun support NonFirefox Support complet 3.6IE Aucun support NonOpera Support complet 15Safari Support complet 6.1WebView Android Support complet ≤37Chrome Android Support complet 28Firefox Android Support complet 4Opera Android Support complet 14Safari iOS Support complet 7Samsung Internet Android Support complet 1.5
optimizeSpeed
ObsolèteNon-standard
Chrome Support complet 28Edge Aucun support NonFirefox Support complet 3.6IE Aucun support NonOpera Support complet 15Safari Support complet 6.1WebView Android Support complet ≤37Chrome Android Support complet 28Firefox Android Support complet 4Opera Android Support complet 14Safari iOS Support complet 7Samsung Internet Android Support complet 1.5
pixelated
Expérimentale
Chrome Support complet 41Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet 26Safari Support complet 10WebView Android Support complet 41Chrome Android Support complet 41Firefox Android Aucun support NonOpera Android Support complet 26Safari iOS Support complet 10Samsung Internet Android Support complet 4.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.