Cos'è il Device Pixel Ratio (DPR)? Perché le immagini appaiono sfocate sui display Retina

Passi giorni a progettare un sito web. Carichi un logo PNG perfettamente nitido, lo visualizzi in anteprima sul tuo monitor desktop e tutto sembra impeccabile. Poi apri la stessa identica pagina web su un iPhone, un MacBook o uno schermo 4K: il logo appare impastato, poco definito e visibilmente sfocato lungo i bordi.

Nel frattempo, il testo sulla stessa pagina è affilatissimo. I titoli sembrano scolpiti nel vetro, eppure foto, icone e banner principali sembrano usciti da un vecchio sito web del 2005.

Perché uno schermo ad alta risoluzione, costoso e moderno, rende la grafica peggiore anziché migliore?

La risposta risiede in un unico numero: il Device Pixel Ratio (DPR).

Comprendere il DPR è una delle competenze più pratiche che tu possa acquisire come web designer, sviluppatore frontend o proprietario di siti web. Una volta capito come i browser gestiscono gli schermi ad alta densità, non caricherai mai più un’immagine sgranata e non avrai più problemi con la gestione delle risorse responsive.

---

Il problema fondamentale: pixel hardware vs. pixel di layout

Per comprendere il DPR, dobbiamo fare un passo indietro ed esaminare come funzionavano storicamente i monitor dei computer.

Per decenni, gli schermi digitali hanno seguito una regola semplice: un pixel nel tuo codice corrispondeva a un singolo diodo fisico sul monitor.

Se il tuo monitor aveva una risoluzione nativa di 1024 × 768, conteneva 1.024 emettitori di luce RGB microscopici in orizzontale e 768 in verticale. Se scrivevi una riga di CSS come width: 200px;, il browser indicava al monitor di accendere esattamente 200 punti fisici sul pannello di vetro.

A quei tempi, i display avevano una densità di circa 72-96 pixel per pollice (PPI, Pixels Per Inch). Un pulsante largo 100 pixel aveva approssimativamente le stesse dimensioni fisiche su quasi tutti i monitor da ufficio del pianeta.

La rivoluzione degli smartphone ha infranto questa regola

Tutto è cambiato nel 2010, quando i display ad alta densità (come il primo “Retina Display” di Apple su iPhone 4) sono approdati sul mercato consumer.

I produttori di hardware hanno compresso quattro volte il numero di pixel sulla stessa identica superficie di vetro. Uno schermo di iPhone che prima gestiva 320 × 480 pixel ha improvvisamente racchiuso 640 × 960 pixel fisici in un piccolo schermo tascabile da 3,5 pollici.

Questo balzo ha generato una crisi immediata per il web.

Se i browser avessero continuato a trattare un pixel CSS come un pixel fisico dell’hardware:

• Un normale sito web per computer desktop (largo 960px) si sarebbe rimpicciolito fino alle dimensioni di un francobollo.
• I menu di navigazione e i pulsanti sarebbero stati larghi appena 2 o 3 millimetri: impossibili da premere con un dito umano.
• Per leggere il testo del corpo pagina sarebbe servita una lente d’ingrandimento.

I browser non potevano permettersi di compromettere ogni sito esistente su Internet. Per risolvere il problema, gli sviluppatori dei browser e i comitati degli standard web hanno diviso il concetto di “pixel” in due entità del tutto distinte:

1. Pixel fisici (Pixel hardware): Gli effettivi, minuscoli punti luce integrati fisicamente nel pannello del display.
2. Pixel CSS (Pixel logici / Pixel di riferimento): Un’unità astratta utilizzata dai browser web per il layout, la tipografia, gli spazi e le media query.

Il Device Pixel Ratio (DPR) è semplicemente il fattore di conversione tra questi due mondi.

---

Cos’è esattamente il Device Pixel Ratio (DPR)?

Il Device Pixel Ratio (DPR) è il rapporto tra i pixel fisici dell’hardware e i pixel logici CSS su un determinato schermo.

$$\text{DPR} = \frac{\text{Pixel Fisici Hardware}}{\text{Pixel Logici CSS}}$$

Puoi considerare il DPR come la risposta a questa semplice domanda:

“Quanti punti fisici dell’hardware usa questo schermo per disegnare un singolo riquadro da 1px definito nel mio foglio di stile CSS?”

Ecco come le tipologie di schermo più comuni applicano questa formula:

1. Display standard (DPR = 1.0)

