Quando si parla di risoluzione web si intende, in pratica, il numero di pixel con cui un'immagine viene pubblicata su una pagina e il dettaglio che il visitatore percepisce sul proprio schermo. Il tema sembra tecnico, ma per un titolare di piccola impresa, uno studio professionale o un artigiano ha conseguenze concrete: foto morbide sul telefono, pagine che si caricano lentamente, immagini così pesanti da scoraggiare chi cerca un servizio. Capire le basi aiuta a valutare meglio il lavoro di chi realizza o rifà il sito e a porre domande precise prima di approvare una grafica. Questo articolo spiega i concetti essenziali, i limiti delle regole più diffuse e gli errori da riconoscere prima della pubblicazione.
Che cosa significa risoluzione web
La risoluzione grafica quantifica il grado di dettaglio di un'immagine o di un flusso di immagini. Applicata al web, il concetto si concentra su due elementi: quanti pixel compongono il file e quante dimensioni il browser usa per mostrarlo.
Un'immagine larga 1200 pixel, visualizzata a 1200 pixel, può risultare nitida. La stessa immagine allargata a due o tre volte la sua larghezza appare morbida, perché il browser deve ricostruire dettagli che nel file non ci sono. Il problema nasce quindi raramente dalla fotografia in sé e più spesso dal rapporto tra il file e lo spazio assegnato nella pagina.
Un secondo equivoco riguarda i centimetri. Sullo schermo non esistono misure fisse: il layout ragiona in unità logiche, che ogni dispositivo converte in modo diverso a seconda della densità dei pixel. Per questo ragionare in pixel è più utile che ragionare in dimensioni di stampa.
Pixel e spazio disponibile
Il primo passo è misurare lo spazio reale che l'immagine occuperà: larghezza della colonna, posizione nella pagina, comportamento su mobile. Una foto di copertina e la miniatura di una galleria hanno esigenze diverse, anche se provengono dallo stesso servizio fotografico. Definire lo spazio prima di esportare il file evita di caricare pixel in più che il visitatore non noterebbe.
Perché il dpi conta meno di quanto si pensa
Nelle guide generiche si legge spesso che esiste un valore di dpi corretto per il web. In realtà il dpi descrive la densità con cui un'immagine verrebbe stampata, cioè quanti punti per pollice si depositano su carta. Pixartprinting lo chiarisce bene: la risoluzione indica il numero di pixel presenti in un'immagine, generalmente espressa in PPI, pixel per pollice, come riportato nel suo approfondimento sulla risoluzione di un'immagine.
Il valore memorizzato nei metadati non cambia da solo il numero di pixel che il browser riceve. Due file con le stesse dimensioni in pixel, uno marcato a 72 e l'altro a 300, si mostrano di norma allo stesso modo su una pagina web. Ciò che cambia davvero è il peso del file.
Il discorso è diverso per la stampa: se un cliente chiede un file destinato a un tipografo, conviene concordare formato e risoluzione con chi stampa, invece di usare un valore ereditato da una vecchia guida.
Il peso delle immagini incide anche sulle prestazioni. Nelle pagine di servizi, la fotografia principale è spesso uno degli elementi più grandi visibili al primo caricamento, quindi può influire sulle metriche legate alla velocità percepita, come i Core Web Vitals. L'effetto reale dipende però da hosting, tema, numero di immagini e connessione dei visitatori.
Quali dimensioni scegliere per il sito
Non esiste una misura universale valida per ogni sito. L'approccio descritto da Creativenova nella guida sulle dimensioni delle immagini nei siti web segue una logica pratica: scegliere una risoluzione bassa quando quella alta non serve e limitare le dimensioni massime a valori coerenti con la posizione dell'immagine nel layout.
Un metodo operativo in tre passi:
- misurare la larghezza massima che l'immagine occupa nel layout desktop;
- verificare la stessa posizione su telefono, dove spesso viene mostrata molto più piccola;
- esportare una versione principale e, se tema o CMS lo consentono, varianti più leggere per i dispositivi piccoli.
Copertine e banner
Le immagini di copertina sono le più sensibili al taglio. Un'immagine orizzontale sul desktop può diventare quasi verticale su telefono, e il soggetto rischia di uscire dall'inquadratura. Conviene scegliere un soggetto centrale e lasciare margini laterali sufficienti. Anche qui il peso va controllato: una fotografia molto grande usata come sfondo può ritardare il primo rendering della pagina più di quanto si immagini.
Compressione e formati
Per le fotografie il formato JPEG resta molto diffuso; per la grafica con trasparenza si ricorre spesso al PNG. Formati più recenti come WebP sono supportati da molti browser attuali, ma il risultato dipende da browser, server e configurazione del tema.
La compressione è un compromesso. Più è forte, più il file pesa meno, ma crescono gli artefatti attorno a testi, bordi e dettagli fini. Una compressione moderata mantiene spesso una qualità accettabile; la soglia giusta va verificata sul soggetto specifico, non su una regola fissa.
Lo stesso soggetto in due misure: la scelta dipende dallo spazio che occupa nella pagina.
Schermi ad alta densità e nitidezza
Molti telefoni e tablet hanno schermi con più pixel fisici per ogni pixel logico usato dal layout. Un'immagine esportata solo alla dimensione logica può apparire leggermente morbida su questi dispositivi. Una soluzione tipica è fornire una versione più grande, o più versioni tra cui il browser sceglie, ma il costo è il peso da scaricare: più pixel significa più dati.
Il compromesso va deciso caso per caso. Per un sito di servizi con poche immagini decorative può bastare una versione ben esportata. Per una galleria di lavori o un catalogo, le varianti responsive diventano più utili. In ogni caso la verifica va fatta su un dispositivo reale o su un emulatore, non solo sul proprio monitor.
Errori comuni e come riconoscerli
Alcuni errori ricorrono spesso nei siti di piccole imprese e professionisti:
- caricare foto da fotocamera molto pesanti e lasciare che il tema le riduca solo via CSS, così il visitatore scarica comunque il file completo;
- ingrandire un'immagine piccola fino a riempire una sezione intera, con risultati sfocati;
- comprimere troppo un logo o un'immagine con testo, che diventa poco leggibile;
- usare nomi file come IMG_4471 senza testo alternativo descrittivo, perdendo contesto per chi usa lettori di schermo e per i motori di ricerca.
Per riconoscerli senza strumenti complessi basta aprire il sito su un telefono, ingrandire la pagina e osservare i bordi delle immagini e le parti con testo. Se una foto appare morbida già alla dimensione normale, il problema è spesso nel file o nel modo in cui viene mostrato. Se la pagina impiega molto a stabilizzarsi, il peso delle immagini è un sospetto da verificare insieme a script e font.
Una superficie sfocata e una nitida: i difetti si notano spesso ai bordi e nei dettagli fini.
Quando serve un professionista
Gestire le immagini è possibile anche senza un tecnico, soprattutto con un CMS che offre strumenti di ridimensionamento. La questione diventa più delicata quando il sito ha molte pagine di servizi, una galleria di lavori, un tema personalizzato o obiettivi precisi di velocità. In questi casi conviene chiedere al fornitore come vengono esportate le immagini, se vengono generate varianti per dispositivi diversi, chi si occupa della compressione e come viene testata la pagina su mobile.
Per confrontare i fornitori, la guida Siti Web per Professionisti: come scegliere nel 2026 mette a fuoco i criteri principali. Chi deve ancora scegliere lo strumento può leggere Programmi per creare siti internet: guida alla scelta, utile per capire quali funzioni cercare prima di approvare una grafica. Anche l'articolo sui criteri di scelta per la realizzazione di siti internet a Ivrea offre spunti generali sul confronto tra realizzatori.
Checklist prima di pubblicare
Prima di approvare le immagini di una pagina, controlla questi punti:
- larghezza reale dell'immagine nel layout desktop e mobile;
- formato adatto al tipo di grafica;
- peso del file, letto dalle proprietà del file o da uno strumento di verifica;
- taglio del soggetto sulla versione per telefono;
- testo alternativo descrittivo e nome file leggibile;
- nitidezza su uno schermo ad alta densità, quando disponibile.
Se qualcuno ti propone un'unica risoluzione valida per ogni sito, è il momento giusto per chiedere spiegazioni concrete su pixel, peso e layout. La risoluzione web è una questione di scelte misurate, non di formule valide per tutti.
FAQ
Qual è la risoluzione web corretta per le immagini del sito?
Non esiste un valore unico valido per ogni sito. Di norma conviene partire dallo spazio massimo che l'immagine occupa nel layout, esportare il file a una dimensione appropriata e verificare il risultato su telefono. Il valore dpi nei metadati incide poco sulla visualizzazione a schermo.
Il dpi delle immagini influisce sulla velocità del sito?
Il dpi di per sé non è il fattore principale. Incidono soprattutto il numero di pixel e la compressione, che determinano il peso del file. Immagini troppo grandi possono rallentare la pagina, ma l'effetto dipende da hosting, tema e connessione dei visitatori.
Quando conviene chiedere aiuto a un professionista per le immagini del sito?
Conviene farlo quando il sito ha molte pagine di servizi, una galleria di lavori, un tema personalizzato o obiettivi precisi di velocità. Chiedere come vengono esportate le immagini, se vengono generate varianti per mobile e come viene testata la pagina aiuta a valutare il lavoro proposto.
Vuoi verificare le immagini del tuo sito?
Se hai dubbi su dimensioni, peso e nitidezza delle immagini di un sito esistente o di un progetto nuovo, puoi raccontarmi il contesto. Lavoro da Lugo con attività in Emilia-Romagna e da remoto in tutta Italia, e ti rispondo con un'analisi concreta del tuo caso. Scrivimi tramite il modulo contatti Partiamo dalle pagine che contano di più per il tuo lavoro.
Scritto e pubblicato con Blogotter.