Sintassi

Significato dei valori principali:

• auto: Il browser decide il metodo di rendering (comportamento predefinito).

• crisp-edges: Tenta di mantenere i bordi nitidi durante lo scaling (supportato in WebKit/Blink come -webkit-optimize-contrast o pixelated in Firefox).

• pixelated: Mantiene i pixel netti anche quando l’immagine viene ingrandita. Perfetto per pixel art o sprite.

• smooth | high-quality: (valori sperimentali) Punta alla massima qualità di interpolazione (supporto limitato).

Esempio proprietà: image-rendering

Codice Esempio: image-rendering

CODE: CSS

1. .img-example {

2.   image-rendering: auto;

3.   width: 200px;

4.   height: auto;

5. }

7. .img-pixelated {

8.   image-rendering: pixelated;

9.   width: 200px;

10.   height: auto;

11. }

Contenuto Esempio: image-rendering

Esempio di utilizzo della proprietà image-rendering

Confronto tra un'immagine scalata con auto e una con pixelated:

auto

pixelated

  Originale: 36x33 px

📌 Cosa osservi

• auto: il browser sfoca l’immagine durante l’ingrandimento, applicando interpolazione lineare.

• pixelated: ogni pixel originale viene ingrandito come un blocco unico, bordi netti, senza sfocatura.

CSS e HTML per l'esempio con image-rendering:

  
  <style>
    .img-example {
      image-rendering: auto;
      width: 200px;
      height: auto;
    }

    .img-pixelated {
      image-rendering: pixelated;
      width: 200px;
      height: auto;
    }
  </style>

  <img class="img-example" src="pixel-heart.png">
  <img class="img-pixelated" src="pixel-heart.png">
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser