Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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é et aux images fournies comme valeurs pour les autres propriétés de l'élément.

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

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

Syntaxe

Valeurs

auto
La valeur par défaut : 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.
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.
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.

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 !

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Oui Non3.6 Non Oui Oui
crisp-edges Non Non3.6 -moz- Non Oui -o- Oui1
pixelated41 Non Non Non26 ?
optimizeQuality Non Non3.6 Non Oui Oui
optimizeSpeed Non Non3.6 Non Oui Oui
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple41 ? ? ? ? ? ?
crisp-edges ? ? ? ? ? ? Non
pixelated ?41 ? ?28 ?4.0
optimizeQuality ? ? ? ? ? ? Non
optimizeSpeed ? ? ? ? ? ? Non

1. Supported as -webkit-optimize-contrast.

Étiquettes et contributeurs liés au document

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