Perché le immagini del mio sito appaiono sfocate?

Individua il passaggio in cui perdi nitidezza

L’immagine viene fotografata o creata, esportata, caricata, elaborata e visualizzata. Cerca il primo passaggio in cui spariscono i dettagli, cambiando una cosa alla volta.

Apri l’originale al 100%, poi il file caricato e infine quello richiesto dalla pagina pubblicata. Confronta lo stesso occhio, etichetta o testo. Le miniature possono nascondere differenze; uno zoom estremo mostra pixel anche nelle foto buone. Se l’originale è mosso o fuori fuoco, serve una foto migliore o un nuovo scatto. Se è solo l’esportazione a essere scadente, correggila prima del sito.

Scegli il controllo in base al problema

Controlla il file che la pagina carica davvero

Il sistema di gestione può conservare l’originale grande ma mostrare una miniatura o una versione intermedia. Apri la richiesta dell’immagine nel pannello Rete degli strumenti del browser. Controlla pixel e spazio occupato sulla pagina, non soltanto le dimensioni del caricamento originale.

Una miniatura di 300 pixel in una colonna di 900 viene ingrandita. L’originale completo potrebbe essere eccessivo: scegli una versione intermedia nel blocco o nel modello anziché ricomprimere la miniatura. Con più fonti, il file scelto può cambiare con la finestra. Prova telefono e computer; consulta la guida alle immagini responsive e la documentazione MDN su fonti e densità di pixel.

Usa abbastanza pixel per lo spazio previsto

Per una foto visualizzata a 600 pixel CSS di larghezza, confronta copie da 600 e 1200 pixel, anche su un telefono ad alta densità. Valuta dettagli e peso. Sono esempi da provare, non una regola universale.

Crea una copia con il ridimensionatore da un originale abbastanza grande e blocca le proporzioni. Ingrandire da 300 a 1200 pixel non ricrea dettagli fotografici. Vedi le dimensioni delle immagini per i siti. Anche un ritaglio stretto intorno a un piccolo volto riduce i pixel disponibili: controlla le dimensioni dopo il ritaglio.

Controlla separatamente compressione e testo piccolo

Sfumature a blocchi, trame impastate e disturbi attorno alle lettere possono indicare troppa compressione con perdita. Riparti dalla fonte migliore, con le stesse dimensioni e meno compressione. Salvare un JPG danneggiato come PNG conserva i difetti.

Leggi i caratteri più piccoli di schermate e diagrammi alla dimensione prevista. Confronta PNG con il file attuale usando la guida JPG e PNG. Il testo troppo piccolo può richiedere un nuovo impaginato. Conserva prove separate dall’originale, indicando dimensioni e formato nei nomi, invece di convertire ripetutamente copie con perdita.

Qui, 100% significa la dimensione reale in pixel in un visualizzatore: un pixel dell’immagine corrisponde a un pixel dello schermo. Lo zoom della pagina nel browser è un’altra impostazione.

Esempio: un caricamento nitido diventa sfocato nell’articolo

La foto da 2400 × 1600 è nitida localmente, ma sfocata in un blocco da 600 pixel. La pagina carica una miniatura da 300 × 200. È un esempio di diagnosi, non una misurazione di un sito specifico.

1. Conserva l’originale e verifica che la pagina usi la miniatura.
2. Seleziona una versione più grande nel blocco o nel modello.
3. Confronta 600 × 400 e 1200 × 800 alla stessa larghezza visualizzata.
4. Controlla telefono, computer e peso dei file realmente caricati.
5. Mantieni la copia più piccola che mostra i dettagli necessari.

La soluzione è scegliere la versione corretta: comprimere la miniatura non aggiunge dettagli. Se appare ancora quella vecchia, controlla l’URL richiesto e aggiorna la cache pertinente prima di esportare nuovamente.

Domande frequenti

Cambiare DPI rende più nitida l’immagine?

L’etichetta di risoluzione non aggiunge pixel. Controlla dimensioni, visualizzazione e versione caricata. Vedi DPI, PPI e pixel.

WebP risolve la sfocatura?

Cambiare formato non restituisce i dettagli persi. Parti da un originale nitido e confronta qualità e peso.

Perché nella libreria multimediale è nitida?

Libreria e pagina possono mostrare versioni diverse a dimensioni diverse. Confronta il file pubblicato con l’anteprima.