• Cosa significa: 1 pixel CSS = 1 pixel hardware fisico.
• Dove si trova: Monitor desktop 1080p tradizionali (da 24 o 27 pollici), portatili da ufficio economici, TV meno recenti.
• Come viene renderizzato: Un’immagine da 100 × 100 pixel occupa esattamente 100 × 100 diodi hardware sullo schermo. Non vi è alcun ridimensionamento, interpolazione o allungamento.

2. Display High-DPI / Retina (DPR = 2.0)

• Cosa significa: 1 pixel CSS = 2 pixel fisici lungo ciascun asse.
• Dove si trova: MacBook Air, MacBook Pro, iPad, monitor 4K impostati con scaling al 200%, molti tablet Android.
• Come viene renderizzato: Poiché i pixel vengono conteggiati su due dimensioni (larghezza e altezza), un’area di $1 \times 1$ pixel CSS è supportata da una griglia di $2 \times 2$: ciò significa che vengono usati 4 pixel fisici per disegnare una singola unità logica di layout!

3. Schermi mobile a densità ultra-elevata (DPR = 3.0)

• Cosa significa: 1 pixel CSS = 3 pixel fisici lungo ciascun asse.
• Dove si trova: Da iPhone 13 Pro a iPhone 16 Pro, serie Samsung Galaxy S, smartphone top di gamma Google Pixel.
• Come viene renderizzato: Un’area di $1 \times 1$ pixel CSS è supportata da una griglia di $3 \times 3$ diodi hardware. Questo significa che ben 9 punti hardware fisici si illuminano per ogni singolo pixel CSS!

---

Tabella di riferimento DPR: Dispositivi popolari

Dispositivo	Risoluzione fisica schermo	Dimensioni viewport CSS	Device Pixel Ratio (DPR)	Punti fisici per pixel CSS
Monitor standard 24” ufficio	1920 × 1080	1920 × 1080	1.0x	1 punto ($1 \times 1$)
MacBook Air 13” (M2/M3)	2560 × 1664	1280 × 832	2.0x	4 punti ($2 \times 2$)
MacBook Pro 16” (M3 Max)	3456 × 2234	1728 × 1117	2.0x	4 punti ($2 \times 2$)
Monitor 4K 27” (scaling al 200%)	3840 × 2160	1920 × 1080	2.0x	4 punti ($2 \times 2$)
Laptop Windows 14” (scaling al 150%)	1920 × 1080	1280 × 720	1.5x	2,25 punti
iPhone 15 / 16 (Base)	2556 × 1179	393 × 852	3.0x	9 punti ($3 \times 3$)
Samsung Galaxy S24 Ultra	3120 × 1440	384 × 832	3.0x	9 punti ($3 \times 3$)
iPad Air 11”	2360 × 1640	1180 × 820	2.0x	4 punti ($2 \times 2$)

Noti qualcosa di interessante sui laptop Windows?
Fai caso al valore DPR di 1.5x sul portatile Windows. Mentre Apple adotta rigorosamente fattori di scala interi (come 2.0x e 3.0x), le impostazioni dello schermo di Windows consentono ridimensionamenti frazionari (125%, 150%, 175%). Di conseguenza, il DPR può essere un numero decimale come 1.25 o 1.5!

---

Perché le immagini appaiono sfocate sugli schermi High-DPR?

Ora che hai compreso che un iPhone o un MacBook utilizzano da 4 a 9 punti hardware per ciascun pixel di layout CSS, la causa della grafica sfocata appare ovvia.

Esaminiamo un esempio pratico passo dopo passo:

Immagina di avere il logo di un cliente. Nel tuo foglio di stile CSS assegni al logo dimensioni di layout ben definite:

.site-logo {
  width: 200px;
  height: 60px;
}

Per riempire questo spazio, esporti un file PNG chiamato logo.png che misura esattamente 200 × 60 pixel, e lo inserisci nella pagina:

<img src="logo.png" class="site-logo" alt="Acme Corp">

Ecco cosa accade dietro le quinte in base allo schermo utilizzato dal visitatore:

Scenario A: Il visitatore usa un monitor da ufficio 1080p (DPR = 1)

• Il browser riserva uno spazio di 200 × 60 pixel CSS sullo schermo.
• Lo schermo ha 1 punto hardware per ogni pixel CSS.
• Area hardware totale: $200 \times 60 = 12.000$ diodi hardware.
• Il tuo file immagine fornisce: $200 \times 60 = 12.000$ pixel di immagine.
• Risultato: Corrispondenza 1 a 1 perfetta. Ogni pixel del file immagine combacia esattamente con un pixel hardware. Il logo appare impeccabilmente nitido.

