image-rendering
Baseline
Widely available
*
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.
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 100×100px, mais que ses dimensions réelles sont de 200×200px (ou 50×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
/*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é).
smoothExpérimental-
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 spécifié |
| 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.
CSS
.auto {
image-rendering: auto;
}
.smooth {
image-rendering: smooth;
}
.pixelated {
image-rendering: pixelated;
}
.crisp-edges {
image-rendering: crisp-edges;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Images Module Level 3 # the-image-rendering |
| Scalable Vector Graphics (SVG) 2 # ImageRendering |
Compatibilité des navigateurs
Voir aussi
- La propriété
object-fit - La propriété
object-position - La propriété
image-orientation - La propriété
image-resolution - Le module des images CSS
- L'attribut SVG
image-rendering