In qualità di sviluppatori web, giochiamo sempre con le immagini e nella maggior parte dei casi i browser sono ottimi per scalare le immagini in modo che si adattino ai confini dei design del nostro sito, mantenendo al contempo le immagini graziose. Ma cosa succede quando vuoi controllare la modalità di ridimensionamento delle immagini nella tua pagina?
Chrome 41 (beta a gennaio 2015) introduce una nuova proprietà CSS image-rendering: pixelated (specifiche) che offre un maggiore controllo sul modo in cui il browser esegue il rendering di un'immagine aumentata di dimensioni.
La proprietà CSS image-rendering e il valore pixelated sono interessanti perché disattivano la scalatura uniforme standard del browser (di solito l'interpolazione bilineare) e la sostituiscono con un altro algoritmo di scalatura (in genere il più vicino nei casi più comuni) quando si ridimensionano le immagini.
Immagina di avere un'immagine di 2 x 2 pixel e di averla aumentata fino a 100 x 100 pixel. Il browser la renderizzerebbe in modo che non avesse un aspetto a blocchi. Ad esempio:
In molti casi non si desidera utilizzare questo comportamento di livellamento e utilizzare invece un metodo che conservi una rappresentazione più accurata dell'immagine.
Per ottenere questo effetto, applica semplicemente image-rendering: pixelated; all'immagine come segue.
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
Prova la demo. Come puoi vedere, l'applicazione della proprietà ha un impatto significativo sul rendering dell'immagine.
Questa proprietà può essere applicata in molti modi:
<img>elemento- Elementi
<canvas style="image-rendering: pixelated"> - Qualsiasi elemento con una proprietà
background-image
Continuo a non capire. Dove devo utilizzare questa funzionalità?
Se mostri solo foto sul tuo sito, probabilmente non è la soluzione che fa per te.
Un ottimo caso d'uso sono i giochi: spesso è necessario ingrandire l'area di lavoro per adattarla correttamente alle dimensioni dello schermo. Prima di questa proprietà CSS, il browser doveva interpolare il canvas in modo da risultare sfocato (vedi sotto [sic]).
Se stai creando uno strumento per l'acquisto di biglietti aerei o un'app che mostra codici QR, spesso l'utente vorrà che sia a schermo intero per facilitare la scansione, quindi il controllo della visualizzazione delle immagini è fondamentale.
Se vuoi vedere l'implementazione, controlla il Issue 317991 (è lasciato aperto per l'implementazione del valore bordi-nitidi. Aggiungi una stella al problema per monitorarne l'implementazione.