Scenario B: Il visitatore usa un MacBook Pro o un monitor 4K (DPR = 2)

• Il browser riserva comunque un box di layout da 200 × 60 pixel CSS per non alterare la struttura della pagina.
• MA lo schermo ha un DPR pari a 2.0. Quel riquadro di layout copre ora 400 × 120 pixel fisici hardware!
• Area hardware totale: $400 \times 120 = 48.000$ diodi hardware.
• Il tuo file immagine contiene ancora soltanto: $200 \times 60 = 12.000$ pixel.
• Al browser mancano improvvisamente 36.000 pixel di dati visivi!
• Risultato: Il browser non ha altra scelta se non stirare l’immagine fino al doppio delle sue dimensioni originali. Usa l’interpolazione bilineare o bicubica per stimare il colore dei pixel mancanti. I bordi si ammorbidiscono, i contorni netti sfumano e il logo appare fuori fuoco.

Scenario C: Il visitatore usa un iPhone 16 Pro (DPR = 3)

• Il riquadro CSS da 200 × 60 copre ora 600 × 180 pixel fisici ($108.000$ diodi hardware).
• L’immagine originale da 12.000 pixel viene allungata fino a 9 volte la sua area in pixel!
• Risultato: Forte sfocatura, pixel evidenti e testo illeggibile o impastato nel logo.

Perché il testo non risente di questo problema?

Potresti chiederti: se le immagini raster vengono stirate, perché il testo HTML rimane perfettamente nitido?

Il testo non è composto da pixel bitmap. I font sono tracciati vettoriali descritti matematicamente da curve e coordinate (curve di Bézier).

Quando un browser esegue il rendering di un paragrafo di testo su uno schermo 2x o 3x, il sistema operativo ricalcola la geometria del carattere direttamente alla risoluzione fisica nativa del pannello. Disegna bordi affilati sfruttando tutti i 48.000 o 108.000 pixel hardware disponibili.

Ecco perché le immagini raster sfocate risultano particolarmente fastidiose sui display ad alta densità: si trovano fianco a fianco con una tipografia vettoriale impeccabile!

---

Come verificare il DPR attuale in qualsiasi browser

Non servono estensioni o strumenti particolari per scoprire il Device Pixel Ratio dello schermo su cui stai leggendo questa guida.

Metodo 1: Tramite la Console del browser

1. Apri gli strumenti per sviluppatori del browser (premi F12 su Windows/Linux, oppure Cmd + Option + I su Mac).
2. Fai clic sulla scheda Console.
3. Digita:

   window.devicePixelRatio

4. Premi Invio.

Il numero restituito è il valore DPR attivo del tuo schermo. Su un monitor standard sarà 1, su un MacBook Retina sarà 2, su un iPhone sarà 3.

Metodo 2: Monitorare i cambi di DPR in JavaScript

Sapevi che il DPR può variare dinamicamente in tempo reale?

Se un utente esegue lo zoom nel browser (Cmd + o Ctrl +), sposta una finestra dallo schermo del portatile a un monitor esterno 1080p, o modifica il fattore di scala nelle impostazioni di sistema, il DPR del browser si aggiorna istantaneamente.

Puoi monitorare le variazioni di DPR usando le moderne API JavaScript con matchMedia:

const updateDprNotice = () => {
  console.log(`Il DPR attuale è ora: ${window.devicePixelRatio}`);
};

// Crea una media query corrispondente alla risoluzione attuale
const dprQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);

// Rileva le variazioni di risoluzione (es. zoom o cambio monitor)
dprQuery.addEventListener("change", updateDprNotice);

---

Come correggere le immagini sfocate: 5 strategie comprovate

Passiamo alla parte pratica. Come possiamo garantire che grafica e foto appaiano cristalline su ogni display senza inviare file enormi e lenti ai monitor tradizionali?

Ecco le 5 tecniche consolidate utilizzate nel moderno sviluppo web:

1. Usa SVG per loghi, icone e grafica semplice

Ogni volta che un’immagine è composta da forme geometriche, colori piatti o scritte, non esportarla mai in PNG o JPEG. Usa invece SVG (Scalable Vector Graphics).

