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

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.

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;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-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

Compatibilité des navigateurs

[1] Internet Explorer 7 et 8 implémentent la propriété non-standard -ms-interpolation-mode avec deux valeurs (bicubic et nearest-neighbor).

[2] Pris en charge avec un nom propriétaire : -webkit-optimize-contrast.

[3] Support via WebKit Nightly (pour plus d'informations, voir ce bogue).