Oggi la qualità visiva sul web è più importante che mai. I dispositivi moderni – smartphone, tablet e laptop – sono spesso dotati di display Retina o ad alta densità di pixel (HiDPI), capaci di mostrare immagini estremamente dettagliate che garantiscono performance visive molto elevate.
Dal punto di vista del web design e dello sviluppo front-end, questo scenario impone una maggiore cura nella gestione delle immagini. Continuare a servire risorse raster standard (1x) su dispositivi con schermi ad alta densità rischia, infatti, di compromettere l’esperienza utente di fascia alta: quella offerta agli utenti con device più recenti e performanti!
Il risultato? Interfacce visivamente sfocate, loghi impastati, dettagli grafici poco leggibili. In contesti professionali – e in particolare su siti a forte impatto visivo come portfolio, landing page o e-commerce – tutto questo si traduce in una perdita di qualità percepita e di autorevolezza del brand.
Per evitare questi problemi senza sacrificare le performance del sito web, è fondamentale adottare una strategia bilanciata che consenta di servire immagini ad alta definizione solo quando effettivamente necessario. Ed è proprio qui che entra in gioco lo script che vedremo tra poco.
Cos’è un display Retina (o HiDPI)?
Un display Retina è una tecnologia introdotta da Apple per indicare schermi con un’altissima densità di pixel, tale da rendere invisibili i singoli pixel a occhio nudo. Ma il termine si è poi esteso a tutti i display HiDPI (High Dots Per Inch) usati anche su Android, Windows, Smart TV e dispositivi professionali.
Un normale schermo ha una densità di 72-96 DPI, mentre uno schermo Retina arriva anche a 220-450 DPI. Questo significa che, per apparire nitida su un display Retina, un’immagine deve avere il doppio (2x) della risoluzione standard.
Cosa significa “immagine 2x”?
Per spiegare meglio il concetto partiamo da un esempio: se un logo viene mostrato a 200×100 pixel sul sito, la versione “2x” dovrebbe avere una dimensione di almeno 400×200 pixel, mantenendo però le stesse dimensioni sul layout. Questo consente al browser di “ridimensionare” l’immagine, mostrandola perfettamente nitida anche sui display più esigenti.
Una strategia molto diffusa, soprattutto nei progetti responsive o nei siti ottimizzati per dispositivi mobile, consiste nel preparare due versioni dell’immagine: quella normale (1x) e quella ad alta risoluzione (2x). Ma come possiamo servire dinamicamente quella più adatta?
Perché non conviene usare sempre e solo le immagini ad alta risoluzione?
Un errore comune è quello di caricare sempre e comunque immagini grandi e pesanti, magari versioni “2x” anche su dispositivi che non ne hanno bisogno. Peccato che questa scelta sia sbagliata: questo approccio può essere dannoso per il posizionamento SEO e per la velocità del sito.
Google, infatti, premia i siti web che offrono una buona esperienza utente, e la velocità di caricamento è uno dei fattori determinanti. Immagini troppo pesanti rallentano il sito, soprattutto su mobile o connessioni lente, aumentando la probabilità di abbandono da parte degli utenti.
Lo script proposto in questo tutorial è una soluzione elegante a questo tipo di problema: permette di caricare le immagini in versione standard (più leggera) per tutti gli utenti, ma di offrirne una versione retina solo quando serve. In questo modo ottieni il miglior equilibrio tra:
- Qualità visiva sui display moderni
- Performance e velocità su tutti i dispositivi
- Ottimizzazione SEO grazie a un caricamento efficiente
È un approccio intelligente che soddisfa sia le esigenze estetiche che quelle tecniche e di ottimizzazione, rendendolo ideale per progetti professionali, e-commerce, blog e siti corporate.
Soluzione: fornire immagini Retina con JavaScript o jQuery
Il metodo che proponiamo in questo tutorial è semplice ma efficace: sfruttare JavaScript o jQuery per rilevare se il dispositivo ha un display ad alta densità e, in caso affermativo, sostituire automaticamente l’immagine con la sua variante ad alta risoluzione, indicata tramite un attributo data-retina.
Esempio HTML di partenza
<img src="/images/logo.png" data-retina="/images/logo@2x.png" alt="Logo" width="200" height="100">
In questo esempio, la versione standard viene caricata per impostazione predefinita, ma se il browser supporta i display Retina, possiamo sostituirla con la versione @2x. La sostituzione avviene dinamicamente attraverso Javascript…
Versione in “puro” JavaScript
document.addEventListener("DOMContentLoaded", function () {
if (window.devicePixelRatio >= 2) {
document.querySelectorAll('img[data-retina]').forEach(function (img) {
var retinaSrc = img.getAttribute('data-retina');
if (retinaSrc) {
img.setAttribute('src', retinaSrc);
}
});
}
});
Il codice verifica che devicePixelRatio sia maggiore o uguale a 2, cioè che il dispositivo abbia un display ad alta densità. In tal caso, sostituisce la src delle immagini con il contenuto di data-retina.
Versione equivalente in jQuery
$(function () {
if (window.devicePixelRatio >= 2) {
$('img[data-retina]').each(function () {
var retinaSrc = $(this).data('retina');
if (retinaSrc) {
$(this).attr('src', retinaSrc);
}
});
}
});
La versione jQuery è più compatta e leggibile, ideale se hai già incluso jQuery nel tuo progetto. Il comportamento è identico, ma il codice si semplifica grazie alla sintassi più concisa.
Gestire anche gli sfondi? Nessun problema!
Lo stesso concetto può essere applicato anche agli elementi con immagini di sfondo. Basta usare un attributo personalizzato, come data-retina-bg, e modificarne dinamicamente lo stile:
Esempio HTML
<div class="hero" style="background-image: url('/images/hero.jpg');" data-retina-bg="/images/hero@2x.jpg"></div>
Script jQuery
$(function () {
if (window.devicePixelRatio >= 2) {
$('[data-retina-bg]').each(function () {
var retinaBg = $(this).data('retina-bg');
if (retinaBg) {
$(this).css('background-image', 'url("' + retinaBg + '")');
}
});
}
});
In questo modo, anche le immagini di sfondo possono beneficiare di un aspetto più nitido su display Retina, senza caricare file pesanti su dispositivi che non ne trarrebbero vantaggio.
Meglio JavaScript, jQuery o srcset?
Esistono vari modi per gestire le immagini retina: l’approccio proposto qui è estremamente flessibile e compatibile anche con progetti legacy o quando si desidera controllare il comportamento in modo programmatico. Tuttavia, per progetti più moderni, potresti considerare anche l’uso dei tag <picture> o dell’attributo srcset, che delegano al browser la scelta dell’immagine più adatta.
Conclusione
Servire immagini Retina è ormai uno standard per garantire una grafica nitida e professionale su ogni tipo di dispositivo. Con poche righe di codice JavaScript o jQuery puoi ottimizzare il caricamento delle immagini e migliorare l’esperienza utente, mantenendo allo stesso tempo leggerezza e controllo.
Non dimenticare che una buona qualità visiva incide anche sulla percezione del tuo brand e, indirettamente, sulla SEO: un sito curato viene spesso premiato anche dai motori di ricerca.