Proprio come i font, i file SVG sono tracciati vettoriali costituiti da coordinate XML anziché da matrici di pixel. Che vengano visualizzati su un monitor 1x, su un iPhone 3x o su un cartellone pubblicitario stampato a 16K, i file SVG vengono renderizzati alla massima risoluzione fisica disponibile con precisione matematica.

<!-- Nitido su ogni schermo esistente, peso del file minuscolo -->
<img src="/logo.svg" width="200" height="60" alt="Logo aziendale">

Regola pratica:

• Loghi, icone, badge UI, frecce e illustrazioni vettoriali $\rightarrow$ SVG.
• Fotografie, screenshot realistici e opere visive complesse $\rightarrow$ Raster con srcset responsive (vedi sotto).

---

2. La regola del 2x per immagini raster (Soluzione rapida)

Se hai un’immagine raster (come la foto di un profilo o il ritratto di un autore) che verrà sempre mostrata a una dimensione CSS fissa, ad esempio 80px × 80px:

1. Esporta il file immagine a risoluzione doppia: 160px × 160px.
2. Salvalo in un formato moderno come WebP o AVIF per mantenere il file leggerissimo.
3. Limita esplicitamente le dimensioni in HTML o CSS alla dimensione desiderata:

<!-- Il file fisico è 160x160, ma vincolato a 80x80 pixel CSS -->
<img src="/avatar@2x.webp" width="80" height="80" alt="Foto profilo">

Su un monitor 1x, il browser effettua un leggero sottocampionamento mantenendo l’immagine pulita. Su uno schermo Retina 2x, ogni diodo hardware riceve informazioni native, rendendo la foto perfettamente nitida.

---

3. Usa srcset con descrittori di densità di pixel (1x, 2x)

E se non volessi costringere gli utenti su connessioni mobili lente o con schermi standard 1x a scaricare file di dimensioni doppie?

L’HTML supporta nativamente la selezione delle immagini in base al DPR tramite l’attributo srcset con descrittori di densità (1x, 2x, 3x):

<img 
  src="/hero-800.webp" 
  srcset="/hero-800.webp 1x, 
          /hero-1600.webp 2x, 
          /hero-2400.webp 3x"
  width="800" 
  height="450" 
  alt="Postazione di lavoro moderna"
  loading="lazy">

Come interpreta il codice il browser:

• Un utente su un PC da ufficio 1080p standard (DPR 1.0) scarica hero-800.webp (~45 KB).
• Un utente su un MacBook Pro (DPR 2.0) scarica hero-1600.webp (~120 KB).
• Un utente su un iPhone 16 Pro (DPR 3.0) scarica hero-2400.webp (~220 KB).

Ogni dispositivo scarica esattamente la densità che è in grado di mostrare fisicamente, preservando banda e garantendo la massima nitidezza in modo automatico.

---

4. Immagini fluide e responsive con srcset e sizes (Per layout dinamici)

Sui siti web responsive, raramente le immagini mantengono una larghezza fissa. L’immagine di una card potrebbe occupare il 100% dello schermo su smartphone, ma solo il 33% all’interno di una griglia a tre colonne su desktop.

Quando la larghezza dell’immagine varia in base alle dimensioni dello schermo, i descrittori di densità (1x, 2x) non bastano. È necessario ricorrere ai descrittori di larghezza (w) combinati con l’attributo sizes:

<img 
  src="/article-cover-800.webp"
  srcset="/article-cover-400.webp 400w,
          /article-cover-800.webp 800w,
          /article-cover-1200.webp 1200w,
          /article-cover-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 
         (max-width: 1024px) 50vw, 
         33vw"
  width="800" 
  height="450" 
  alt="Comprendere la risoluzione dello schermo"
  loading="lazy">

Perché questo metodo funziona alla perfezione:

Il browser moltiplica la larghezza CSS calcolata per il Device Pixel Ratio dello schermo:

• Uno smartphone ha una viewport di 390px (con DPR 3.0). L’immagine occupa 100vw ($390\text{px}$). Il browser calcola: $$390\text{px} \times 3.0 = 1.170\text{ pixel fisici necessari}$$ Seleziona quindi article-cover-1200.webp.
• Un utente desktop 1080p ha una finestra del browser di 1280px (con DPR 1.0). L’immagine occupa 33vw ($422\text{px}$). Il browser calcola: $$422\text{px} \times 1.0 = 422\text{ pixel fisici necessari}$$ Seleziona article-cover-400.webp.

