Attribut image-rendering CSS

Définition et utilisation

image-rendering Cette propriété spécifie le type d'algorithme utilisé pour le redimensionnement des images.

Attention :Cette propriété n'a pas d'effet sur les images non redimensionnées.

Exemple

Montre différents algorithmes disponibles pour le redimensionnement des images :

.image {
  height: 100px;
  width: 100px;
  image-rendering: auto;
}
.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.pixelated {
  image-rendering: pixelated;
}
.smooth {
  image-rendering: smooth;
}
.high-quality {
  image-rendering: high-quality;
}

Essayez-le vous-même

Syntaxe CSS

image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;

Valeur de l'attribut

Valeur Description
auto Laisse le navigateur choisir l'algorithme d'escalade. Valeur par défaut.
smooth Utilise un algorithme pour lisser les couleurs de l'image
high-quality Comme smooth, mais préfère une qualité d'escalade élevée
crisp-edges Utilise un algorithme pour conserver la contraste et les bords de l'image
pixelated

Si l'image est agrandie, l'algorithme de voisinage le plus proche est utilisé, donc l'image semble être composée de grands pixels.

Si l'image est réduite, c'est comme avec auto.
initial Réinitialise cette propriété à sa valeur par défaut. Voir initial.
inherit Inherits cette propriété de son élément parent. Voir inherit.

Détails techniques

Valeur par défaut : auto
Héritabilité : yes
Création d'animation : Non pris en charge. Voir :Attributs liés aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.imageRendering="pixelated"

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome, Edge et Opera utilisent -webkit-optimize-contrast comme alias pour la valeur crisp-edges.