Scegliere la “giusta risoluzione” per il Web diventa confuso quando si incontrano pixel, PPI, DPI, Retina, 2x, dimensioni intrinseche e pixel CSS. La domanda più utile è però concreta: quanti pixel servono davvero affinché l’immagine sia nitida alla dimensione in cui verrà mostrata?
Guardare prima le dimensioni in pixel
Una raster può misurare 800×600, 1920×1080 o 4032×3024 px. Queste dimensioni indicano quanti campioni contiene e sono il primo dato da valutare per il Web.
Una foto da smartphone può superare 4000 px di larghezza anche se il sito la mostra a 800 o 1200 px. Conservare sempre l’originale come risorsa Web può quindi trasferire molti più dati del necessario.
Definizione, densità e dimensione fisica
La definizione è il numero di pixel dell’immagine. La densità esprime pixel per unità fisica, ad esempio PPI. DPI è usato soprattutto nel contesto di stampa.
Sul Web, la dimensione visualizzata è principalmente definita dal CSS. Questi concetti sono collegati in certi contesti, ma non intercambiabili.
Perché 72 DPI non è una regola Web
Due file identici da 1200×800 px, uno marcato 72 DPI e l’altro 300 DPI, hanno lo stesso numero di pixel. Se entrambi vengono mostrati a width:600px, il browser dispone della stessa informazione sorgente.
Cambiare soltanto la metadato DPI non aggiunge dettagli. DPI diventa utile soprattutto quando bisogna collegare pixel e dimensione fisica di stampa.
Pixel immagine e pixel CSS
width:600px indica 600 pixel CSS, non necessariamente 600 pixel fisici. Su uno schermo ad alta densità, più pixel fisici possono rappresentare lo stesso pixel CSS.
Il devicePixelRatio esprime approssimativamente questo rapporto. Con DPR 2, una zona 600×400 CSS può usare circa 1200×800 pixel fisici.
Regola pratica
larghezza sorgente utile ≈ larghezza CSS massima × densità target
Per 700 CSS px:
- 1x → circa 700 px;
- 2x → circa 1400 px;
- 3x → circa 2100 px.
Una variante intorno a 2x è spesso un buon compromesso, ma non una regola universale.
Perché non inviare sempre 3x
Raddoppiare larghezza e altezza quadruplica il numero di pixel. 1000×600 contiene 600.000 pixel; 2000×1200 ne contiene 2,4 milioni; 3000×1800 arriva a 5,4 milioni.
Più pixel significano generalmente più dati da scaricare e decodificare. Inviare sempre 3x può rallentare la pagina senza beneficio visibile.