Come ottimizzare le immagini per il web

Come aumentare la velocità del sito web attraverso l'ottimizzazione delle immagini

Dopo parecchio tempo, trovo finalmente il tempo di scrivere sul mio blog, vi avevo lasciato con un articolo su dove trovare immagini da scaricare gratis per siti web, proseguiamo quindi su questo argomento e vi spiegherò ora su come e perché ottimizzare le immagini per il web per ridurre i tempi di caricamento del sito.

Come sappiamo bene l’utilizzo delle immagini nella realizzazione di un sito web è un fattore importante, perché le immagini permettono di avere un sito bello visivamente ed invogliare maggiormente l’utente alla navigazione, oltre che ad essere utili per rendere più accattivante una pagina web, spiegare o rafforzare un concetto descritto nel post. Oppure, in alcuni casi, le immagini possono essere di primaria importanza, per esempio se parliamo di un sito web di fotografia.

Perché ottimizzare le immagini? Google, SEO e velocità di caricamento

L’utilizzo di immagini grandi o non ottimizzate può penalizzare sulla velocità del sito web ed è per questo motivo che è molto importante ottimizzare le immagini per ridurre i tempi di caricamento della nostre pagine web.

La velocità di caricamento è uno degli aspetti che Google prende in considerazione nel valutare il sito web, soprattutto in ottica SEO, è una dato di fatto che il 40% degli utenti abbandonano un sito web se esso carica in più di 3 secondi. Un sito web esteticamente bello, e allo stesso tempo veloce, permette quindi di avere più visualizzazioni, più condivisioni e anche più vendite.

Per testare la velocità di caricamento del sito web puoi utilizzare uno strumento come Google Pagespeed Tools o Pingdom Website Speed Test o GTMetrix:

Per fare in modo quindi di avere un sito web veloce è necessario capire come ottimizzare le immagini riducendo peso e dimensioni senza perdere di qualità.

Guida all'ottimizzazione delle immagini

Ritagliare e ridimensionare le immagini con Photoshop

La prima cosa da compiere per ridurre le dimensioni di un’immagine è quella di ritagliarla, utilizzando un software come Photoshop possiamo ritagliare la nostra immagine per eliminare le parti in eccesso che non ci servono, e creare un’immagine delle dimensioni giuste a seconda delle specifiche risoluzioni del sito web e del template, questo ci permetterà di aumentare l’impatto visivo, focalizzando l’attenzione dell’utente sugli elementi principali della nostra immagine e, allo stesso tempo, di ridurre il peso dell’immagine.

Scegliere il formato di salvataggio per le immagini

Una volta ritagliata la nostra immagine è necessario salvarla e scegliere il giusto formato fra quelli proposti dal software grafico utilizzato e che possono essere utilizzati nel web come JPEG, PNG o GIF. Già in questa fase, il nostro editor grafico, come Photoshop, ci permette di ottimizzare l’immagine e ridurne il peso.

Formato JPEG

Il formato JPEG, è uno dei formati grafici più utilizzati in assoluto, creato appositamente per comprimere le immagini, esso utilizza una compressione che altera i dati originali eliminando i colori ritenuti superflui e riducendone la scala cromatica. Si ha quindi una perdita di qualità dell’immagine, che è maggiore al decrescere del parametro di qualità impostabile dall'utente in fase di salvataggio.

Per salvare un’immagine ottimizzata da Photoshop possiamo scegliere la funzione Salva per web, ed impostare la qualità del JPEG all’80%, in alcuni casi è possibile fare anche delle prove impostando la qualità fino al 60% per ridurre maggiormente il peso dell’immagine.

Compiendo questa operazione otterremo un’immagine ottimizzata che peserà molto meno dell’originale mantenendo sempre un’ottima qualità.

Formato PNG

Il formato PNG è utilizzabile nel caso si necessiti di un’immagine con sfondo trasparente. Anche il formato PNG utilizza una compressione di tipo lossless che ci permette di alleggerire il peso dell’immagine anche se la compressione è ridotta e quindi un file PNG occuperà maggiore spazio rispetto ad un file JPG.

Formato GIF

Come per un PNG, le immagini GIF possono avere uno sfondo trasparente ma il formato supporta solo 256 colori per cui non sarà possibile utilizzarlo per illustrazioni o fotografie. Altra particolarità del formato GIF è che le immagini possono essere animate. Il formato GIF quindi, anche se è uno dei più vecchi formati, è particolarmente utile nel caso di immagini semplici o con animazioni.

Bene, ora che abbiamo salvato la nostra immagine seguendo le istruzioni sopra possiamo già avere un’immagine ottimizzata per essere inserita nella nostra pagina web, ma se il nostro sito è pieno di gallery e fotografie ottimizzare ulteriormente le immagini ci permetterà di aumentare maggiormente le prestazioni e la velocità del sito web.

Utilizzo di programmi per ottimizzare le immagini

Ridimensionare le immagini in Photoshop e ridurne il peso è un’operazione che richiede tempo, per questo motivo può essere utile avvalersi di tool appositi per ottimizzare le immagini da utilizzare per il web. I programmi di ottimizzazione delle immagini eseguono le operazioni che precedentemente abbiamo fatto manualmente, in maniera automatica, alleggerendo il nostro lavoro.

I migliori tool che ho avuto modo di testare sono:

TinyPNG

TinyPNG non è un vero e proprio programma ma un’applicazione web che ci permette di ridurre le dimensione dei file PNG fino al 70% delle dimensioni originali senza grandi perdite di qualità. L’utilizzo dell’applicazione è molto semplice, basta trascinare il file nell'apposito spazio oppure effettuare l’upload di uno o più file e poi avviare il processo di ottimizzazione. A processo completato ci verrà mostrata la dimensione iniziale e la dimensione finale dell’immagine con la relativa percentuale di ottimizzazione. A questo punto non ci resta che fare il download delle immagini ottimizzate ed inserirle nel sito web.

