Le immagini aiutano molto la leggibilità e la presentazione di un contenuto sul web e per tale motivo riveste un ruolo fondamentale l’attività di ottimizzazione delle immagini che utilizziamo per un sito web, sia in ottica di user experience che di velocità di caricamento del contenuto su cui atterra un utente.
Vediamo insieme alcune buone pratiche per ottimizzare le immagini da utilizzare su un sito internet:
1. Formato
Solitamente le immagini utilizzate sul web hanno un’estensione di tipo PNG. Anche il formato JPEG è molto utilizzato ma a differenza del PNG non ci permette di conservare l’effetto trasparenza all’interno delle immagini. Se perciò vogliamo caricare un’immagine tradizionale senza particolari effetti, possiamo utilizzare il formato JPEG, se invece ci occorre caricare un’immagine con uno sfondo trasparente (ad esempio il logo del sito) dovremo utilizzare l’estensione PNG.
Molto diffuso è anche il formato GIF che permette di utilizzare immagini animate in modo molto semplice e basilare, portando così un tocco di freschezza ai nostri contenuti senza dover ricorrere ai video, molto pesanti da caricare su un sito web.
2. Dimensioni
La dimensione di un’immagine è un parametro relativo che può variare a seconda dello spazio in cui va inserita. Sicuramente dobbiamo tenere conto di come questa immagine verrà visualizzata sui dispositivi mobile, come smartphone e tablet. Allo stesso tempo però immagini molto grandi possono comportare un peso elevato che va a rallentare il caricamento del nostro sito: occorre trovare un buon compromesso tra dimensione e peso che rendano l’immagine leggera ma visibile in maniera chiara e definita.
3. Peso
Il peso delle immagini può variare a seconda dei parametri elencati sopra. Un’immagine molto grande ovviamente avrà un peso superiore, tuttavia per ottenere buoni risultati sul web non sempre occorrono immagini in alta definizione. Molto spesso infatti la maggior parte degli utenti che fruisce dei nostri contenuti lo fa tramite uno smartphone, che comprime la visualizzazione del contenuto in larghezza: per tale motivo anche immagini di modeste dimensioni, visualizzate su un dispositivo mobile sembrano in alta definizione.
La qualità dipende inoltre dallo schermo del supporto su cui le immagini vengono visualizzate ma questo parametro è ovviamente al di fuori del nostro controllo. Complessivamente possiamo tenere in considerazione che un’immagine utilizzata su un sito web dovrebbe pesare intorno ai 100 kb.
4. Risoluzione
La risoluzione è sicuramente l’indicatore più immediato della qualità di un’immagine. Per il web consideriamo sempre una risoluzione di almeno 72 dpi (dots per inches o punti per pollice) che risulta essere un buon compromesso tra compressione e resa qualitativa dell’immagine.
Trucco dell’esperto
Non esiste una regola ben definita per l’ottimizzazione delle immagini di un sito web: sicuramente occorre tenere conto del peso complessivo di una pagina, non caricandola eccessivamente con contenuti pesanti che possono rallentare il caricamento del sito e inficiare così sull’esperienza dell’utente che atterra sul nostro sito.
A grandi linee un’immagine presente su un sito web non dovrebbe andare oltre i 100 kb e un’intera pagina di un sito dovrebbe stare tra i 500 kb e 1 Mb di peso complessivo.
