Nelle figure sotto vediamo la differenza tra un immagine visualizzata su un normale dispositivo
e quella visualizzata su un display retina; per vedere la differenza ho utilizzato due
immagini con nome differente ma per ottenere il risultato vero dobbiamo
creare un'immagine al doppio delle dimensioni rinominandola in: nomeimg@2x.estensione.
Nel sito andremo a caricare l'immagine dimezzata chiamandola con lo stesso nome: nomeimg.estensione.
Il plugin retina.js si occuperà di verificare il display e caricare di conseguenza l'immagine adatta.
Nell'immagine caricata di sfondo che vediamo a lato visualizzeremo l'immagine ottizzata
se il plugin intercetta che il nostro display è retina, viceversa verrà caricata l'immagine a metà
risoluzione presente di defaul come background del div.
Per vedere come diamo un'occhiata al foglio di stile del demo.
Il plugin ci permette di ottimizzare cosi i tempi di caricamento e la velocità del sito
che sarebbe altrimenti compromessa dalla pesantezza di dover caricare, anche in ottica
responsive, immagini sempre al doppio della dimensione visualizzata
evitando la fastidiosa sgranatura delle immagini normali nei display di casa Apple.
Per tutte le altre opzioni del caso e per scaricare il plugin vi rimando al sito ufficiale:
