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.

/*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;

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).

Note : 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.

Syntaxe

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.
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 de auto.

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

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

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simple
Expérimentale
Chrome Support complet OuiEdge Aucun support NonFirefox Support complet 3.6IE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Support complet 41Chrome Android ? Edge Mobile ? Firefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android ?
crisp-edges
Expérimentale
Chrome Support complet Oui
Autre nom
Support complet Oui
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 Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari Support complet Oui
Autre nom
Support complet Oui
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-optimize-contrast
WebView Android ? Chrome Android ? Edge Mobile ? 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 ? Safari iOS ? Samsung Internet Android Aucun support Non
pixelated
Expérimentale
Chrome Support complet 41Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet 26Safari ? WebView Android ? Chrome Android Support complet 41Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Support complet 28Safari iOS ? Samsung Internet Android Support complet 4.0
optimizeQuality
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 3.6IE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android Aucun support Non
optimizeSpeed
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 3.6IE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
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.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, Sebastianz, piouPiouM, teoli, FredB, DavidWalsh
Dernière mise à jour par : SphinxKnight,