Come ottimizzare le immagini per il web

Come ottimizzare le immagini per il web

ottimizzare immagini 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:

google pagespeed tools

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.

compressione immagini 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.

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).

ottimizzazione immagini plugin wordpress

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 volte 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!

7 commenti

  • Silvia says:

    24 ottobre 2016 at 23:24

    Ciao Mirko, ho letto il tuo articolo molto ben fatto. Sto cercando di capire di più su questo argomento in quanto ho un blog di musica (www.blogdellamusica.eu) e pur avendo cercato di ottimizzare sempre le immagini che caricavo, pochi giorni fa ho provato a fare il pagespeed test di Google e mi sono resa conto che non va bene niente… il sito è lentissimo. Quale plug-in mi consigli di installare? Ho paura di combinare un pasticcio e rovinare tutto il mio lavoro.
    Con questi plugin posso scegliere io quali foto ottimizzare? Una volta ottimizzate tutte le foto caricate, posso togliere il plugin in modo da non appesantire troppo il sito?
    Come invece posso ottimizzare le foto prima di caricarle sul blog in modo poi da non dover più intervenire? WordPress utilizza la stessa foto in vari formati… per me è praticamente impossibile ottimizzare tutto perché non so come fare… Sono piena di dubbi. Grazie se vorrai aiutarmi

    • Mirko Pazzelli says:

      25 ottobre 2016 at 12:00

      Grazie Silvia. Ho controllato il tuo blog ed uno dei maggiori problemi di lentezza è proprio il fatto che le immagini non sono ottimizzate. Il consiglio che ti posso dare è quello di installare un plugin come Wp-Smush o EWW image Optimizer e far ottimizzare le immagini già caricate nel blog (puoi anche selezionarle. magari prima fai una prova con alcune immagini e poi se ok le ottimizzi tutte). Per quanto riguarda l’ottimizzazione delle immagini prima di essere caricate io ti consiglio la soluzione Photoshop (Ritaglio e ridimensionamento) + RIOT (ottimizzazione).

  • StepHania says:

    3 maggio 2017 at 13:13

    Ottimo articolo!
    Non conosco i tool che consigli (sino ad ora mi sono limitata alla combinazione PS + EWW), però vado subito a provarli.
    Grazie.

  • Andrea says:

    31 maggio 2017 at 19:14

    Salve Mirko un info per fare immagini responsive. Vedo usare il tag e tutte le sue proprietà ma ti volevo chiedere se devo creare anche tutte le altre immagini?

    • Mirko Pazzelli says:

      31 maggio 2017 at 20:51

      Ciao Andrea, non credo di aver ben capito la domanda, comunque non devi creare diverse dimensioni dell’immagine ma sarà, per esempio WordPress, a creare le diverse misure di immagini che servono al template.

  • Francesco Floris says:

    11 agosto 2017 at 17:44

    Grazie ai tuoi consigli ho scaricato e subito usato Riot, facilissimo, molto intuitivo e ti dà anche la possibilità di ridurre le dimensioni in pixel!!! E gratis, aspetto non secondario! Grazie. Mi potresti consigliare anche un programma per fare siti web semplici facile e possibilmente gratuito? Ne ho provato tanti e non ho ancora concluso niente!! Grazie ancora!!

Commenta l'articolo

Send this to a friend