In qualità di sviluppatori web, giochiamo continuamente con le immagini e nella maggior parte dei casi i browser sono ottimi per ridimensionare le immagini in modo che si adattino ai confini del design del nostro sito, mantenendo al contempo le immagini belle. Ma cosa succede quando vuoi controllare in che modo il browser scala le 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 ingrandita.
La proprietà CSS image-rendering e il valore pixelated sono interessanti perché disattivano la scalabilità uniforme standard del browser (normalmente l'interpolazione bilineare) e la sostituiscono con un altro algoritmo di scalabilità (nella maggior parte dei casi il vicino più vicino) durante il ridimensionamento delle immagini.
Immagina di avere un'immagine di 2 x 2 pixel e di averla ridimensionata fino a 100 x 100 pixel, il browser l'avrebbe visualizzata in modo da non risultare a blocchi. Ad esempio:
In molti casi non conviene utilizzare questo comportamento di perfezionamento, ma utilizzare un metodo che conserva una rappresentazione più accurata dell'immagine.
Per ottenere questo effetto, è sufficiente applicare image-rendering: pixelated; all'immagine nel seguente modo.
<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 rendering dell'immagine.
Questa proprietà può essere applicata in molte posizioni:
<img>elementi<canvas style="image-rendering: pixelated">elementi- Qualsiasi elemento con una proprietà
background-image
Continuo a non capire. Dove devo utilizzarla?
Se stai solo mostrando foto sul tuo sito, probabilmente non ti interessa.
Un ottimo caso d'uso sono i giochi: spesso devi ridimensionare la tela per adattarla correttamente alle dimensioni dello schermo. Prima di questa proprietà CSS, il browser interpolava la tela in modo che apparisse sfocata (vedi sotto [sic]).
Se stai creando uno strumento per la vendita di biglietti aerei o un'app che mostra codici QR, spesso l'utente vorrà che la visualizzazione sia a schermo intero per facilitarne la scansione, perciò il controllo del rendering delle immagini è fondamentale.
Se ti interessa vedere l'implementazione, prova a pagare il Problema 317991 (è lasciato aperto per l'implementazione del valore nitido). Contrassegna il problema come speciale per monitorare l'implementazione).