DPI vs PPI vs densità dei pixel: una guida pratica per i designer

Tre numeri, tre significati:

• DPI (dots per inch) — quanti punti d’inchiostro una stampante posiziona per pollice lineare. Una proprietà hardware della stampante.
• PPI (pixels per inch) — quanti pixel dell’immagine vengono stampati o visualizzati per pollice lineare alla dimensione target. Una proprietà del modo in cui l’immagine viene renderizzata.
• Densità dei pixel — i pixel del dispositivo per pixel CSS su un display. Una proprietà dello schermo (Retina, 4K, ecc.).

Quasi tutti gli strumenti di design etichettano il campo “risoluzione” come DPI quando in realtà intendono PPI. L’uso errato è talmente radicato che la regola generale è: quando un designer dice DPI, assumere che intenda PPI a meno che non stia letteralmente parlando dell’output nominale di una stampante fisica.

Cosa dice realmente ogni numero

DPI (stampante o scanner)

Le stampanti inkjet moderne funzionano a 1200-4800 DPI. Le stampanti laser a 600-2400 DPI. Entrambi i numeri descrivono quanto finemente l’hardware può posizionare i punti d’inchiostro, non quanti dettagli dell’immagine una pagina può contenere. La risoluzione effettiva dell’immagine (PPI) si aggira intorno ai 300-400 anche sulle migliori inkjet.

PPI (il numero immagine-incontra-dimensione-target)

PPI descrive un’immagine solo quando si specifica una dimensione fisica target. Un’immagine di 3000×2000 pixel stampata a 10×6,67 pollici è a 300 PPI. Stampata a 5×3,33 pollici è a 600 PPI. Stesso file, tre diversi valori PPI.

• 72-96 PPI — visualizzazione web. I browser ignorano il PPI incorporato; conta solo il numero di pixel.
• 150 PPI — stampa su giornale, poster in grande formato visto da lontano.
• 300 PPI — libro, rivista, foto stampata vista a distanza di un braccio.
• 600+ PPI — grafica vettoriale, disegni tecnici, tipografia fine.

Densità dei pixel (il numero Retina)

Sugli schermi moderni, “1 pixel” in CSS non è un pixel dello schermo. iPhone, MacBook Pro e la maggior parte dei telefoni Android moderni usano un devicePixelRatio di 2 o 3 — il che significa che un pixel CSS corrisponde a 2× o 3× i pixel fisici. Ecco perché un designer che lavora in Figma a 1× produce immagini che sembrano sfocate su un telefono, a meno che non esportino a 2× o 3× di risoluzione.

Numeri pratici per i deliverable comuni

Dove la confusione morde

1. Il problema dell’esportazione a “72 DPI”

Un designer crea in Figma/Sketch a “72 DPI” (che è privo di significato sullo schermo ma è ciò che mostra lo strumento), esporta un PDF e lo invia alla tipografia. Correzione: riesportare a 300 PPI e assicurarsi che il conteggio dei pixel sia sufficiente per supportare quella densità.

2. Esportazioni Retina a @1×

Un designer che lavora in Figma a 1× esporta un’icona esattamente alle dimensioni CSS (es. 24×24 px). Su un dispositivo a 3× l’icona appare sfocata. Correzione: esportare @1× più @2× e @3×, poi usare HTML srcset o image-set in CSS.

3. Confondere il PPI sorgente con il PPI target

Un fotografo scatta un’immagine raw da 6000×4000. La fotocamera incorpora metadati a 300 PPI. Il fotografo la inserisce in un layout web da 600×400. L’immagine ha 10× più dati di pixel di quanti il layout necessiti. Correzione: ridimensionare alle dimensioni pixel target (o 2× per Retina) usando un vero algoritmo di downsampling — il nostro strumento di ridimensionamento immagini gestisce questo.

Riferimento rapido: quando conta ogni numero

• Lavoro web: contano solo il numero di pixel + DPR. Ignorare i metadati PPI incorporati.
• Lavoro di stampa: il PPI conta assolutamente. Abbinarlo alla distanza di visualizzazione della stampa (300 PPI per tenuto in mano, 150 PPI per appeso al muro).
• Design UI: progettare a dimensioni CSS 1×, esportare a 2× e 3×.

Per il confronto approfondito, vedere il nostro confronto DPI vs PPI. Per il lato della conversione del colore nel design, la pagina della metodologia del colore copre RGB vs CMYK e i profili ICC.