Propriété CSS image-rendering

La propriété image-rendering définit un algorithme de mise à l'échelle d'une image.

Par défaut, chaque navigateur appliquera un lissage (anti-aliasing) à l'image mise à l'échelle pour éviter les distorsions, mais un problème peut survenir si vous souhaitez conserver l'aspect pixelisé original de l'image.

TIP

Parfois, vous pouvez utiliser crisp-edges et pixelated comme solutions de repli l'un pour l'autre afin d'assurer un rendu cohérent sur tous les navigateurs.

Valeur initiale	auto
S'applique à	Tous les éléments.
Héritée	Oui.
Animable	Discrète.
Version	CSS3
Syntaxe DOM	object.style.imageRendering = "pixelated";

Syntaxe

Syntaxe CSS de image-rendering

css

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

Exemple de la propriété image-rendering :

Exemple de code CSS image-rendering

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .pixelated {
        image-rendering: pixelated;
      }
      .wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
      }
      .resize {
        flex: 1 1 45%;
      }
      .resize img, .original img {
        width: 100%;
        display: block;
      }
      body {
        background-color: #ccc;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Image-rendering property example</h2>
    <div class="wrapper">
      <div class="original">
        <p>Original image size:</p>
        <img src="https://www.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
      <div class="resize">
        <p><code>image-rendering: auto</code></p>
        <img src="https://www.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
      <div class="resize">
        <p><code>image-rendering: pixelated</code></p>
        <img class="pixelated" src="https://www.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Résultat

CSS image-rendering values list

Valeurs

Valeur	Description
auto	Un algorithme standard maximisant l'apparence d'une image. Il s'agit de la valeur par défaut de cette propriété.
crisp-edges	L'image est conservée sans lissage ni flou. Utilisez cette valeur pour les pixel art qui bénéficient de la préservation du contraste, tandis que `pixelated` impose une mise à l'échelle stricte au plus proche voisin.
pixelated	Le navigateur préserve son style pixelisé en utilisant une mise à l'échelle au plus proche voisin.
initial	Fait utiliser à la propriété sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Que fait la propriété 'image-rendering' en CSS ?

Elle ajuste la taille de l'image.Elle spécifie l'algorithme de rendu d'image à utiliser.Elle change la couleur de fond de l'image.Elle permet aux images bitmap d'apparaître plus nettes lors de la mise à l'échelle.Elle crée une bordure autour de l'image.

Propriété CSS image-rendering ​

Syntaxe ​

Exemple de la propriété image-rendering : ​

Résultat ​