Propriété CSS image-rendering | Référence CSS W3docs

La propriété CSS image-rendering indique au navigateur quel algorithme de mise à l'échelle utiliser lorsqu'une image est affichée à une taille différente de sa résolution naturelle (intrinsèque). Elle contrôle comment les pixels sont interpolés — et non si l'image est redimensionnée.

Cette page explique ce que fait chaque valeur, quand utiliser pixelated plutôt que crisp-edges, comment gérer les différences entre navigateurs, et inclut des exemples interactifs.

Quand l'utiliser ?

Par défaut, le navigateur applique une interpolation lisse (bilinéaire ou bicubique) lorsqu'il agrandit ou réduit une image. Cela convient parfaitement aux photographies, mais rend floues les images qui doivent rester nettes pixel par pixel. Utilisez image-rendering lorsque :

Vous agrandissez du pixel art, des sprites de jeux rétro ou des icônes 8 bits et souhaitez conserver des pixels en blocs plutôt que des pixels flous.
Vous zoomez sur un QR code, un code-barres ou un diagramme technique où chaque pixel a une signification.
Vous agrandissez délibérément une image basse résolution et préférez des contours nets et durs à un résultat flou et terne.
Vous construisez un jeu basé sur canvas et souhaitez que le navigateur conserve des pixels canvas nets après mise à l'échelle.

Pour les photographies et les dégradés, laissez la valeur à auto — le lissage est exactement ce que vous voulez dans ce cas.

Astuce

crisp-edges et pixelated sont similaires mais pas identiques. pixelated garantit une mise à l'échelle nearest-neighbor ; crisp-edges laisse chaque navigateur choisir un algorithme net. Les auteurs listent souvent les deux afin que l'un serve de solution de repli pour l'autre selon les moteurs.

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

Syntaxe

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

La propriété accepte un seul mot-clé. Il n'existe pas de raccourci.

Valeurs

Valeur	Description
`auto`	Le navigateur choisit un algorithme qui maximise la qualité visuelle. Pour la plupart des navigateurs, cela signifie une interpolation bilinéaire ou bicubique — lisse, mais peut paraître floue sur le pixel art. C'est la valeur par défaut.
`crisp-edges`	L'image est mise à l'échelle sans aucun lissage ni anti-aliasing. Le navigateur choisit son propre algorithme à fort contraste (nearest-neighbor ou une autre méthode nette). Les résultats peuvent varier légèrement d'un moteur à l'autre.
`pixelated`	Mise à l'échelle nearest-neighbor stricte. Chaque pixel source est mappé sur un ou plusieurs pixels de destination de la même couleur, sans mélange. Garantit l'aspect pixelisé en blocs dans tous les navigateurs compatibles.
`initial`	Réinitialise la propriété à sa valeur par défaut (`auto`).
`inherit`	Hérite de la valeur de l'élément parent.

`pixelated` vs `crisp-edges` — quelle est la différence ?

Ces deux valeurs empêchent le lissage, mais leurs garanties diffèrent :

pixelated est une spécification précise : le navigateur doit utiliser la mise à l'échelle nearest-neighbor. Chaque pixel de la sortie correspond exactement à un pixel source — vous obtenez des résultats durs, crénelés et intentionnellement pixelisés. C'est ce sur quoi se reposent les jeux de pixel art.
crisp-edges signifie « éviter le lissage et préserver le contraste », mais laisse l'algorithme au choix du navigateur. Firefox utilise son propre algorithme net ; les anciennes versions de Safari utilisaient -webkit-optimize-contrast. Le résultat visuel est généralement très similaire à pixelated, mais n'est pas garanti d'être identique.

Pour le pixel art, préférez pixelated. Utilisez crisp-edges comme filet de sécurité pour les anciens navigateurs qui n'implémentaient pas pixelated.

Exemples

Comparaison de base : auto vs pixelated

L'exemple ci-dessous montre la même petite image rendue à trois fois sa largeur naturelle. La version auto est floue ; pixelated conserve des contours nets.

<!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://api.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://api.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://api.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
    </div>
  </body>
</html>

Essayez vous-même »

Résultat

Utiliser crisp-edges avec un repli

Comme crisp-edges a un historique irrégulier (les anciennes versions de Safari nécessitaient -webkit-optimize-contrast), il est plus sûr d'empiler les trois déclarations. Le navigateur conserve la dernière valeur qu'il reconnaît :

.sharp-upscale {
  image-rendering: -webkit-optimize-contrast; /* Safari < 13 */
  image-rendering: crisp-edges;               /* Firefox, most modern browsers */
  image-rendering: pixelated;                 /* Chrome, Edge, Safari 13+ */
}

Appliquer image-rendering à un arrière-plan CSS

La propriété fonctionne aussi bien sur background-image que sur les éléments <img>. Cela est utile pour les arrière-plans de pixel art en mosaïque :

.pixel-bg {
  background-image: url('sprite-sheet.png');
  background-size: 300%;        /* zoom in */
  image-rendering: pixelated;   /* keep pixels sharp */
}

Appliquer image-rendering à un élément canvas

Lorsque vous dessinez à une faible résolution logique sur un <canvas> puis mettez à l'échelle l'élément via CSS, pixelated conserve des pixels canvas nets — une technique courante pour les jeux de pixel art :

<canvas
  id="game"
  width="64"
  height="64"
  style="width: 320px; height: 320px; image-rendering: pixelated;"
></canvas>

Les attributs width/height définissent la surface de dessin (64 × 64 pixels). Les propriétés CSS width/height agrandissent l'élément 5× à l'écran. Sans pixelated, le navigateur floutorait le canvas mis à l'échelle.

Points importants à retenir

Elle n'affecte que les images redimensionnées. Si une image est affichée à sa taille naturelle, il n'y a rien à interpoler, donc image-rendering n'a aucun effet visible.
L'héritage peut surprendre. La propriété est héritée, donc définir image-rendering: pixelated sur un <div> s'applique à tous les <img> descendants et aux images d'arrière-plan, sauf si vous le substituez.
pixelated s'applique aussi à la réduction. Nearest-neighbor s'applique également lorsque l'image est plus petite que sa source, ce qui peut paraître crénelé. Pour une réduction générale, auto donne généralement un meilleur résultat.
Elle s'applique aux éléments <img>, background-image, <canvas> et SVG <image> — pas au contenu vectoriel (chemins SVG inline) que le navigateur pixellise à la volée.
Écrans HiDPI / Retina. Sur un écran 2×, le pixel art affiché avec image-rendering: pixelated apparaîtra à 2 pixels CSS par pixel source. Envisagez de fournir une règle @media (min-resolution: 2dppx) avec une image naturelle plus grande si vous souhaitez plus de détails en pixels physiques.
object-fit s'exécute avant image-rendering. La propriété object-fit décide comment l'image remplit sa boîte ; image-rendering détermine ensuite l'aspect du résultat mis à l'échelle.

Compatibilité des navigateurs

pixelated est bien pris en charge dans Chrome, Edge, Safari 13+ et Firefox 93+. crisp-edges est pris en charge par tous les navigateurs modernes (Firefox, Chrome, Safari, Edge) et est le choix le plus sûr pour le code devant fonctionner sur des navigateurs plus anciens. La valeur héritée -webkit-optimize-contrast n'est nécessaire que pour Safari 12 et versions antérieures.

Propriétés associées

background-image — définit les images que image-rendering peut ensuite rendre nettes.
background-size — met à l'échelle les images d'arrière-plan, rendant image-rendering pertinent.
object-fit — contrôle comment un élément remplacé remplit sa boîte avant l'application du rendu.
object-position — repositionne l'image dans la boîte en parallèle avec object-fit.
width — redimensionne les éléments, ce qui déclenche l'importance de image-rendering.
filter — applique des effets visuels (flou, contraste, etc.) après le rendu.
Propriétés CSS3 — parcourir d'autres propriétés CSS modernes.

Pratique

Que contrôle la propriété CSS image-rendering ?

Elle ajuste la taille du fichier image.Elle spécifie l'algorithme utilisé pour agrandir ou réduire une image.Elle change la couleur d'arrière-plan derrière l'image.Elle empêche le mélange lisse lors de la mise à l'échelle du pixel art, gardant les pixels nets.Elle crée une bordure autour de l'image.