Immagini Retina: Fornire grafiche nitide su schermi ad alta risoluzione

Ultimo aggiornamento: June 30, 2026

I display Retina e ad alta DPI contengono più pixel nello stesso spazio fisico, quindi un'immagine dimensionata per uno schermo standard appare morbida e pixelata su di essi. Servire immagini nitide su questi schermi significa preparare versioni ad alta risoluzione e dire al browser quando usarle. Questa guida copre il flusso di lavoro 2x e 3x, l'uso del markup srcset che fornisce il file corretto, e il bilanciamento tra nitidezza e peso della pagina.

Risposta rapida: come rendere nitide le immagini sui display Retina?

Crea una versione dell'immagine con il doppio (e per i telefoni, il triplo) delle dimensioni dei pixel di visualizzazione, quindi usa l'attributo srcset per offrire entrambe le versioni. Il browser carica il file ad alta risoluzione solo su schermi che possono mostrarlo, in modo che gli schermi standard non scarichino byte extra. Una foto visualizzata a 400 pixel di larghezza ha bisogno di una sorgente da 800 pixel (2x) per un Retina. Esporta entrambe con la compressione appropriata: il file 2x è più grande ma non doppio, perché l'efficienza della compressione migliora con la risoluzione.

Cos'è un display Retina o ad alta DPI?

Un display Retina è un termine di marketing per uno schermo con una densità di pixel sufficientemente alta da impedire all'occhio di distinguere i singoli pixel a distanza normale di visualizzazione. Apple lo ha coniato, ma il concetto si applica alla maggior parte dei moderni telefoni, tablet e laptop. La misura pratica è il rapporto pixel del dispositivo (DPR) — quanti pixel fisici rappresentano un singolo pixel CSS.

• Uno schermo 2x ha bisogno del doppio dei pixel lineari (quattro volte il totale) per apparire nitido.
• Uno schermo telefonico 3x ha bisogno di tre volte i pixel lineari.
• Gli schermi standard 1x scaricano l'immagine base e non sprecano nulla.

La Mozilla guide to device pixel ratio documenta come i browser riportano e utilizzano il DPR, che è la base di ogni strategia per immagini Retina.

Come creare versioni immagine 2x e 3x?

Parti da una sorgente ad alta risoluzione e Ridimensionatore di Immagini a ciascun target piuttosto che scalare un file piccolo. Una foto destinata a uno slot di visualizzazione largo 400 pixel ha bisogno di una versione da 400px (1x), 800px (2x) e 1200px (3x) per i telefoni.

1. Parti da una sorgente almeno grande del tuo target più grande (3x).
2. Ridimensionatore di Immagini a larghezze 1x, 2x e 3x.
3. Compressore di Immagini ogni versione — i file 2x e 3x si comprimono meglio per pixel.
4. Esporta come WebP per i file più piccoli ad alta qualità.
5. Servi tutte le versioni e lascia che il browser scelga.

• Non scalare mai un'immagine piccola a 2x — rimane morbida e diventa solo più pesante.
• Il file 2x è di solito meno del doppio dei byte 1x grazie alla migliore compressione.
• Le versioni 3x sono più importanti per i telefoni con schermi piccoli e densi.

Come servire la versione corretta con srcset?

L'attributo srcset su un tag <img> dice al browser quale file caricare in base al DPR dello schermo. È il browser a gestire la selezione, quindi tu fornisci le opzioni e il markup.

<img
  src="photo-1x.webp"
  srcset="photo-1x.webp 1x, photo-2x.webp 2x, photo-3x.webp 3x"
  alt="Descriptive alt text"
  width="400" height="300"
/>

• I descrittori 1x, 2x, 3x mappano i file ai rapporti pixel del dispositivo.
• Il browser carica solo la versione che corrisponde allo schermo.
• Includere sempre larghezza e altezza per prevenire lo spostamento del layout (layout shift).
• L'attributo src è il fallback per i browser più vecchi.

Per immagini responsive che cambiano anche dimensioni attraverso le larghezze dello schermo, combina srcset con l'attributo sizes e i descrittori di larghezza (400w, 800w) invece dei descrittori DPR. La responsive images guide copre questo pattern più avanzato, e la image SEO guide spiega come immagini nitide e correttamente dimensionate aiutino anche le prestazioni di ricerca.

Quando usare SVG invece del raster