Nessun codice JavaScript aggiuntivo richiesto. Il browser esegue il calcolo ottimale prima ancora di visualizzare il primo pixel.

---

5. Immagini di sfondo CSS High-DPI con image-set() o Media Query

Se imposti immagini di sfondo tramite fogli di stile CSS, puoi utilizzare le media query standard o la funzione moderna image-set() per servire risorse ad alta risoluzione senza fatica.

Opzione A: La funzione moderna image-set() (Consigliata)

Supportata da tutti i browser moderni (Chrome, Safari, Firefox, Edge):

.hero-banner {
  background-image: image-set(
    url("/hero-bg.webp") 1x,
    url("/hero-bg@2x.webp") 2x
  );
  background-size: cover;
  background-position: center;
}

Opzione B: Media Query CSS con min-resolution

Se hai bisogno di controllare breakpoint e densità contemporaneamente:

/* Sfondo standard 1x */
.card-header {
  background-image: url("/card-bg.webp");
  background-size: 300px 180px;
}

/* Sfondo Retina 2x */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .card-header {
    background-image: url("/card-bg@2x.webp");
  }
}

Perché 192dpi?
La risoluzione CSS standard di riferimento è definita come 96 punti per pollice (DPI). Raddoppiandola per uno schermo 2x, si ottiene $96 \times 2 = 192\text{dpi}$ (ovvero 2dppx, acronimo di dots per pixel unit).

---

L’insidia nascosta: Canvas e WebGL su schermi High-DPI

Se utilizzi l’elemento HTML5 <canvas> (per grafici, visualizzazioni interattive, giochi web o moduli di firma digitale), incontrerai il problema della sfocatura del DPR in forma ancora più evidente.

Di default, un canvas HTML crea il proprio buffer di disegno basandosi unicamente sugli attributi dell’elemento:

<!-- Canvas predefinito: Crea un buffer di disegno 300x150 -->
<canvas id="chart"></canvas>

Se applichi regole CSS per adattare il canvas al tuo layout:

#chart {
  width: 300px;
  height: 150px;
}

Su un MacBook o un monitor 4K, linee e testi all’interno del canvas appariranno incredibilmente sgranati.

Perché? Perché il canvas ha creato un buffer bitmap interno di appena 300 × 150 pixel, e il browser ha allungato quella piccola bitmap su un’area hardware reale di 600 × 300 pixel!

Come rendere nitido un canvas HTML sui display Retina:

Per risolvere il problema, è necessario moltiplicare le dimensioni del buffer interno del canvas per window.devicePixelRatio, mantenendo invariate le dimensioni visuali CSS:

const canvas = document.getElementById("chart");
const ctx = canvas.getContext("2d");

// Dimensioni desiderate per il layout in pixel CSS
const cssWidth = 300;
const cssHeight = 150;

// Ottieni la densità dello schermo attuale
const dpr = window.devicePixelRatio || 1;

// 1. Imposta le dimensioni del buffer fisico moltiplicate per il DPR
canvas.width = cssWidth * dpr;
canvas.height = cssHeight * dpr;

// 2. Blocca le dimensioni visive sulla pagina usando i pixel CSS
canvas.style.width = `${cssWidth}px`;
canvas.style.height = `${cssHeight}px`;

// 3. Scala tutte le operazioni di disegno per mantenere le coordinate in unità CSS
ctx.scale(dpr, dpr);

// Ora disegna normalmente: la resa grafica sarà nitidissima!
ctx.fillStyle = "#2563eb";
ctx.fillRect(20, 20, 100, 50);

Questo semplice accorgimento garantisce che librerie grafiche, motori di gioco e applicazioni di disegno vettoriale rendano con nitidezza assoluta sui display Retina.

---

Prestazioni vs. Nitidezza: Trovare il giusto equilibrio

Ora che sai come servire immagini a 2x e 3x, sorge una domanda fondamentale: Conviene davvero distribuire risorse a 3x a tutti gli smartphone moderni?

In quasi tutti i casi, la risposta è no.

Ecco i motivi:

1. Rendimenti decrescenti per la vista umana:
   Su un moderno smartphone tenuto alla normale distanza d’uso (25-30 cm), l’occhio umano non riesce a distinguere i singoli pixel oltre i 300-350 PPI circa. Un’immagine a 2x su uno schermo da 3x risulta indistinguibile da una vera immagine 3x per il 99% degli utenti.

