Ente accreditato Regione Veneto n.4271

Come ottimizzare i vostri siti web per display retina

Come implementare il plug-in retina.js per gestire le vostre immagini nei device @2x

Pubblicato da Simone Baldassin // 13 dicembre 2016 // 584 visualizzazioni

come ottimizzare immagini per siti web e display retina

Prima di capire come ottimizzare le immagini e, più in generale, siti web per una corretta visualizzazione su display retina, facciamo una brevissima premessa, ma molto utile.

Quando parliamo di retina display intendiamo un marchio utilizzato da Apple dal 2010 con iPhone 4, dove la densità di pixel presenti nel monitor è di gran lunga superiore alla normale risoluzione, tanto che l’occhio umano non è in grado di cogliere la presenza del singolo pixel.

Inutile dire che la soluzione in se è stata poi adottata da praticamente tutti i dispositivi della casa di Cupertino arrivando ai MacBook Pro 15 con risoluzione pari a 2880×1800 che contano 5.184.000 pixel o agli iMac 5K che raggiungono risoluzioni di 5120×2880 e un totale di, pensate, ben 14.745.600 pixel.

Tutto chiaro?

Bene, focalizziamoci ora sulle contromisure da prendere.

Come potete immaginare, ottimizzare le immagini di un sito web a questo tipo di situazione non è cosa, poi, così campata in aria e possiamo farlo in maniera molto professionale con l’ausilio di specifici plug-in jQuery. Uno dei più famosi è sicuramente retina.js

Retina display

Una volta effettuato il download andate ad inserire il file retina.min.js all’interno della vostra cartella apposita, quella che di norma chiamate js. Mi raccomando, fatelo.
Richiamate lo script con il tag di riferimento in tutte le pagine del sito dove volete usufruirne.

Alla pagina home del sito retinajs vi vengono spiegate 3 diverse modalità di usufruire dello script; la stessa Apple vi propone una pagina con le direttive e le risorse (guide and sample code) che troviamo nella sezione developer all’indirizzo developer.apple.com/library

Il principio di utilizzo è molto semplice: vi viene detto infatti di caricare due file per ogni immagine, una con le dimensioni normali e una al doppio della risoluzione che chiameremo nome-file@2x.estensione.

Supponiamo per esempio di voler gestire l’ottimizzazione del logo aziendale. Nella vostra cartella immagini ci saranno due file:

logo.png con dimensioni 260x65px (per esempio)

e il corrispettivo retina

logo@2x.png con dimensioni 521x130px (il doppio dell’originale)

Caricate, come da figura, il logo originale nella pagina HTML e vedrete come tutti i display con normale risoluzione andranno a interpretarlo correttamente.

Retina display

Nel momento in cui vi trovate a visualizzare la pagina in un dispositivo retina display potete notare come la risoluzione viene intercettata dal plug-in che automaticamente andrà a cercare e caricare l’immagine @2x sostituendo la precedente.

Retina display

In poche parole, se è presente l’immagine al doppio delle dimensioni e con nome corretto, non dovete fare altro che lasciare lavorare retina.js e il gioco è fatto.

Questo plug-in vi permette anche di gestire le immagini di background, ovvero quelle che gestite come sfondo, caricandole in CSS nel nostro foglio di stile.

Seguendo l’esempio riportato nella figura successiva, inserite, nuovamente, due immagini che chiameremo:

Thunderbold-Display.png con dimensioni 590x453px (per esempio)

e il corrispettivo file per retina

Thunderblod-Display@2x.png con dimensioni 1180x906px (il doppio dell’originale)

“Ispeziona elemento” di Google Chrome vi mostra come gestire il caricamento HTML/CSS della stessa. In figura notate come viene interpretato il codice se il monitor da cui visualizzate non è retina.

Retina display

Per poter attivare, anche in questo caso, lo script retina.js dovete seguire le indicazioni della prossima figura andando a definire una media query.

La sintassi è la seguente:

@media (-webkit-min-device-pixel-ratio: 2) { istruzioni }

A questo punto vi basterà indicare la figura corrispondente da caricare per l’elemento in questione e le dimensioni dell’originale, in modo che il vostro script possa intervenire sostituendola nel momento in cui il display sia retina.

Vediamo da “ispeziona elemento” come al div#bg-display sia stata applicata l’immagine retina al posto di quella per i normali dispositivi.

Retina display

Semplice, no?

Grazie a questi semplici passaggi siete pronti ad ottimizzare i vostri siti web per i display retina.

A buon rendere.

Fonte immagine copertina Thomas Tolkien

Topic: , ,

Send this to a friend