Quale risoluzione scegliere per un’immagine?

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.

Partire dalla dimensione di visualizzazione

Non chiederti “come conservo tutti i 4032 pixel della fotocamera?”, ma “qual è la larghezza massima reale nel layout?”.

Se l’immagine viene mostrata al massimo a 800 CSS px, una variante da circa 1600 px può essere adatta a molti schermi 2x. Puoi crearla con il ridimensionatore di immagini.

Preservare il rapporto d’aspetto

Un’immagine 1600×900 è 16:9. Ridotta a 800 px di larghezza, l’altezza corretta è:

900 × 800 / 1600 = 450

quindi 800×450. Portarla a 800×600 senza ritaglio la deformerebbe.

Ridimensionare e ritagliare

Ridimensionare cambia il numero di pixel mantenendo il quadro. Ritagliare elimina una parte del contenuto e può cambiare il rapporto d’aspetto. Una miniatura quadrata e un banner panoramico possono quindi richiedere ritagli differenti della stessa sorgente.

Perché ingrandire non ricrea dettagli

Portare una sorgente 400 px a 1600 px richiede interpolazione. Gli algoritmi possono produrre un risultato piacevole, ma non recuperano informazioni che non erano presenti. Metodi AI possono generare dettagli plausibili, che non equivalgono necessariamente ai dettagli originali.

Ridurre è generalmente più sicuro

Ridurre condensa molti pixel sorgente in meno pixel finali. Si perde informazione, ma se quei dettagli sarebbero invisibili alla dimensione prevista, la perdita è coerente con l’ottimizzazione Web.

Risoluzione e peso

Più pixel offrono più dati potenziali, ma due file delle stesse dimensioni possono avere pesi molto diversi in funzione di contenuto, formato e compressione.

Per questo risoluzione, compressione e formato vanno decisi insieme.

Per siti responsive, usa più varianti e lascia al browser scegliere tramite srcset e sizes invece di inviare lo stesso file enorme a tutti.