Categorie
Altro

Ottimizzare le immagini sul web per display Retina

Ho comprato un nuovo fiammante Mac Book Pro Retina ūüôā L’effetto del display √® abbastanza impressionante: l’alta densit√† di pixel rende una sensazione di fluidit√† e nitidezza mai viste prima. L’effetto √® cos√¨ evidente che dopo averlo usato per un po’, quando sono tornata per un momento al mio vecchio Mac Book Pro mi sembrava di non vederci bene, o che l’immagine fosse sfocata! ūüėõ

MacBook Pro Retina Display

Per√≤ a contrasto con questo effetto di assoluta nitidezza, evidente soprattutto nelle applicazioni di sistema, mi sono imbattuta in una resa assolutamente inferiore di alcune immagini sul web. Perch√© succede questo? La maggiore densit√† di pixel fa s√¨ che le immagini nelle pagine web che non supportano la risoluzione retina vengano sovraccampionate, in modo da essere visualizzate nella dimensione¬†originale, ma con un’area composta da pi√Ļ pixel di prima. Questo meccanismo purtroppo presenta dei problemi, evidenti soprattutto sui bordi, che possono diventare leggermente sfocati.

Allora mi sono posta il problema di come ottimizzare la grafica dei miei siti in modo da evitare questi inconvenienti, ed anzi sfruttare l’alta risoluzione del retina.

Ottimizzare le risorse per Retina Display con i fogli di stile

Cercando un po’ sul web la prima soluzione che si trova √® andare a sfruttare l’attributo¬†@media¬†del css, in modo da identificare i display ad alta risoluzione e fornire le risorse realizzate opportunamente.

Quindi per tutte le risorse utilizzate nel foglio di stile, possiamo creare una versione ad alta risoluzione (raddoppiando le dimensioni in pixel) e andare a diversificare i due casi.

.elemento{

	background: url(images/background.png) no-repeat;

}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
.elemento {

	background: url(images/background.png) no-repeat;

	background-size: 87px 134px;
  }

E’ necessario per√≤ utilizzare l’attributo background-size¬†per impostare¬†le dimensioni del background¬†in modo da visualizzare l’immagine nel modo corretto (altrimenti viene effettivamente visualizzata con dimensioni doppie).

L’effetto della modifica si vede subito:

Ottimizzare le risorse per Retina Display con il css

I dispositivi che hanno una risoluzione inferiore continueranno a caricare e a visualizzare correttamente l’immagine originale.

Gestire le immagini inserite nella pagina

Cosa fare invece per le immagini che non sono utilizzate nel foglio di stile ma sono invece inserite direttamente nella pagina? Il modo pi√Ļ semplice √® utilizzare la risorsa a doppia dimensione in pixel e utilizzare gli attributi¬†width¬†e height¬†del tag¬†<img>¬†in modo da aggiustare la dimensione a video dell’immagine.

<img src="immagine@2x" width="100" height="100"/>

Dove l’immagine avr√† in realt√† larghezza e altezza di 200 pixel.

Questa soluzione presenta però due svantaggi:

  1. pu√≤ aumentare (anche di parecchio a seconda del numero e delle dimensioni delle immagini) il peso della pagina, anche per chi poi non trae beneficio dalle immagini a pi√Ļ alta risoluzione;
  2. in alcuni browser (ad esempio Internet Explorer) ci possono essere problemi di resa nelle immagini sottocampionate e quindi si rischia di peggiorare l’effetto in pi√Ļ casi di quelli in cui effettivamente si migliora…

Ottimizzare la resa con l’aiuto del javascript

Una soluzione diversa √® creare anche in questo caso due versioni dell’immagine in modo da fornire quella a alta risoluzione solo a quei dispositivi che effettivamente ne possono trarre beneficio. Per implementare quest’idea possiamo usare una funzione javascript che rilevi la risoluzione del dispositivo e vada a cambiare la risorsa nel caso in cui serva la versione ad alta risoluzione.

Cercando su Internet ho trovato un’interessante libreria che fa proprio questo. Si chiama RetinaJS e si pu√≤ scaricare all’indirizzo¬†http://retinajs.com

Usare questa libreria √® molto semplice, basta includere il javascript in fondo ad ogni pagina, prima della chiusura del tag <body>¬†e assicurarsi che sul server siano presenti le versioni ad alta risoluzione delle immagine inserite nelle pagine, denominate secondo¬†la seguente convenzione: se l’immagine si chiama image.png¬†la corrispondente versione ad alta risoluzione dovr√† trovarsi nella stessa cartella e chiamarsi image@2x.png

Anche in questo caso l’effetto √® subito evidente.

Inserire in una pagina web un immagine ottimizzata per alta risoluzione

Se il javascript non dovesse essere abilitato semplicemente verranno caricate sempre le versioni a risoluzione pi√Ļ bassa.

L’unica controindicazione di questo metodo potrebbe essere un carico eccessivo per il motore del browser in caso sia presente nella pagina un alto numero di immagini; questo problema si potrebbe verificare per quelle macchine con prestazioni pi√Ļ scarse o se gi√† la pagina fa largo uso di javascript.

ELbuild e il web design

Ad ELbuild ci aggiorniamo costantemente sia per quanto riguarda gli aspetti legati allo sviluppo software, sia sulle novit√† in campo di web design. Affida a noi lo sviluppo del tuo sito web, o semplicemente un restyling, scoprirai come con un investimento minimo puoi rinnovare l’immagine della tua azienda in maniera importante.

Di Evelina Agostini

Evelina Agostini si è laureata con lode in Ingegneria Informatica presso l'Università degli Studi di Firenze e può vantare un'esperienza decennale nello sviluppo di soluzioni web. Dotata di competenze trasversali a tutto lo stack, conosce in maniera approfondita la piattaforma Java EE ed in generale le tecnologie server side sia Java che PHP, ed è in grado di progettare e realizzare database scalabili utilizzando sia MySQL che Oracle. Evelina possiede inoltre competenze su Javascript e jQuery e skill internazionalmente riconosciuti per quanto riguarda il framework AngularJS ed in generale le soluzioni Javascript MVC. Evelina, grazie alle sue doti creative, si occupa anche del design di alcune delle interfacce dei sistemi sviluppati da ELbuild.

2 risposte su “Ottimizzare le immagini sul web per display Retina”

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *