Le immagini sono una delle parti più importanti del web design. Normalmente lasciamo che siano i browser a ridimensionare e mettere in scala le immagini  per adattarle bene al design per apparire al meglio. Tuttavia, a volte è meglio controllare questo aspetto in modo diretto, ad esempio avendo le immagini pixelate con il CSS3.

Per questo motivo,  la versione 41 di Google Chrome ha aggiunto il supporto per il nuovo valore pixelated alla proprietà image-rendering del CSS 3. Grazie a questa proprietà, è possibile definire l’algoritmo utilizzato per ingrandire le immagini.

In particolare, il valore pixelated permette disattivare la sfocatura di un’immagine, quando viene ingrandita molto. Questa sfocatura di solito è realizzata da una interpolazione bilineare. Il valore pixelated fa in modo che il browser utilizzi l’algoritmo detto “nearest neighbord” (il vicino più vicino) che permette di ottenere delle immagini perfettamente pixelate (poi capirete perché a volte conviene utilizzare di più delle immagini pixelate, piuttosto che sfocate).

Per applicare questo algoritmo, occorre impostare semplicemente la proprietà image-rendering con il nuovo valore pixelated:

<Img style=“image rendering: pixelated;” width=“100” height=“100” src=“…”>

Se il vostro browser è Google Chrome 41 e Opera 26, è possibile provare la demo di questa proprietà e vedere come appaiono le immagini pixelate.

Oltre alle immagini, questa tecnica può essere applicata anche a:

• <canvas>
• qualsiasi elemento con la proprietà background-image

Quando è utile mostrare le immagini pixelate?

Ovviamente, se il vostro sito contiene fotografie, non si dovrebbe mai applicare questa proprietà perché sarebbe molto dannosa.

Il primo caso di utilizzo di questa proprietà sono i giochi, perché normalmente si ridimensiona l’elemento <canvas> contenente il gioco, in modo da riempire l’intera finestra del browser. Prima il gioco poteva arrivare a essere leggermente sfocato quando si effettuava lo zoom, ma ora sarà perfetto.

Un altro caso d’utilizzo della nuova tecnica è nelle più utili applicazioni che mostrano i codici QR, codici a barre e simili. In queste applicazioni è comune per l’utente dovere ingrandire l’immagine del codice per riempire l’intero schermo del telefono cellulare, quindi è molto importante mantenere una buona pixelizzazione dell’immagine, in modo che il codice venga riconosciuto senza difficoltà.

Le immagini sono una delle parti più importanti del web design. Normalmente lasciamo che siano i browser a ridimensionare e mettere in scala le immagini  per adattarle bene al design per apparire al meglio. Tuttavia, a volte è meglio controllare questo aspetto in modo diretto, ad esempio avendo le immagini pixelate con il CSS3.

Per questo motivo,  la versione 41 di Google Chrome ha aggiunto il supporto per il nuovo valore pixelated alla proprietà image-rendering del CSS 3. Grazie a questa proprietà, è possibile definire l’algoritmo utilizzato per ingrandire le immagini.

In particolare, il valore pixelated permette disattivare la sfocatura di un’immagine, quando viene ingrandita molto. Questa sfocatura di solito è realizzata da una interpolazione bilineare. Il valore pixelated fa in modo che il browser utilizzi l’algoritmo detto “nearest neighbord” (il vicino più vicino) che permette di ottenere delle immagini perfettamente pixelate (poi capirete perché a volte conviene utilizzare di più delle immagini pixelate, piuttosto che sfocate).

Per applicare questo algoritmo, occorre impostare semplicemente la proprietà image-rendering con il nuovo valore pixelated:

<Img style=“image rendering: pixelated;” width=“100” height=“100” src=“…”>

Se il vostro browser è Google Chrome 41 e Opera 26, è possibile provare la demo di questa proprietà e vedere come appaiono le immagini pixelate.

Oltre alle immagini, questa tecnica può essere applicata anche a:

• <canvas>
• qualsiasi elemento con la proprietà background-image

Quando è utile mostrarle?

Ovviamente, se il vostro sito contiene fotografie, non si dovrebbe mai applicare questa proprietà perché sarebbe molto dannosa.

Il primo caso di utilizzo di questa proprietà sono i giochi, perché normalmente si ridimensiona l’elemento <canvas> contenente il gioco, in modo da riempire l’intera finestra del browser. Prima il gioco poteva arrivare a essere leggermente sfocato quando si effettuava lo zoom, ma ora sarà perfetto.

Un altro caso d’utilizzo della nuova tecnica è nelle più utili applicazioni che mostrano i codici QR, codici a barre e simili. In queste applicazioni è comune per l’utente dovere ingrandire l’immagine del codice per riempire l’intero schermo del telefono cellulare, quindi è molto importante mantenere una buona pixelizzazione dell’immagine, in modo che il codice venga riconosciuto senza difficoltà.