Display Retina: Caricare nel proprio sito la grafica “-2x”

By | 25 luglio 2012

Visto e considerato che, nello sviluppo di siti internet è sempre più frequente l’attenzione ai dispositivi mobili, tanto che si parla di un sorpasso dei dispositivi mobili nei confronti dei PC, un “plus” nello sviluppo del proprio sito può essere dato dall’implementazione del supporto per il display Retina

Per chi ancora non lo sapesse, il display Retina è una particolare tipo di display contenuto in alcuni dispositivi mobili di Apple, che permette di vedere le immagini in maniera più nitida rispetto agli schermi normali, avendo una concentrazione di pixel doppia rispetto agli schermi normali.

Il problema è che, guardando un sito standard con il display retina, si può avere la sensazione di “vederlo male”.

Per ovviare a questo problema basta inserire nella cartella immagini, accanto a quelle di dimensione normale, le immagini per il display retina (di dimensione doppia), seguite dal suffisso “-2x” (quindi, data immagine.png, la versione retina sarà immagine-2x.png) e, in seguito utilizzare un comodissimo plugin Jquery, dal nome Jquery Retina Display Plugin.

Il plugin, va semplicemente incluso all’interno della pagina e, in seguito richiamato tramite:

 

$(document).ready(function() { $('img').retina(); });


Nota bene che esiste la possibilità di restringere la selezione anche alle immagini di una sola classe per poter, in questo modo, ridurre i tempi di caricamento.

download plugin

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn