Come salvare immagini in bassa risoluzione da usare sui siti web

Le immagini all’interno di un sito web hanno sicuramente un ruolo fondamentale per catturare l’attenzione del pubblico, pertanto è importante curare oltre all’aspetto creativo anche quello un pò più tecnico in merito alla risoluzione in modo da assicurare un rapido caricamento delle pagine.

La risoluzione e i dpi

Che cos’è la risoluzione? Cosa sono i dpi?

La risoluzione dell’immagine è il grado di nitidezza della stessa e la sua qualità dipende dalla densità dei pixel che la compongono, mentre di dpi acronimo di dots per inch, sta ad indicare la quantità di punti di inchiostro che una stampante può depositare entro un pollice.

Quindi, più alto è il numero di DPI, più alta sarà la qualità dell’immagine. Questo almeno in teoria. Nella pratica se noi proviamo ad ingrandire un’immagine piccola il suo risultato sarà comunque sgranato.

Di seguito alcune prove con dpi diversi sulla stessa immagine.

Come potete vedere, l’immagine (originale) ha determinate dimensioni in pixel e quindi uno specifico peso in MB che corrisponde in questo caso a 72,6 MB.

Immagine a 72 DPI

Aumentando i DPI alla stessa immagine, raddoppiano il numero di pixel e conseguentemente il suo peso che passa da 72,6 MB a 315,2 MB.

Immagine 150 DPI

Andando invece a mettere 300 DPI , il suo peso diventa addirittura di 1,23 GB.

Immagine a 300 DPI

Stessa prova con immagine più piccola

Immagine piccola 72 dpi
Immagine piccola 150 dpi
Immagine piccola 300 dpi

Ho fatto la stessa cosa con un’immagine più piccola e come avete visto aumendo i dpi aumentano le dimensioni e il peso ma la qualità è decisamente più bassa.

Per concludere quindi le immagini ad alta risoluzione sono da usare nella stampa tradizionale, mentre le immagini a risoluzioni più basse sono da usare sui siti web.

Personalmente credo che un’immagine su un sito debba variare le sue dimensioni e il suo peso in funzione del suo utilizzo nelle pagine web.

Ad esempio le immagini di presentazione del sito in home page di un ipotetico slider a scorrimento dovranno avere le dimensioni di 1900 x 1200 px (sempre 72 dpi), mentre per i box interni bastano anche immagini 800 x 600.