DPI delle immagini spiegato: 72 o 300 DPI contano online?

Risposta rapida: il DPI non è l’interruttore di qualità web

Per un’immagine di sito web normale, 72 DPI vs 300 DPI non decide quanto appare nitida online. Il browser lavora soprattutto con:

• le dimensioni reali in pixel dell’immagine, ad esempio 1200 × 800;
• la dimensione CSS nella pagina, ad esempio 600 px di larghezza;
• le regole delle immagini responsive come srcset e sizes;
• il rapporto di pixel del dispositivo sullo schermo;
• la compressione e il formato usati per il file esportato.

Un JPG 1200 × 800 etichettato a 72 DPI e lo stesso JPG 1200 × 800 etichettato a 300 DPI vengono renderizzati allo stesso modo su una pagina web. Contengono gli stessi pixel. Il valore DPI è in sostanza un’istruzione di stampa.

Il DPI inizia a contare quando l’immagine deve diventare una dimensione fisica. Una foto tessera 2 × 2 pollici a 300 DPI richiede 600 × 600 pixel. Una stampa 4 × 6 pollici a 300 DPI richiede 1200 × 1800 pixel. È lì che il numero DPI diventa utile: collega i pixel a pollici o millimetri.

Quindi quando qualcuno chiede «300 DPI», la migliore domanda di rimando è:

È per la stampa oppure ti serve davvero un’immagine con più pixel per il web?

DPI, PPI, pixel e pixel CSS

DPI viene usato per parecchie cose diverse: è per questo che i consigli in giro sono un caos.

Per i file immagine digitali il termine più preciso è PPI. Un file non contiene punti d’inchiostro: contiene pixel. Ma si cerca «DPI», i laboratori chiedono «DPI» e i clienti dicono DPI quando intendono PPI, perciò questa guida li usa entrambi con cautela.

La formula pratica è semplice:

pixel = pollici di stampa × PPI
pollici di stampa = pixel / PPI

Se una foto è larga 3000 pixel, può essere stampata larga 10 pollici a 300 PPI, 20 pollici a 150 PPI oppure 41,7 pollici a 72 PPI. Il file non migliora né peggiora: cambi soltanto la densità con cui quei pixel finiscono sulla carta.

Cosa fa davvero il valore DPI dentro un’immagine

Molti formati immagine possono memorizzare un valore di risoluzione o densità. Nei programmi di tutti i giorni lo vedi come:

• 72 DPI,
• 96 DPI,
• 240 PPI,
• 300 PPI,
• un campo «Risoluzione» in Photoshop,
• metadati di densità orizzontale e verticale in un JPG o PNG.

Questo valore è un metadato. Suggerisce a quale dimensione l’immagine dovrebbe essere stampata o inserita in un layout che rispetti quella densità. Non aggiunge dettaglio.

Immagina una foto 3000 × 2000:

Stessi pixel. Dimensione di stampa suggerita diversa.

Qui si inceppa tanta gente. Se cambi soltanto il campo DPI, non hai ridimensionato l’immagine per il web, non l’hai compressa e non l’hai resa più nitida — hai cambiato l’etichetta di stampa.

Cosa usano invece i browser

Per il lavoro comune su una pagina web, i browser si basano sui dati pixel del file e sulle istruzioni di layout della pagina.

Se l’HTML o il CSS dicono che un’immagine deve essere mostrata a 600 pixel CSS di larghezza, il browser la impagina a 600 pixel CSS di larghezza. Se fornisci una sorgente da 1200 pixel di larghezza per quello spazio, hai pixel a sufficienza per uno schermo ad alta densità 2x. Se ne fornisci una da 400 pixel, l’immagine rischia di apparire molle perché il browser deve ingrandirla.

Per questo il lavoro sulle immagini web di solito suona così:

• Immagine hero: esportala vicino alla larghezza massima prevista, spesso con varianti responsive.
• Immagine da blog: prevedi una versione da 1200-1600 px di larghezza, salvo che il design chieda di più.
• Miniatura: esportala vicino alla dimensione della card mostrata.
• Icona Retina: fornisci pixel sorgente 2x o 3x rispetto alla dimensione CSS.
• Pagina lenta: ridimensiona e comprimi i pixel, non l’etichetta DPI.

La documentazione MDN su naturalWidth è utile qui perché descrive la larghezza dell’immagine in pixel CSS, non come «quello che dice l’etichetta DPI». La guida MDN sulle immagini responsive spiega anche come srcset e sizes aiutino il browser a scegliere una sorgente adatta a layout e dispositivo.

Una sottigliezza tecnica: CSS ha una proprietà sperimentale image-resolution, e W3C CSS Images parla dei metadati di risoluzione delle immagini. MDN oggi indica image-resolution come sperimentale e segnala che il supporto dei browser non è pronto per la produzione. Per la pubblicazione web normale non fare affidamento sul metadato DPI di un JPG o PNG per pilotare la dimensione visibile in pagina.

Perché il «72 DPI per il web» è diventato folklore

La regola «72 DPI per il web» è soprattutto un’abitudine ereditata.

