In qualità di sviluppatori web, lavoriamo sempre con le immagini e, nella maggior parte dei casi, i browser sono molto bravi a ridimensionarle in base ai limiti dei nostri progetti di siti mantenendole belle. Ma cosa succede quando vuoi controllare la modalità di ridimensionamento delle immagini nella tua pagina da parte del browser?
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, questo comportamento di spianamento non è desiderato e si preferisce utilizzare 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 effetto significativo sul modo in cui viene visualizzata l'immagine.
Questa proprietà può essere applicata in molti punti:
- Elementi
<img> - 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, in cui spesso devi aumentare le dimensioni della tela per adattarla correttamente alle dimensioni dello schermo. Prima di questa proprietà CSS, il browser interpolava la tela in modo che risultasse sfocata (vedi di seguito [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.