2. Crescita esponenziale del peso dei file:
   L’area dei pixel cresce in modo quadratico:

   • Un’immagine 1x contiene 1x dati.
   • Un’immagine 2x contiene 4x dati ($2 \times 2$).
   • Un’immagine 3x contiene 9x dati ($3 \times 3$)!

   Fornire immagini reali a 3x per fotografie di grandi dimensioni può trasformare un’immagine WebP snella da 120 KB in un file pesante da oltre 800 KB. Ciò consuma inutilmente il piano dati mobile dell’utente, penalizza i Core Web Vitals (specialmente il Largest Contentful Paint / LCP) e rallenta il caricamento della pagina.

Le migliori pratiche consigliate per il 2026:

• Interfacce vettoriali (Loghi e Icone): Usa sempre SVG. Nessuna sfocatura e peso minimo.
• Fotografie standard e Hero Banner: Limita il tuo srcset responsive a 2.0x. Servire risorse 2x a telefoni 3x garantisce il 95% della nitidezza visiva risparmiando fino al 60% di dati!
• Compressione moderna: Esporta sempre le immagini ad alta risoluzione in WebP o AVIF. Poiché i display High-DPI concentrano i pixel in spazi minuscoli, puoi applicare in sicurezza un livello di compressione leggermente maggiore (qualità attorno a 75-80) senza difetti percepibili.

---

Domande Frequenti (FAQ)

Qual è la differenza tra PPI, DPI e DPR?

• PPI (Pixels Per Inch): La densità hardware reale: quanti minuscoli emettitori di luce sono contenuti in un pollice fisico del display.
• DPI (Dots Per Inch): Termine originario del settore tipografico che indica quanti punti d’inchiostro stampa una stampante per pollice. Nel web design viene spesso usato come sinonimo di PPI.
• DPR (Device Pixel Ratio): Un moltiplicatore software utilizzato da browser e sistemi operativi per convertire le unità logiche di layout (pixel CSS) in pixel fisici hardware.

Perché il mio monitor 4K segnala una risoluzione di 1920 × 1080?

Se utilizzi uno schermo 4K (3840 × 2160) e Windows o macOS hanno impostato il fattore di scala al 200%, il sistema operativo comunica ai browser che la larghezza del desktop è di 1920 × 1080 pixel logici, con un Device Pixel Ratio pari a 2.0.

Il monitor continua a mostrare un’autentica risoluzione 4K! Il sistema operativo raggruppa semplicemente 4 pixel fisici ($2 \times 2$) per disegnare ciascun pixel logico del desktop, evitando che testo e finestre risultino microscopici e illeggibili.

Il DPR può essere un numero decimale come 1.25 o 1.5?

Sì. Nei dispositivi Windows e ChromeOS gli utenti possono selezionare percentuali di ridimensionamento personalizzate come 125%, 150% o 175%. Quando un utente seleziona uno scaling del 150%, il valore window.devicePixelRatio del browser diventa 1.5.

Lo zoom avanti nel browser modifica il valore del DPR?

Sì! Quando premi Ctrl + o Cmd + per ingrandire una pagina web, i browser moderni non stirano i contenuti come una lente di ingrandimento. Aumentano invece window.devicePixelRatio, ricalcolando il layout e inducendo gli attributi srcset a richiedere varianti grafiche più definite.

---

Conclusioni e punti chiave

1. Esistono due tipologie di pixel: I pixel fisici sono i microscopici diodi luminosi del monitor; i pixel CSS sono le unità logiche usate dai browser per comporre il layout.
2. Il DPR è il fattore di conversione: Il DPR indica quanti punti fisici servono per tracciare un singolo pixel CSS.
3. La causa della sfocatura: Se un’immagine fornisce solo 1 pixel per un’area coperta da 4 o 9 diodi hardware, il browser deve allungarla, generando sfocatura.
4. Preferisci sempre SVG: Qualsiasi icona, forma o logo che possa essere vettoriale deve essere gestita in formato SVG.
5. Punta al 2x per le immagini raster: Per la fotografia, distribuire asset a 2x tramite srcset assicura la massima nitidezza Retina senza appesantire la pagina.

Vuoi scoprire i valori esatti rilevati dal tuo dispositivo in questo momento? Torna allo strumento sulla nostra homepage di WhatIsMyScreenResolutions.com per analizzare all’istante viewport, risoluzione dello schermo e Device Pixel Ratio in tempo reale.