Retina.js è uno script Open Source che permette di rendere compatibile la visualizzazione dei siti web al display Retina ad alta risoluzione di Apple.
Seppur, come nel solito stile di Apple, il display degli ultimi modelli dei suoi dispositivi chiamato appunto "Retina" venga pubblicizzato come qualcosa di strepitoso, anche se tecnologicamente lo è, in realtà non è "nient'altro" che un monitor con un elevato rapporto di ppi (pixel per pollice), per i possessori di siti web ma sopratutto per i webdesigner questo sta a significare che se un utente con un dispositivo Apple potrebbe non veder correttamente le immagini di un sito internet, retina.js, è uno script per siti internet che permette di adattare le immagine quindi rendere compatibili i siti web per i display retina.
Come servire le immagini idonee per i display retina
Specificare che immagini devono utilizzare i display retina e/o i display con un'alta risoluzione è semplice con le CSS media queries, incluse nel foglio di stile oppure in un file CSS separato.
Ad esempio, se si volesse offrire ai display retina il logo in alta risoluzione cui il suo DIV ha l'ID "logo" ed il file immagine si chiama "logo.png" si creerà un file con il doppio della risoluzione e lo si chiamerà "[email protected]" e si specificheranno anche le immagini, i nomi dei file immagine ad alta risoluzione con la sintassi che uso nell'esempio (il nome) sono consigliati da Apple oltre essere richiesti da Retina.js, quindi, nel CSS s'inserirà:
@media all and (-webkit-min-device-pixel-ratio: 2) {
#logo {
background-image: url('http://URL/PATH/[email protected]');
background-size: 100px 29px;
}
}
Se invece si vuol fare un foglio di stile separato, con tutte le regole per le immagini ad alta risoluzione, che andranno comunque create, se lo si chiamerà per esempio "stylealtarisoluzione.css" e bisognerà richiamarlo nell'<head> delle pagine web in questo modo:
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="PATH/stylealtarisoluzione.css" />
Però c'è ancora un un problema, non tutte le immagini di un sito internet sono nei CSS, qui viene in aiuto Retina.js, in pratica bisognerà solo richiamare lo script prima della chiusura del </body> delle pagine internet in questo modo:
<script type="text/javascript" src="/scripts/retina.js"></script>
Fatto questo lo script se troverà la versione alternativa delle immagini con il suffisso "@2x."nella path delle immagini originali, la inserirà automaticamente.
Concludo dicendo che Retina.js non per tutti i siti internet è utile, questo dipende molto dalla percentuale di visitatori con il display retina che si hanno, sicuramente siti web che parlano esclusivamente di Apple se lo usano rendono felici i loro visitatori, tutti gli altri, per il momento, dato che i normali display non hanno un elevato numero di ppi è un lavoro inutile, potrebbe essere inutile anche in futuro vista la qualità delle immagini SVG, sono più pesanti per le pagine web ma permettono di fare meno lavoro, e, lo spazio sul server sarà occupato da una sola immagine grande, non da una grande ed una piccola, voi che soluzione preferite?
Se vi servisse qui potete fare il download di Retina.js.