Nei primi flussi di editoria da scrivania esisteva un legame più stretto tra pixel dello schermo, punti e pollici. Le vecchie convenzioni di schermo Macintosh sono spesso associate a 72 pixel per pollice. Windows e la storia di CSS hanno portato in scena il 96 DPI. W3C CSS Values definisce una relazione fissa in cui 1in equivale a 96px, e la documentazione MDN sulla risoluzione spiega che 1dppx corrisponde a 96dpi in termini CSS.

Non significa che tu debba esportare le immagini web a 96 DPI.

Significa che CSS ha un sistema di riferimento per le sue unità di layout. La tua immagine web ha comunque bisogno di abbastanza pixel per la dimensione a cui appare. Una foto da 5000 px di larghezza è troppo pesante per una miniatura da 300 px, sia che sia etichettata 72 DPI sia 300 DPI. Un logo da 400 px di larghezza può apparire molle in uno spazio da 600 px, qualunque cosa dica il campo DPI.

Per le immagini web la domanda giusta è:

Quanti pixel occuperà questa immagine nel layout e quanti pixel sorgente devo fornire per gli schermi a cui tengo?

La trappola del ricampionamento in Photoshop

Photoshop e strumenti simili mostrano larghezza, altezza e risoluzione nella stessa finestra. È comodo per la stampa, ma è una trappola per il web.

La documentazione di Photoshop sulla dimensione dell’immagine separa:

• Dimensioni: il numero di pixel.
• Larghezza e altezza: la dimensione fisica o di layout a seconda dell’unità.
• Risoluzione: pixel per pollice per la qualità di stampa.
• Ricampiona: aggiungere o rimuovere pixel.

L’interruttore chiave è Ricampiona.

Con Ricampiona disattivato, passare da 72 PPI a 300 PPI conserva gli stessi pixel e cambia solo la dimensione di stampa suggerita. Un file 3000 × 2000 resta 3000 × 2000. È lavoro a livello di metadati.

Con Ricampiona attivo, cambiare la risoluzione può aggiungere o rimuovere pixel a seconda dei campi di larghezza e altezza. Cambiano i dati dell’immagine: il file può ingrandirsi o rimpicciolirsi, diventare più nitido o più morbido, e possono comparire artefatti di interpolazione se ingrandisci troppo.

Per l’uso web, evita il comando vago «mettilo a 72 DPI». Nomina il vero obiettivo:

• «Ridimensionalo a 1600 px di larghezza.»
• «Esporta una miniatura da 320 px.»
• «Comprimi questo JPG sotto i 200 KB.»
• «Fai un’immagine 2x per uno spazio CSS da 600 px, quindi 1200 px di larghezza.»

Cambiare il DPI cambia la dimensione del file?

Di solito, no.

Se modifichi soltanto il metadato DPI/PPI, la dimensione del file può rimanere invariata o cambiare di pochi byte perché sono cambiati i metadati. I dati dell’immagine sono ancora la stessa griglia di pixel.

La dimensione cambia quando fai una di queste cose:

• Ridimensionare le dimensioni in pixel.
• Ritagliare una parte dell’immagine.
• Abbassare la qualità JPG/WebP/AVIF.
• Convertire in un altro formato.
• Rimuovere EXIF o altri metadati.
• Appiattire la trasparenza.
• Ridurre fotogrammi o durata di un’animazione.

Se un sito richiede un upload sotto i 500 KB, passare da 300 DPI a 72 DPI è la soluzione sbagliata. Ridimensiona l’immagine, comprimila, o entrambe le cose.

Quando 300 DPI conta davvero

300 DPI è un’utile abbreviazione per le stampe guardate da vicino. Vuol dire che il file di stampa porta 300 pixel per ciascun pollice di uscita finale.

Casi tipici a 300 DPI:

• foto per passaporto e visto,
• stampe da laboratorio 4 × 6 e 5 × 7 pollici,
• piccoli flyer e brochure,
• immagini di libri e riviste,
• etichette di prodotto viste da vicino,
• scansioni in cui contano testi piccoli o linee fini.

I conti:

Per la stampa la dimensione fisica non è opzionale. «300 DPI» da solo è incompleto. Un’immagine a 300 DPI per una foto tessera 2 × 2 pollici sono 600 × 600 pixel. Un’immagine a 300 DPI per una pagina A4 sono circa 2480 × 3508 pixel. Sono file radicalmente diversi.

Quando 300 DPI non conta

Puntare sui 300 DPI è di solito il focus sbagliato per:

• immagini di siti web,
• post sui social,
• allegati email,
• miniature di prodotto,
• screenshot per blog,
• icone di app e grafica d’interfaccia,
• moduli online che validano dimensioni in pixel e dimensione del file.

Alcuni portali di upload citano il DPI nelle istruzioni perché il risultato finale verrà stampato. Anche in quei casi, in pratica il portale controlla dimensioni in pixel, rapporto, dimensione del file, modalità colore o posizione del volto, non l’etichetta di metadati. Se il requisito dice «2 × 2 pollici a 300 DPI», convertilo in pixel: 600 × 600.

Per gli schermi usa requisiti in pixel. Per la stampa usa requisiti in pixel più la dimensione fisica.

Retina e HiDPI non sono «300 DPI»

Gli schermi ad alta densità hanno bisogno di più pixel sorgente rispetto a quelli vecchi, ma non è la stessa cosa che cambiare i metadati del file a 300 DPI.

Esempio:

• Il design mostra una foto di prodotto a 600 pixel CSS di larghezza.
• Uno schermo 1x si accontenta di una sorgente da 600 px di larghezza.
• Uno schermo 2x beneficia di una sorgente da 1200 px di larghezza.
• Uno schermo 3x può beneficiare di una sorgente da 1800 px di larghezza se il dettaglio conta.

L’immagine può ancora essere etichettata 72, 96 o 300 DPI e la logica del layout non cambia. Ciò che conta è il rapporto fra pixel sorgente e pixel CSS mostrati.

È per questo che le immagini responsive usano descrittori come 1200w o 2x, non «300dpi». Il browser cerca semplicemente un’immagine con abbastanza dati per la dimensione renderizzata, la densità dello schermo e le condizioni di rete.

Come tradurre le richieste più comuni

Le richieste di modifica del DPI spesso vogliono dire altro. Traduci la richiesta prima di toccare il file.

Quella domanda in più previene la maggior parte degli errori di DPI.

Come PhotoTools gestisce le attività legate al DPI

PhotoTools è costruito attorno alla cosa che davvero cambia l’output: i pixel.

Per il lavoro web:

1. Usa Ridimensiona per fissare le vere dimensioni in pixel.
2. Applica compressione se c’è un obiettivo di dimensione del file.
3. Lascia intatto l’originale.
4. Esporta una copia web con nome parlante, come hero-1600.jpg o card-600.webp.

Per la stampa di foto tessera o ID:

1. Apri il Generatore di foto tessera.
2. Scegli un preset come 2 × 2 pollici, 35 × 45 mm o una dimensione personalizzata.
3. Lo strumento converte la dimensione fisica della foto in pixel al DPI scelto.
4. Costruisce un foglio di stampa 4 × 6 o 6 × 4 pollici nel browser.
5. Stampa al 100 %, dimensione reale, con «adatta alla pagina» disattivato.
6. Misura la foto stampata prima della consegna.

L’implementazione locale usa la dimensione della foto scelta, la dimensione del foglio e il DPI per calcolare le dimensioni in pixel. Ad esempio, un foglio 4 × 6 pollici a 300 DPI diventa una tela da 1200 × 1800 pixel. Un’area foto 2 × 2 pollici a 300 DPI diventa 600 × 600 pixel.

Questo è un vero layout di stampa. Molto diverso dall’aprire una piccola immagine web, cambiare il campo metadati a 300 e sperare che la stampa venga nitida.

Checklist pratica

Usa questa checklist prima di modificare un file perché qualcuno ha nominato il DPI:

• Se la destinazione è un sito, chiedi dimensioni in pixel e limiti di dimensione.
• Se la destinazione è la stampa, chiedi dimensione fisica e DPI/PPI di riferimento.
• Se il file è troppo pesante, ridimensiona o comprimi invece di toccare i metadati.
• Se l’immagine appare sfocata, controlla pixel sorgente, compressione e dimensione di visualizzazione.
• Se la stampa esce morbida, calcola se la sorgente ha abbastanza pixel.
• Se la stampa esce con la dimensione fisica sbagliata, controlla la scala della stampante e il formato di carta.
• Se è una foto per passaporto o visto, misura la stampa finale e verifica il requisito ufficiale.

Versione breve: il DPI collega i pixel alla carta. Pixel e CSS governano il web.

Fonti tecniche verificate

Questa guida è stata rivista rispetto a:

• W3C CSS Values and Units Module Level 4, per le unità assolute CSS, le unità di risoluzione e la relazione 1dppx = 96dpi.
• W3C CSS Images Module Level 4, per il modo in cui CSS definisce la risoluzione dell’immagine e la proprietà image-resolution.
• MDN: image-resolution, per le note di implementazione attuali e lo stato sperimentale di image-resolution in CSS.
• MDN: HTMLImageElement naturalWidth, per il dimensionamento delle immagini del browser in pixel CSS.
• MDN: riferimento dell’elemento img, per srcset, sizes, i descrittori di larghezza e la scelta di sorgente del browser.
• Adobe Photoshop — dimensione e risoluzione dell’immagine, per la distinzione di Photoshop tra dimensioni, risoluzione e ricampionamento.
• Adobe Photoshop — ridimensionamento e ricampionamento, per il modo in cui il ricampionamento cambia i dati pixel e perché risoluzione e dimensione fisica sono concetti di stampa.

In sintesi: modificare l’etichetta DPI è quasi mai la vera soluzione. Decidi prima la destinazione, poi cambia i pixel, la compressione o il layout di stampa di cui quella destinazione ha davvero bisogno.