Perché la tua immagine appare sfocata dopo averla caricata online

Le cinque cause a colpo d’occhio

Una foto nitida di solito appare sfocata dopo il caricamento per una di cinque ragioni. Trova il tuo sintomo, poi leggi la sezione corrispondente più sotto.

Causa 1: ricompressione della piattaforma

La maggior parte delle piattaforme web — social media, costruttori di siti, sistemi CMS, piattaforme e-commerce — comprime le immagini dopo il caricamento per ridurre i costi di archiviazione e migliorare i tempi di caricamento. La compressione applicata è spesso aggressiva e ottimizzata per una riduzione media della dimensione file, non per la tua immagine specifica.

Il risultato è una versione della tua foto che è passata per due passaggi di compressione: uno quando l’hai esportata dalla fotocamera o dall’editor, e di nuovo quando la piattaforma l’ha ricompressa. Ogni passaggio con perdita introduce nuovi artefatti sopra quelli esistenti. I gradienti morbidi sviluppano banding. I bordi nitidi si ammorbidiscono. Il dettaglio fine sparisce. Strategie di mitigazione:

• Carica a una qualità più alta di quanto pensi serva. Le piattaforme che ricomprimono lavorano con la tua versione caricata. Se carichi a qualità JPEG 95, la ricompressione della piattaforma parte da una base più pulita che a qualità 70.
• Carica alle dimensioni di visualizzazione esatte se le conosci. Una piattaforma che riceve un’immagine già alla dimensione target può saltare o ridurre il ridimensionamento, evitando uno dei passaggi di degrado.
• Controlla la documentazione della piattaforma per le specifiche di caricamento consigliate. Molte piattaforme pubblicano le dimensioni e il formato che consigliano per la migliore qualità.

Causa 2: caricare un’immagine più piccola della dimensione di visualizzazione

Se carichi un’immagine larga 600 pixel e viene mostrata a 1200 pixel di larghezza, il browser deve ingrandirla per farla entrare nel contenitore. Ingrandire un’immagine oltre le sue dimensioni originali — l’upscaling — rivela la griglia di pixel sottostante. L’immagine appare molle, sfocata o sgranata a seconda dell’algoritmo di scalatura. La soluzione è usare un’immagine sorgente almeno grande quanto la dimensione di visualizzazione, e preferibilmente 2× più grande per gli schermi ad alta densità (retina). Una larghezza di visualizzazione di 800 pixel CSS su uno schermo retina richiede un’immagine di 1600 pixel per apparire nitida. Questo accade quando:

• Riduci una foto troppo aggressivamente prima del caricamento, andando più piccola della dimensione di visualizzazione
• Usi una foto scattata su un vecchio dispositivo con una fotocamera a bassa risoluzione
• Fai uno screenshot su un display non retina e lo mostri in un contesto retina
• Carichi una versione di dimensione miniatura di un’immagine in uno spazio che la mostra grande

Causa 3: mancata corrispondenza del display retina / ad alta densità

I display retina e ad alta densità (chiamati anche HiDPI o display 2×) usano due pixel fisici per mostrare ogni pixel CSS. Un’area standard di 100×100 pixel CSS usa una griglia di 200×200 pixel fisici su questi schermi. Se fornisci un’immagine di soli 100×100 pixel per uno spazio che ne richiede 200×200, appare sfocata sui dispositivi retina mentre sembra a posto sui display standard.

La maggior parte dei laptop moderni, iPhone, iPad, telefoni Android di fascia alta e molti monitor desktop sono display ad alta densità. Se il tuo pubblico usa dispositivi moderni e le tue immagini appaiono nitide sul tuo monitor ma sfocate quando altri le vedono, una mancata corrispondenza retina è la causa probabile.

La soluzione: fornisci immagini a 2× le dimensioni di visualizzazione CSS. Per uno spazio CSS largo 400 pixel, carica un’immagine larga 800 pixel.

Causa 4: formato sbagliato che causa artefatti visivi che sembrano sfocatura

Una forte compressione JPEG può produrre artefatti che appaiono come sfocatura più che come sgranatura — in particolare in zone di gradiente morbido come cielo, pelle e sfondi fuori fuoco. Ciò che sembra un’immagine sfocata può in realtà essere un JPEG molto compresso dove il dettaglio fine è stato quantizzato e rimosso.

Il test: ingrandisci un bordo nitido nell’immagine (un carattere di testo, un contorno ad alto contrasto). Se il bordo appare molle e circondato da rumore di colore, il problema sono gli artefatti di compressione JPEG. Se il bordo è nitido ma all’immagine complessiva manca dettaglio, il problema è risoluzione insufficiente.

Correggi gli artefatti JPEG caricando con un’impostazione di qualità più alta o convertendo in WebP, che gestisce i gradienti in modo più pulito a dimensioni file equivalenti.

Causa 5: la confusione del DPI

Gli editor di immagini spesso mostrano un valore «DPI» o «PPI» nelle impostazioni del file. Alcune persone riducono questo valore pensando che ridurrà la dimensione file o cambierà come appare l’immagine sullo schermo. Non fa nessuna delle due cose. Il DPI (punti per pollice) ha senso solo per la stampa — dice a una stampante con quale densità depositare l’inchiostro. Gli schermi usano pixel, non punti per pollice, e il valore DPI in un JPEG o PNG è ignorato da tutti i browser.

Ridurre un’immagine da 300 DPI a 72 DPI in un editor di immagini non la rende più piccola né più sfocata sullo schermo — a meno che l’editor non abbia anche ricampionato (ridimensionato) le dimensioni in pixel nello stesso momento. Controlla se le dimensioni in pixel sono cambiate. Se non lo sono, il cambio di DPI non ha avuto effetto sulla versione web.

Lista di controllo per la prevenzione

• Carica le immagini a 2× la larghezza di visualizzazione CSS per la nitidezza retina
• Carica a qualità JPEG 85+ o qualità WebP 82+ prima della ricompressione della piattaforma
• Controlla le dimensioni immagine consigliate dalla piattaforma prima di caricare
• Non ingrandire mai un’immagine piccola per riempire uno spazio grande — parti da una sorgente ad alta risoluzione
• Usa WebP o AVIF invece di JPEG dove la piattaforma lo permette — gestiscono la compressione di qualità con più eleganza