Proprietà CSS image-rendering

Definizione e uso

image-rendering L'attributo specifica il tipo di algoritmo utilizzato per la riduzione delle immagini.

Attenzione:Questa proprietà non ha effetto su immagini non ridotte.

Esempio

Mostra diversi algoritmi disponibili per la riduzione delle immagini:

.image {
  altezza: 100px;
  larghezza: 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;
}

Prova personalmente

Sintassi CSS

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

Valore dell'attributo

Valore Descrizione
auto Lascia che il browser scelga l'algoritmo di zoom. Valore predefinito.
smooth Utilizza un algoritmo per smussare i colori dell'immagine.
high-quality Uguale a smooth, ma preferisce la qualità di zoom ad alta qualità
crisp-edges Utilizza un algoritmo per mantenere la contrasto e gli edge dell'immagine.
pixelated

Se l'immagine viene ingrandita, utilizza l'algoritmo di vicinanza più vicina, quindi l'immagine sembrerà composta da grandi pixel.

Se l'immagine viene ridotta, è uguale a auto.
initial Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: auto
Ereditarietà: yes
Produzione di animazioni: Non supportato. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.imageRendering="pixelated"

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente l'attributo per la prima volta.

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome, Edge e Opera utilizzano -webkit-optimize-contrast come alias per il valore crisp-edges.