Proprietà CSS image-rendering
Scopri come la proprietà CSS image-rendering controlla il ridimensionamento dei pixel. Copre auto, pixelated e crisp-edges con esempi pratici e compatibilità browser.
La proprietà CSS image-rendering indica al browser quale algoritmo di ridimensionamento utilizzare quando un'immagine viene visualizzata a una dimensione diversa dalla sua risoluzione naturale (intrinseca). Controlla come vengono interpolati i pixel — non se l'immagine viene ridimensionata.
Questa pagina spiega cosa fa ciascun valore, quando usare pixelated rispetto a crisp-edges, come gestire le differenze tra browser e include esempi eseguibili.
Quando si usa?
Per impostazione predefinita il browser applica un'interpolazione uniforme (bilineare o bicubica) quando ridimensiona un'immagine verso l'alto o verso il basso. Questo funziona bene per le fotografie, ma sfoca le immagini che devono rimanere nitide pixel per pixel. Usa image-rendering quando:
- Stai ingrandendo pixel art, sprite di giochi retrò o icone 8-bit e vuoi che i pixel a blocchi siano preservati invece di essere sfumati.
- Stai ingrandendo un codice QR, un codice a barre o un diagramma tecnico in cui ogni pixel ha significato.
- Stai deliberatamente ingrandendo un'immagine a bassa risoluzione e preferisci bordi netti e precisi rispetto a un risultato morbido e confuso.
- Stai costruendo un gioco basato su canvas e vuoi che il browser mantenga nitidi i pixel del canvas ridimensionato.
Per fotografie e sfumature, lascia il valore su auto — la smussatura è esattamente ciò che vuoi in quei casi.
crisp-edges e pixelated sono simili ma non identici. pixelated garantisce il ridimensionamento nearest-neighbor; crisp-edges lascia che ogni browser scelga un algoritmo nitido. Gli autori spesso elencano entrambi in modo che uno faccia da fallback per l'altro tra i diversi motori di rendering.
| Valore iniziale | auto |
|---|---|
| Si applica a | Tutti gli elementi |
| Ereditato | Sì |
| Animabile | Discreto |
| Versione | CSS3 |
| Sintassi DOM | object.style.imageRendering = "pixelated" |
Sintassi
image-rendering: auto | crisp-edges | pixelated | initial | inherit;La proprietà accetta una singola parola chiave. Non esiste una sintassi abbreviata.
Valori
| Valore | Descrizione |
|---|---|
auto | Il browser sceglie un algoritmo che massimizza la qualità visiva. Per la maggior parte dei browser ciò significa interpolazione bilineare o bicubica — uniforme ma può sembrare sfocata sulla pixel art. Questo è il valore predefinito. |
crisp-edges | L'immagine viene ridimensionata senza alcuna smussatura o anti-aliasing. Il browser sceglie il proprio algoritmo ad alto contrasto (potrebbe essere nearest-neighbor o un altro metodo nitido). I risultati possono variare leggermente tra i motori di rendering. |
pixelated | Ridimensionamento nearest-neighbor stretto. Ogni pixel sorgente viene mappato su uno o più pixel di destinazione dello stesso colore senza alcuna fusione. Garantisce l'aspetto a blocchi dei pixel in tutti i browser che lo supportano. |
initial | Reimposta la proprietà al suo valore predefinito (auto). |
inherit | Eredita il valore dall'elemento genitore. |
pixelated vs crisp-edges — qual è la differenza?
Entrambi i valori impediscono la smussatura, ma le loro specifiche differiscono:
pixelatedè una specifica precisa: il browser deve usare il ridimensionamento nearest-neighbor. Ogni pixel nell'output viene mappato esattamente su un pixel sorgente — si ottengono risultati duri, frastagliati e intenzionalmente a blocchi. È questo che i giochi in pixel art richiedono.crisp-edgesdice "evita la smussatura e preserva il contrasto" ma lascia l'algoritmo a scelta del browser. Firefox usa il proprio algoritmo nitido; il vecchio Safari usava-webkit-optimize-contrast. Il risultato visivo è di solito molto simile apixelated, ma non è garantito che sia identico.
Per la pixel art, preferisci pixelated. Usa crisp-edges come rete di sicurezza per i browser più vecchi che non implementavano pixelated.
Esempi
Confronto di base: auto vs pixelated
L'esempio seguente mostra la stessa piccola immagine renderizzata a tre volte la sua larghezza naturale. La versione auto è sfocata; pixelated mantiene i bordi netti.
<!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>Risultato
Usare crisp-edges con un fallback
Poiché crisp-edges ha una storia discontinua (il vecchio Safari richiedeva -webkit-optimize-contrast), è più sicuro impilare tutte e tre le dichiarazioni. Il browser mantiene l'ultimo valore che riconosce:
.sharp-upscale {
image-rendering: -webkit-optimize-contrast; /* Safari < 13 */
image-rendering: crisp-edges; /* Firefox, most modern browsers */
image-rendering: pixelated; /* Chrome, Edge, Safari 13+ */
}Applicare image-rendering a uno sfondo CSS
La proprietà funziona anche su background-image oltre che sugli elementi <img>. È utile per sfondi pixel art a riquadri:
.pixel-bg {
background-image: url('sprite-sheet.png');
background-size: 300%; /* zoom in */
image-rendering: pixelated; /* keep pixels sharp */
}Applicare image-rendering a un elemento canvas
Quando disegni a una bassa risoluzione logica su un <canvas> e poi ridimensioni l'elemento tramite CSS, pixelated mantiene nitidi i pixel del canvas — una tecnica comune per i giochi in pixel art:
<canvas
id="game"
width="64"
height="64"
style="width: 320px; height: 320px; image-rendering: pixelated;"
></canvas>Gli attributi width/height impostano la superficie di disegno (64 × 64 pixel). Il CSS width/height ridimensiona l'elemento di 5× sullo schermo. Senza pixelated, il browser sfocherebbe il canvas ridimensionato.
Cose da tenere a mente
- Influisce solo sulle immagini ridimensionate. Se un'immagine viene mostrata nelle sue dimensioni naturali non c'è nulla da interpolare, quindi
image-renderingnon ha effetti visibili. - L'ereditarietà può sorprendere. La proprietà è ereditata, quindi impostare
image-rendering: pixelatedsu un<div>si applica a tutti gli<img>discendenti e alle immagini di sfondo a meno che non venga sovrascritto. pixelatedsi applica anche al ridimensionamento verso il basso. Il nearest-neighbor si applica anche quando l'immagine è più piccola della sua sorgente, il che può sembrare aliased. Per il ridimensionamento generale verso il basso,autodi solito appare migliore.- Si applica a
<img>,background-image,<canvas>e agli elementi SVG<image>— non ai contenuti vettoriali (percorsi SVG inline) che il browser rasterizza al volo. - Schermi HiDPI / Retina. Su uno schermo 2×, la pixel art visualizzata con
image-rendering: pixelatedapparirà a 2 pixel CSS per pixel sorgente. Valuta di fornire una regola@media (min-resolution: 2dppx)con un'immagine naturale più grande se vuoi maggiori dettagli in pixel fisici. object-fitviene eseguito prima diimage-rendering. La proprietàobject-fitdecide come l'immagine riempie il suo box;image-renderingdecide poi come appare il risultato ridimensionato.
Supporto browser
pixelated è ben supportato in Chrome, Edge, Safari 13+ e Firefox 93+. crisp-edges è supportato in tutti i browser moderni (Firefox, Chrome, Safari, Edge) ed è la scelta più sicura per il codice che deve funzionare su browser più vecchi. Il valore legacy -webkit-optimize-contrast è necessario solo per Safari 12 e versioni precedenti.
Proprietà correlate
background-image— imposta le immagini cheimage-renderingpuò poi rendere più nitide.background-size— ridimensiona le immagini di sfondo, rendendoimage-renderingrilevante.object-fit— controlla come un elemento sostituito riempie il suo box prima che il rendering entri in gioco.object-position— riposiziona l'immagine all'interno del box insieme aobject-fit.width— ridimensiona gli elementi, che è ciò che rendeimage-renderingrilevante.filter— applica effetti visivi (sfocatura, contrasto, ecc.) dopo il rendering.- Proprietà CSS3 — esplora altre proprietà CSS moderne.