Propriété CSS `image-rendering`

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

En savoir plus
Voir la compatibilité complète

La propriété CSS 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 descendants de l'élément ciblé.

Exemple interactif

image-rendering: auto;

image-rendering: smooth;

image-rendering: crisp-edges;

image-rendering: pixelated;

<section id="default-example">
 <img
 class="transition-all"
 id="example-element"
 src="/shared-assets/images/examples/lizard.png" />
</section>

#example-element {
 height: 480px;
 object-fit: cover;
}

L'agent utilisateur agrandira ou réduira une image lorsque l'auteur·ice de la page définit des dimensions différentes de sa taille naturelle. Un redimensionnement peut aussi se produire lors d'une interaction utilisateur (zoom). Par exemple, si la taille naturelle d'une image est de ×ばつ100px, mais que ses dimensions réelles sont de ×ばつ200px (ou ×ばつ50px), alors l'image sera agrandie (ou réduite) en utilisant l'algorithme défini par image-rendering. Cette propriété n'a aucun effet sur les images non redimensionnées.

Syntaxe

css

/*Valeurs avec un mot-clé*/
image-rendering: auto;
image-rendering: smooth;
image-rendering: crisp-edges;
image-rendering: pixelated;
/* Valeurs globales */
image-rendering: inherit;
image-rendering: initial;
image-rendering: revert;
image-rendering: revert-layer;
image-rendering: unset;

Valeurs

auto: L'algorithme utilisé dépend de l'agent utilisateur. Depuis la version 1.9 (Firefox 3.0), Gecko utilise un algorithme de rééchantillonnage bilinéaire (haute qualité).
smooth: L'algorithme utilisé pour le redimensionnement doit maximiser l'apparence de l'image. Les algorithmes qui adoucissent les couleurs (l'interpolation bilinéaire par exemple) sont acceptables. Cette valeur est destinée aux images telles que les photos.
crisp-edges: L'image est agrandie avec un algorithme tel que le « plus proche voisin » qui préserve le contraste et les contours de l'image. Généralement destiné aux images comme le pixel art ou les dessins au trait, aucun flou ni adoucissement des couleurs n'est appliqué.
pixelated: L'image est agrandie avec l'algorithme du « plus proche voisin » ou un algorithme similaire jusqu'au multiple entier le plus proche de la taille d'origine, puis une interpolation douce est utilisée pour atteindre la taille finale souhaitée. Cela permet de préserver un aspect « pixelisé » sans introduire d'artefacts de redimensionnement lorsque la résolution agrandie n'est pas un multiple entier de la taille d'origine.

Note : Les valeurs optimizeQuality et optimizeSpeed présentes dans un brouillon précoce (et issues de l'équivalent SVG image-rendering) sont définies comme synonymes respectivement des valeurs smooth et pixelated.

Note : Le module des images CSS définit une valeur high-quality pour la propriété image-rendering afin de privilégier un redimensionnement de meilleure qualité, cependant, cette valeur n'est prise en charge par aucun navigateur.

Définition formelle

Valeur initiale	`auto`
Applicabilité	tous les éléments
Héritée	oui
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

image-rendering = 
 auto | 
 smooth | 
 high-quality | 
 pixelated | 
 crisp-edges

Exemples

Paramétrer l'algorithme de redimensionnement des images

Dans cet exemple, une image est répétée trois fois, chacune ayant une valeur différente de image-rendering appliquée.

<div>
 <img
 class="auto"
 alt="Une petite photo de fleurs blanches et jaunes sur un fond vert feuillu. L'image est environ 33% plus petite que la taille à laquelle elle est affichée. Cet agrandissement rend l'image floue, avec des contours doux entre les objets."
 src="blumen.jpg" />
 <img
 class="smooth"
 alt="La même photo que l'image précédente, également agrandie de la même façon. Les navigateurs qui prennent en charge la valeur smooth pour la propriété image-rendering affichent l'image avec une apparence optimisée."
 src="blumen.jpg" />
 <img
 class="pixelated"
 alt="La même photo que l'image précédente, également agrandie de la même façon. Les navigateurs qui prennent en charge la valeur pixelated pour la propriété image-rendering affichent l'image avec un effet très pixelisé. Les pixels individuels sont clairement visibles et les contours paraissent beaucoup plus nets."
 src="blumen.jpg" />
 <img
 class="crisp-edges"
 alt="La même photo que les images précédentes, également agrandie de la même façon. Les navigateurs qui prennent en charge la valeur crisp-edges pour la propriété image-rendering affichent l'image comme très pixelisée. Dans ces exemples, il n'y a pratiquement aucune différence perceptible entre les versions pixelated et crisp-edges."
 src="blumen.jpg" />
</div>

img {
 height: 200px;
}

CSS

css

.auto {
 image-rendering: auto;
}
.smooth {
 image-rendering: smooth;
}
.pixelated {
 image-rendering: pixelated;
}
.crisp-edges {
 image-rendering: crisp-edges;
}