JPEGmini

JPEGmini è un ottimo software di compressione delle immagini JPG, che riduce il più possibile le dimensione delle immagini senza gravare sulla qualità delle stesse. JPEGmini è disponibile sia per Windows che per Mac a pagamento, ma può essere utilizzato anche nella versione gratuita fino ad una massimo di 20 foto al giorno.

Anche in questo caso, come per TinyPNG, l’utilizzo è molto semplice, basta effettuare il drag&drop delle immagini da comprimere e avviare la compressione. JPEGmini ci restituirà immagini ottimizzate per il web.

RIOT

RIOT (acronimo di Radical Image Optimization Tool) è un software utilizzabile in maniera gratuita su Windows per ottimizzare le immagini. RIOT supporta la compressione dei formati JPEG, GIF e PNG, ossia dei formati più utilizzati in ambito web, e ha una funzionalità che ci permette di vedere le 2 immagini affiancate, ossia l’immagine originale e l’immagine ottimizzata, per poter analizzare immediatamente la qualità della compressione.

CANVA DA JPG a PNG

Canva ci offre una soluzione rapida ed intuitiva per cambiare il formato dell'immagine da jpg a png, basterà infatti entrare nella pagina dedicata, caricare o trascinare la propria immagine ed il gioco è fatto.

Con questa funzionalità puoi anche modificare le tue foto grazie agli strumenti grafici dedicati, ad esempio potrai rimuovere oggetti oppure cancellare lo sfondo dalle tue immagini prima o dopo la conversione.

Plugin WordPress per ottimizzare le immagini

I vari software possono essere utili per ottimizzare le immagini prima del loro caricamento nel sito ma a volte capita di dover effettuare la compressione delle immagini già pubblicate nelle nostre pagine web, cosa fare allora? In questo caso possiamo ottenere gli stessi risultati con l’utilizzo di plugin per WordPress (parlo di WordPress perché sostanzialmente una notevole percentuale di siti web oggi sono realizzati tramite questo CMS).

I plugin WordPress per l’ottimizzazione delle immagini che ho avuto modo di testare sono:

WP Smush

Questo plugin, che una volta scaricato e installato non richiede configurazioni specifiche, ci consente in maniera semplice e rapida di ottimizzare le immagini presenti nel nostro blog o sito WordPress, alleggerendo notevolmente il peso senza gravare sulla qualità, e di conseguenza velocizzare le prestazioni del sito web. Il plugin WP-Smush permette di agire in maniera automatica sulle immagini in fase di upload oppure di agire direttamente, in modo manuale, sulle immagini presenti nella libreria.

WP Smush è disponibile sia nella versione a pagamento, sia nella versione gratuita, nella maggior parte dei casi, per le normali esigenze, la versione gratuita può bastare. Le differenze principali con la versione a pagamento sono:

• una migliore compressione con super-Smush (2 volte più potente di quella normale);
• la compressione delle immagini di dimensioni superiori a 1MB (limite della versione free;
• la compressione di tutte le immagini con un click;
• backup di tutte le immagini non compresse per un eventuale ripristino.

EWW Image-Optimizer

Il plugin EWW Image-Optimizer, come nel caso di WP-Smush, ci permette di effettuare la compressione sia delle immagini già caricate nel sito WordPress sia delle immagini che andremo a caricare in futuro. Permette di ridurre il peso delle immagini JPG e PNG e tra le varie impostazioni troviamo anche la possibilità di eliminare i dati EXIF e la possibilità di ottimizzare le immagini che fanno parte del tema (ossia quelle non presenti nella libreria).

Imsanity

Altro plugin degno di nota per ridurre il peso delle immagini è Imsanity, una volta installato ci permette di impostare la dimensione massima predefinita delle immagini che andremo a caricare (molto utile nel caso di un blog multi-autore dove non possiamo avere un pieno controllo delle immagini inserite) e il livello di compressione. Tramite il plugin è possibile effettuare una compressione bulk di tutte le immagini già presenti nella libreria con il consiglio di provvedere prima ad un backup della cartella, poiché Imsanity non permette il ripristino delle immagini originali una volta effettuata l’ottimizzazione.

Short Pixel Image Optimizer

Tra i plugin a pagamento vorrei segnalare anche Short Pixel Image Optimizer, un’ottimo plugin che permette la compressione di file JPG, PNG, GIF e anche PDF. Il plugin offre la possibilità di essere acquistato a pacchetti mensili oppure in base al numero delle immagini da ottimizzare.

Come in altri casi il plugin permette di ottimizzare tutte le immagini presenti nella libreria (tra cui anche le thumbnails), ed è completo di tutte le funzioni necessarie alla compressione delle immagini come: la possibilità di scelta del tipo di compressione, il salvataggio di un backup delle immagini originali, la rimozione dei dati EXIF, la possibilità di impostare le dimensioni massime per le immagini caricate.

E’ possibile testare le funzionalità del plugin Short Pixel Image Opztimizer anche in versione free con il limite di 100 immagini al mese oppure effettuare un test online eseguendo la compressione di massimo 20 immagini.

Conclusioni

Bene, siamo giunti alla conclusione e penso di averti dato tutte le informazioni possibili su come ottimizzare le immagini del sito web per ridurre i tempi di caricamento, perché come ho avuto modo di spiegare, la velocità di caricamento è un fattore fondamentale soprattutto in ottica di ottimizzazione SEO.

E tu hai avuto modo di provare questi strumenti o hai testato altri tool che reputi interessanti? Se hai domande o suggerimenti fammi sapere lasciando un commento sotto l’articolo!