Rendering di immagini - Trucchi CSS

La image-renderingproprietà definisce il modo in cui il browser deve eseguire il rendering di un'immagine se viene ridimensionata rispetto alle dimensioni originali. Per impostazione predefinita, ogni browser tenterà di applicare l'aliasing a questa immagine ridimensionata per prevenire la distorsione, ma a volte questo può essere un problema se vogliamo che l'immagine mantenga la sua forma pixelata originale.

img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )

A proposito di questi tre possibili valori:

auto: valore predefinito che utilizza l'algoritmo standard del browser per massimizzare l'aspetto di un'immagine.
crisp-edges: il contrasto, i colori ei bordi dell'immagine verranno preservati senza alcuna levigatura o sfocatura. Secondo le specifiche, questo era specificamente inteso per la pixel art. Questo valore si applica alle immagini ingrandite o ridotte.
pixelated: quando l'immagine cambia dimensione, il browser manterrà il suo stile pixelato utilizzando il ridimensionamento del vicino più vicino. Questo valore si applica solo alle immagini che vengono ridimensionate.

Questa proprietà può essere applicata alle immagini di sfondo, agli canvaselementi e alle immagini in linea. È importante notare, tuttavia, che testare questi valori in questo momento è particolarmente confuso a causa della mancanza di un supporto browser coerente.

Esempio

Ecco un'immagine in linea molto piccola composta da quattro pixel colorati:

Se cambiamo la larghezza di questa immagine in linea 300pxin Chrome (41), scopriremo che il browser ha tentato di ottimizzare l'immagine nel miglior modo possibile:

Per preservare il suo aspetto pixelato originale possiamo usare il seguente pixelatedvalore, in questo modo:

img ( image-rendering: pixelated; )

Ciò fa sì che il browser scelga un algoritmo alternativo con cui elaborare l'immagine. In questo esempio Chrome rimuoverà l'aliasing predefinito:

Sfortunatamente, dopo molti test, sembra che i browser interpretino i valori crisp-edgese pixelatedin modi molto confusi al momento, quindi è importante notare ancora una volta che questa specifica è agli inizi. Ad esempio Chrome sembra rendere le pixelatedimmagini nello stesso modo in cui Firefox e Safari renderanno le immagini con crisp-edges.

Esempio di codice QR

Un altro caso d'uso di questa proprietà potrebbe essere per i codici QR in cui si desidera aumentare le sue dimensioni senza distorcerle utilizzando l'anti-aliasing standard. Assicurati di controllare questo esempio in modalità a schermo intero per vedere l'estensione dell'immagine:

Guarda la demo del rendering di immagini con penna di Robin Rendle (@robinrendle) su CodePen.

Attiva / disattiva esempio

Nella Penna sottostante è possibile alternare tra questi valori e vedere le discrepanze tra i browser:

Guarda la demo sul rendering delle immagini con penna di Robin Rendle (@robinrendle) su CodePen.

Supporto del browser

crisp-edgesattualmente richiede i prefissi del fornitore ( -moz-crisp-edges) per ottenere il miglior supporto possibile.

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.