L‘importanza dell’ottimizzazione delle immagini in un sito web: parte 1

Una dei più frequenti motivi di lentezza di un sito web, è conseguenza della presenza di immagini troppo pesanti.  In questo post, e nel prossimoo, vogliamo fornire qualche strumento e dare qualche consiglio per ottimizzare le immagini del tuo sito web.

1) Scegli il giusto tipo di file
La maggior parte delle immagini online è classificabile in uno dei due formati: JPEG o PNG.

I JPEG risulta essere l’opzione ideale per trattare fotografie e altre immagini che mostrano una grande varietà di colori.
I PNG sono perfetti per grafica, disegni, testo e alcuni screenshot. A differenza dei JPEG supportano la trasparenza

Entrambe le opzioni presentano vantaggi e svantaggi e la scelta giusta dipende in gran parte dallo scenario. Occorre sempre controllare le dimensioni di entrambi i formati: alcune foto in png possono risultare anche il 500% più pesanti rispetto alle jpg mentre al contrario, alcune immagini, come ad esempio gli screenshot, possono risultare più pesanti del 100% se salvate come jpg anzichè png.

2) Ridimensiona le immagini

L’operazione di ridimensionamento delle immagini è fondamentale per lo snellimento delle pagine e il miglioramento delle loro velocità di caricamento.
Differenti dimensioni corrispondono a differenti pesi a livello di bytes. Ecco di seguito un esempio. Supponiamo di avere una classica foto
Se la larghezza è di 1200 pixel, il peso è di 394kb
Se la larghezza è di 800 pixel, il peso è di 219kb
Se la larghezza è di 600 pixel, il peso è di 154kb
Ecco perché l’ottimizzazione delle dimensioni svolge un ruolo determinante.
Per eseguire questa operazione si può procedere manualmente oppure avvalendosi di appositi plugins come ad esempio EWWW Image Optimizer oppure Optimole, disponibili in versione parzialmente free.

3) Se necessario ritaglia le immagini
Il ridimensionamento delle immagini è il modo rapido e semplice per ridurre le dimensioni del file perché crea una replica esatta della tua immagine dove tutto è più piccolo.
Così facendo però si otterrà un’immagine in cui alcuni elementi saranno visibili a malapena. La migliore alternativa al ridimensionamento è il ritaglio.
In questo modo potrai ottenere un’immagine più leggera senza perdere la visualizzazione del dettaglio.