Per loghi, icone e illustrazioni con forme piatte, puoi aggirare l'intero problema 2x/3x utilizzando SVG. I grafici vettoriali scalano all'infinito senza penalità di risoluzione — lo stesso file SVG è nitido su un monitor 1x e su un telefono 3x, perché viene disegnato da matematica piuttosto che memorizzato come pixel.

SVG è la risposta giusta ogni volta che l'immagine è composta da forme piuttosto che dettagli fotografici. Il compromesso è che gli SVG devono essere ottimizzati — i metadati inutilizzati e il "detrito" degli editor li gonfiano — e la SVG to PNG guide copre il flusso di lavoro quando hai bisogno di un fallback raster per un ambiente che non può renderizzare vettori. Per un sito brand con un logo nell'intestazione, un SVG elimina completamente la questione Retina per quell'elemento.

Testare le tue immagini Retina

Generare i file è metà del lavoro; verificarne il corretto caricamento è l'altra metà. Alcuni controlli confermano che l'impostazione funziona piuttosto che servire silenziosamente il file sbagliato.

1. Aprire la pagina su un dispositivo Retina o impostare il DPR del browser a 2x negli strumenti per sviluppatori (dev tools).
2. Ispezionare l'elemento immagine e confermare che il currentSrc caricato sia il file 2x o 3x.
3. Passare a un DPR 1x e confermare che carichi il file 1x invece.
4. Controllare la scheda rete (network tab) per verificare che venga scaricata solo una versione per schermo.
5. Visualizzare al 100% sullo schermo Retina e confermare che l'immagine sia nitida, non morbida.

L'override del rapporto pixel del dispositivo negli strumenti di sviluppo del browser ti permette di testare senza dispositivi fisici, anche se un vero schermo Retina è la prova finale. Un errore comune è un refuso nel markup srcset che fa sì che il browser torni al src base, che appare morbido su Retina senza generare errori. La scheda rete lo rileva immediatamente: se vedi caricare il file 1x su uno schermo 2x, significa che srcset non è collegato correttamente.

Bilanciare nitidezza e peso della pagina

La trappola con le immagini Retina è servire file ad alta risoluzione a ogni schermo, raddoppiando o triplicando il peso della pagina per gli utenti che non possono vedere la differenza. L'approccio srcset evita questo, ma solo se si generano effettivamente le versioni più piccole e si fa riferimento ad esse. Un singolo file 3x servito a tutti è l'errore più comune.

La web.dev guide to responsive images documenta l'impatto sulle prestazioni del fare bene questo, e la Core Web Vitals guide collega direttamente il peso dell'immagine alla metrica LCP che influisce sul ranking. L'obiettivo è nitidezza dove è visibile e moderazione ovunque altro — lascia che sia il browser a scegliere, e genera ogni versione in modo che abbia qualcosa di buono da scegliere.

Domande frequenti

Come faccio a rendere nitide le immagini sui display Retina?

Servire versioni 2x (e opzionalmente 3x) delle immagini raster alle dimensioni del display, utilizzando srcset in modo che il browser scelga il file giusto in base al rapporto pixel del dispositivo. Un'immagine 1x su uno schermo Retina appare morbida; la variante 2x ripristina la nitidezza.

Ho bisogno di immagini 2x per ogni grafica?

Per grafiche nitide e foto eroiche (hero photos), sì — gli schermi Retina mostrano altrimenti la morbidezza. Per immagini decorative o sotto il fold, un singolo file 1x è spesso sufficiente. Servire entrambe con srcset in modo che i dispositivi non-Retina non scarichino il file grande.

Quando dovrei usare SVG invece del raster 2x?

Per loghi, icone e grafiche piatte, sì — SVG è indipendente dalla risoluzione e rimane nitido a qualsiasi dimensione senza file extra. Per le fotografie, il raster (con varianti 2x) è ancora la scelta giusta. Vedi la SVG to PNG guide.

Come servo le immagini Retina?

Usare srcset con sorgenti 1x e 2x (e opzionalmente 3x), lasciando che il browser scelga in base al rapporto pixel del dispositivo. Inviare la 1x come src predefinito in modo che i browser più vecchi falliscano correttamente. Il browser scarica solo la variante di cui ha bisogno.

srcset rallenta la pagina?

No — il browser scarica solo la singola variante di cui ha bisogno, quindi uno schermo piccolo ottiene il file piccolo. Senza srcset, ogni dispositivo scarica il file più grande. srcset risparmia byte, non ne aggiunge.