Fidatevi di noi, non vorreste che Google disprezzi il vostro sito web. Per fortuna, potete ridurre le dimensioni dei file immagine per migliorare le prestazioni dei vostri siti. Un problema legato alla formattazione è che le modifiche spesso ne riducono la qualità (che a sua volta potrebbe far odiare il vostro sito Web anche ai visitatori). Non è una brutta cosa finché le immagini non diventano brutte. Ci sono diversi trucchi e tecniche che permettono di ridurre le dimensioni dei file immagine e di mantenerne alta la qualità in modo da poterle mostrare con orgoglio sul proprio sito. Diamo un’occhiata a come formattare le immagini senza renderle brutte, nonché a ottimizzare le immagini per il Web e per le prestazioni.

I Vantaggi della Formattazione delle Immagini

Prima di tutto, perché avete bisogno di formattare le vostre immagini? Quali sono i vantaggi? Ci sono numerosi vantaggi nell’ottimizzare le immagini per le prestazioni. Secondo HTTP Archive, a partire da novembre 2018, le immagini rappresentano in media il 21% del peso totale di una pagina web. Quindi, quando è il momento di ottimizzare il vostro sito WordPress, dopo i contenuti video, le immagini sono di gran lunga il primo posto da cui iniziare!

Sono più importanti degli script e dei font. E, ironia della sorte, un buon flusso di lavoro per l’ottimizzazione delle immagini è una delle cose più semplici da implementare, anche se molti proprietari di siti Web ignorano questo aspetto.

Byte Medi Per Pagina

Byte Medi Per Pagina (KB)

Ecco una panoramica dei principali vantaggi dell’ottimizzazione delle immagini.

Le immagini rappresentano in media il 21% del peso complessivo di una pagina web. 😮 Ottimizzale!Click to Tweet

Come Ottimizzare le Immagini per il Web e per le Prestazioni

L’obiettivo principale della formattazione delle immagini è trovare il giusto equilibrio tra la minore dimensione dei file e una qualità accettabile. C’è più di un modo per implementare quasi tutte queste ottimizzazioni. Uno dei metodi più utilizzati è semplicemente quello di comprimere le immagini prima di caricarle su WordPress. Di solito, questo può essere fatto con uno strumento come Adobe Photoshop o Affinity Photo. Alcune di queste attività possono anche essere eseguite utilizzando dei plugin, che analizzeremo di seguito.

Le due cose principali da tenere in considerazione sono il formato del file e il tipo di compressione che usi. Scegliendo la giusta combinazione di formato di file e tipo di compressione, potrete ridurre le dimensioni dell’immagine di ben 5 volte. Dovrete sperimentare con ogni immagine o formato di file per vedere quale combinazione funziona meglio.

Cambiate il vostro host WordPress per ottimizzare le vostre immagini e vedrete un aumento di velocità di oltre il 45% nella velocità di caricamento delle pagine. Provate Kinsta gratuitamente.

Scegliere il formato file giusto

Prima di iniziare a modificare le immagini, assicurati di aver scelto il tipo di file più adatto. Esistono diversi tipi di file che è possibile utilizzare:

Ce ne sono molti altri, come JPEG XR e WebP, ma non sono al momento supportati da tutti i browser. In teoria, si dovrebbe usare il formato JPEG (o JPG) per immagini con molti colore e PNG per immagini semplici.

(Lettura suggerita: JPG vs JPEG: Comprendere il Formato di File Immagine più Comune)

Riduzione della Qualità contro Dimensioni

Ecco un esempio di cosa può accadere se si comprime troppo un’immagine. Nella prima immagine si sta utilizzando un tasso di compressione molto basso, che si traduce nella massima qualità (ma dimensioni maggiori del file). Il secondo sta utilizzando un tasso di compressione molto alto, che si traduce in un’immagine di bassa qualità (ma con dimensioni del file minori). Nota: l’immagine originale non modificata è di 2,06 MB.

JPG bassa compressione alta qualita

Bassa compressione (alta qualità) JPG – 590 KB

JPG alta compressione bassa qualita

Alta compressione (bassa qualità) JPG – 68 KB

Come si può vedere, vedere la prima immagine qui sopra è 590 KB. È troppo grande per una foto! Generalmente è meglio se si riesce a mantenere il peso totale di una pagina web a dimensioni inferiori a 1 o 2 MB. 590 KB sarebbero già un quarto di questa dimensione. La seconda immagine ovviamente risulta orribile, ma occupa solo 68 KB. Quello che dovete fare è trovare un giusto equilibrio tra il tasso di compressione (qualità) e la dimensione del file.

Quindi abbiamo portato l’immagine ad un tasso medio di compressione e, come potete vedere qui sotto, la qualità adesso sembra soddisfacente e la dimensione del file è di 151 KB, che è accettabile per una foto ad alta risoluzione. Questa è quasi 4 volte più piccola della foto originale con una compressione bassa. Normalmente, le immagini più semplici, come le PNG, devono essere inferiori a 100 KB e anche meno, per prestazioni ottimali.

JPG media compressione ottima qualita

Media compressione (ottima qualita) JPG – 151 KB

Ottimizzazione Lossy contro Lossless

È anche importante capire che ci sono due tipi di compressione che possiamo utilizzare, con perdita (Lossy) e senza perdita di dati (Lossless).

Lossy – è un filtro che elimina una parte dei dati. Ridurrà la qualità dell’immagine, quindi dovrete stare attenti a quanto ridurre l’immagine. La dimensione del file può essere ridotta di molto. È possibile utilizzare strumenti come Adobe Photoshop, Affinity Photo o altri editor di immagini per regolare le impostazioni di qualità di un’immagine. L’esempio che abbiamo riportato sopra utilizza la compressione con perdita di dati.

Lossless – è un filtro che comprime i dati. Non riduce la qualità ma richiede che le immagini vengano decompresse prima di poter essere rese a video. È possibile eseguire una compressione senza perdita sul desktop utilizzando strumenti come Photoshop, FileOptimizer o ImageOptim.

È meglio fare prima qualche esperimento con le tecniche di compressione per vedere cosa funziona meglio per ogni tipo di immagine o formato. Se i vostri strumenti hanno la funzionalità corrispondente, assicuratevi di salvare l’immagine per il web. Questa è un’opzione di molti editor di immagini e vi darà le regolazioni di qualità giuste per eseguire una compressione ottimale. Perderete un po’ in qualità, quindi cercate il miglior equilibrio possibile senza rovinare le immagini.

Strumenti e Programmi di Ottimizzazione delle Immagini

Ci sono in giro un sacco di strumenti e programmi, sia premium che gratuiti, che potete utilizzare per ottimizzare le immagini. Alcuni offrono gli strumenti per eseguire da voi le vostre ottimizzazioni, mentre altri fanno il lavoro al posto vostro. Siamo personalmente grandi fan di Affinity Photo, in quanto è economico e offre funzionalità quasi identiche a quelle di Adobe Photoshop.

Affinity Photo

Compressione fotografica in Affinity Photo

Ecco alcuni altri strumenti e programmi a cui dare un’occhiata:

Ridimensionare le Immagini

Un altro aspetto molto importante quando si tratta di ottimizzazione delle immagini è che si dovrebbe provare a caricarle nelle dimensioni giuste e non lasciare che sia CSS a ridimensionarle. Tuttavia, ciò non è più così importante dal momento che, a partire da WordPress 4.4, ora sono supportare le immagini reattive (non ridimensionate dai CSS). Fondamentalmente, WordPress crea automaticamente diverse dimensioni di ogni immagine caricata nella libreria multimediale. Includendo le dimensioni disponibili di un’immagine in un attributo srcset, i browser ora possono scegliere di scaricare la dimensione più appropriata e ignorare le altre. Guardate un esempio di come appare il vostro codice qui sotto.

srcset immagini reattive

Esempio di immagini reattive con srcset nel codice

Quindi, con sempre più schermi HiDPI al giorno d’oggi, può essere bello trovare un buon media. Diciamo 2 o 3 volte le dimensioni della colonna del sito o di una div, ma sempre meno delle dimensioni originali. Il browser mostrerà quella corretta in base alla risoluzione del dispositivo.

La libreria multimediale di WordPress crea miniature in base alle vostre impostazioni. Tuttavia, l’originale viene conservato e rimane inalterato. Se desiderate ridimensionare le immagini e risparmiare spazio su disco senza salvare l’originale, potete utilizzare un plug-in gratuito come Imsanity.

Impostazioni media in WordPress

Impostazioni media in WordPress

Imsanity vi consente di impostare un limite di integrità in modo che tutte le immagini caricate siano limitate a una dimensione ragionevole che comunque è grande abbastanza per le esigenze di un normale sito Web.

Imsanity si aggancia a WordPress subito dopo il caricamento dell’immagine, ma prima che avvenga l’elaborazione da parte di WordPress. Quindi WordPress si comporta esattamente allo stesso modo, tranne che sarà come se chi carica il contenuto avesse ridotto l’immagine ad una dimensione ragionevole prima di caricarla.

Pulite la vostra libreria media

Se state cercando uno strumento per risparmiare spazio e allo stesso tempo per ripulire la vostra libreria media, potete usare Media Cleaner per trovare i file multimediali inutilizzati. Il plugin eseguirà la scansione di tutti i file multimediali ed elencherà quelli inutilizzati nel Media Cleaner Dashboard in modo che li possiate sfogliare ed eliminare.

Media Cleaner implementa un sistema intelligente per cestinare i file: quando vengono cancellati, vengono spostati in una directory cestino. In questo modo, siete in grado di testare il vostro sito web per un po’ di tempo e assicurarvi che tutto sia a posto. Se manca un file o una voce media, potete facilmente ripristinarlo con un clic o semplicemente svuotare il cestino se tutto vi sembra a posto.

Plugin di Ottimizzazione delle Immagini

Fortunatamente, con WordPress non è necessario eseguire tutta la formattazione o la compressione a mano. É possibile utilizzare i plugin per eseguire automaticamente almeno una parte del lavoro. Ci sono diversi plugin che ottimizzeranno automaticamente i vostri file immagine durante l’upload. E ottimizzeranno anche le immagini che avete già caricato. Questa è una funzionalità utile, specialmente se avete già un sito Web pieno di immagini. Qui forniamo una panoramica dei migliori plugin per adattare le immagini ed avere prestazioni migliori.

È importante però che non vi affidiate esclusivamente ai plugin. Ad esempio, non dovreste caricare immagini da 2 MB nella libreria multimediale di WordPress. Questo può portare ad esaurire rapidamente lo spazio sul disco del vostro host. Il metodo migliore consiste nel ridimensionare rapidamente l’immagine in uno strumento di modifica delle foto prima di procedere, poi caricarla e utilizzare uno dei seguenti plugin per ridurre ulteriormente le dimensioni.

Imagify Image Optimizer

Imagify Image Optimizer

Imagify Image Optimizer

Imagify è sviluppato dallo stesso team che ha sviluppato WP Rocket, che probabilmente molti di voi conoscono. È compatibile con WooCommerce, NextGen Gallery e WP Retina. Ha anche una funzione di ottimizzazione in massa e permette di scegliere tra tre diversi livelli di compressione, normale, aggressiva e ultra. Ha anche una funzione di ripristino, quindi se non siete soddisfatti della qualità, potete ripristinare e ricomprimere le immagini con un solo clic e portarle ad un livello più adatto alle vostre necessità. C’è una versione gratuita e una versione premium. Con l’account gratuito si è limitati ad una quota di 25 MB di immagini al mese.

Con questo plugin è anche possibile liberarsi dell’immagine originale e ridimensionare le immagini più grandi.

Ridimensionamento in Imagify

Ridimensionamento delle immagini in Imagify

Imagify, inoltre, comprime le immagini sui propri server di terze parti, non sui vostri server, il che è molto importante per quel che riguarda le prestazioni. Imagify non dovrebbe rallentare il vostro sito WordPress.

ShortPixel Image Optimizer

ShortPixel plugin di ottimizzazione delle immagini

ShortPixel

ShortPixel Image Optimizer è un plug-in gratuito che comprime 100 immagini al mese e permette la compressione di più tipi di file, tra cui PNG, JPG, GIF, WebP e persino file PDF. Effettua la compressione delle immagini sia con perdita di dati che senza perdita di dati. Converte il metodo CMYK in RGB. Porta le immagini e le anteprime nel cloud per l’elaborazione e poi le riporta sul tuo sito per sostituire gli originali. Crea un backup dei file originali in modo che questi possano essere ripristinati manualmente se lo si desidera. Converte cumulativamente i file delle gallerie. Non c’è limite alle dimensioni dei file.

Optimole

Optimole

Il plugin Optimole

Optimole è un plugin di WordPress per l’ottimizzazione delle immagini che riduce automaticamente le dimensioni delle immagini senza alcun intervento da parte vostra. Ha un grande vantaggio per quel che riguarda la velocità di caricamento del vostro sito perché è interamente basato su cloud e non serve mai immagini più grandi di quanto dovrebbero essere, in quanto visualizza la dimensione dell’immagine perfetta per il viewport e il browser del visitatore.

Inoltre, il plugin fornisce il lazy loading e un’efficiente sostituzione delle immagini: riduce la qualità delle immagini se il visitatore ha una connessione Internet più lenta, il che lo distingue da tutti gli altri. Rileva automaticamente anche il browser dell’utente e serve il formato WebP se è supportato.

Tutte le immagini che Optimole comprime sono servite tramite un veloce CDN. Potete provare Optimole gratuitamente o eseguire l’upgrade al piano premium se avete bisogno di maggiore larghezza di banda e spazio di elaborazione.

EWWW Image Optimizer Cloud

EWWW Image Optimizer Cloud

EWWW Image Optimizer Cloud

EWWW Image Optimizer Cloud vi aiuta a rendere le vostre immagini più piccole e il vostro sito più veloce con minori difficoltà iniziali. Senza limiti di dimensioni e flessibilità, potete utilizzare i valori predefiniti o personalizzare completamente il plugin a vostro piacimento. Tutti gli utenti di EWWW IO possono utilizzare il Bulk Optimizer per comprimere le immagini esistenti o utilizzare la modalità a elenco della Libreria Media per selezionare immagini specifiche da comprimere.

È possibile eseguire la scansione di altre cartelle per assicurarsi che ogni singola immagine del sito sia ottimizzata correttamente. EWWW IO vi consente anche di convertire le vostre immagini in formati di prossima generazione, come WebP, o di trovare il miglior formato di immagine con opzioni di conversione multiformato. La compressione delle immagini parte da soli $0,003 a immagine.

Cambiate il vostro host WordPress per ottimizzare le vostre immagini e vedrete un aumento di velocità di oltre il 45% nella velocità di caricamento delle pagine. Provate Kinsta gratuitamente.

L’API di compressione premium vi consente di portare la compressione a un livello decisamente superiore senza sacrificare la qualità, sblocca la compressione PDF e include convenienti backup di immagini a 30 giorni. La funzionalità ExactDN, che parte da 9 dollari al mese, introduce la compressione automatica (senza necessità di compressione lato server), il ridimensionamento automatico e tutti i vantaggi di un CDN per garantirvi risultati più rapidi e prestazioni ancora maggiori per qualsiasi dimensione di dispositivo.

Optimus Image Optimizer

Optimus Image Optimizer

Optimus Image Optimizer

Optimus Image Optimizer per WordPress utilizza la compressione lossless per ottimizzare le immagini. Lossless significa che non vedrete alcuna perdita di qualità. Supporta WooCoomerce e multi-site e dispone di un’utile funzionalità di ottimizzazione di massa per coloro che hanno già consistenti librerie multimediali. Inoltre è compatibile con il plugin WP Retina WordPress. Esistono una versione gratuita e una versione premium. Nella versione premium si paga una volta l’anno e si possono comprimere una quantità illimitata di immagini. Se lo si abbina al plugin Cache Enabler, ci si può anche immergere nelle immagini WebP, che è un nuovo e leggero formato immagine di Google.

WP Smush

WP Smush

WP Smush

WP Smush ha sia una versione gratuita che premium. Questo plugin elimina le informazioni nascoste dalle immagini per ridurre le dimensioni senza ridurre la qualità. Analizza le immagini e le riduce man mano che vengono caricate sul sito. Inoltre, analizza le immagini già caricate e ne riduce le dimensioni. Gestisce cumulativamente fino a 50 file contemporaneamente, ed è possibile interrompere manualmente l’esecuzione, se lo si desidera. Il plugin elabora i tipi di immagine JPEG, GIF e PNG. Le dimensioni dei file sono limitate a 1 MB.

TinyPNG (comprime anche le JPG)

TinyPNG

TinyPNG

TinyPNG utilizza i servizi TinyJPG e TinyPNG (l’account gratuito consente di comprimere circa 100 immagini al mese) per ottimizzare le immagini JPG e PNG. Comprime automaticamente le nuove immagini e comprime in massa le immagini esistenti. Converte CMYK in RBG per risparmiare spazio. Comprime le immagini JPEG fino al 60% e le immagini PNG fino all’80% senza una perdita visibile della qualità dell’immagine. Non ci sono limiti nelle dimensioni dei file.

ImageRecycle

ImageRecycle – Image & PDF optimizer

ImageRecycle – Image & PDF optimizer

Il plugin ImageRecyle è un ottimizzatore automatico di immagini e PDF. Questo plugin si focalizza non solo sulla compressione delle immagini, ma anche sui PDF. Una funzionalità davvero utile è la possibilità di impostare la dimensione minima del file per la compressione. Ad esempio, se avete immagini con dimensioni di 80 KB, potete escludere automaticamente dalla compressione. Ciò garantisce che le immagini e i file non vengano mai compressi in modo eccessivo. Il plugin fornisce anche ottimizzazione cumulativa e ridimensionamento automatico. Nota: offrono una prova gratuita di 15 giorni, ma si tratta comunque di un servizio premium e le immagini vengono caricate e compresse usando i loro server. Non ci sono addebiti mensili, ma viene conteggiato il numero totale delle immagini compresse, a partire da $10 per 10.000 immagini.

Un Caso di Studio di Ottimizzazione delle Immagini

Abbiamo deciso di realizzare il nostro piccolo caso di studio per dimostrare quanto l’ottimizzazione delle immagini per il Web possa influire sulla velocità generale del vostro sito WordPress.

JPG non compresse

Abbiamo inizialmente caricato nel nostro sito di prova 6 JPG non compresse, tutte di dimensioni superiori a 1 MB (si vedano le JPG originali non compresse). Abbiamo quindi eseguito 5 test con Pingdom e abbiamo fatto la media. Come si vede dal test di velocità riportato qui sotto, il nostro tempo di caricamento totale è stato di 1,55 secondi e le dimensioni complessive della pagina di 14,7 MB.

Test velocità con JPG non compresse

Test velocità con JPG non compresse

JPG compresse

Abbiamo quindi compresso i file JPG con il plugin Imagify WordPress, utilizzando “l’impostazione aggressiva”. (si vedano le nuove JPG compresse, che sembrano ancora altrettanto gradevoli). Abbiamo quindi eseguito 5 test su Pingdom e abbiamo fatto la media. Come si può vedere dallo speed test qui sotto, il tempo di caricamento totale è stato ridotto a 476 ms e le dimensioni totali della pagina sono state ridotte a 2,9 MB. I tempi di caricamento totali sono stati ridotti del 54,88% e le dimensioni della pagina sono state ridotte dell’80,27%.

Test velocità con JPG compresse

Test velocità con JPG compresse

É difficile trovare altre ottimizzazioni che permettano di ridurre del 50% i tempi di caricamento di un sito web. Ecco perché l’ottimizzazione delle immagini è così importante, e il processo di cui sopra è stato interamente automatizzato dal plugin. È un approccio “hands-off” ad un sito WordPress più veloce. L’unica altra ottimizzazione drastica che si potrebbe fare sarebbe cambiare l’host di WordPress. Molti dei clienti che si trasferiscono a Kinsta vedono aumenti di velocità superiori al 45%. Immaginate cosa accadrebbe passando a Kinsta e ottimizzando le vostre immagini!

Ottimizzando le vostre immagini, sia con uno strumento di fotoritocco sia con un plugin per WordPress, potrete anche eliminare l’avviso “Ottimizza immagini” che ricevete in Google Page Speed Insights (come mostrato di seguito).

PageSpeed Insights Ottimizza Immagini

Avviso “Ottimizza Immagini” di PageSpeed Insights

Se avete altre notifiche di ottimizzazione dagli strumenti di speed test, assicuratevi di leggere il nostro post su Google PageSpeed Insights e la nostra analisi dettagliata di Pingdom.

Utilizzare le SVG

Un altro suggerimento è quello di utilizzare gli SVG insieme alle altre immagini. SVG è un formato vettoriale scalabile che va perfettamente bene per loghi, icone, testo e immagini semplici. Ecco alcuni motivi per cui utilizzare SVG:

Genki ha scritto un ottimo articolo in cui confronta le dimensioni di SVG, PNG e JPEG. Di seguito sono riportati alcuni spunti del suo test in cui ha messo a confronto i tre diversi tipi di immagine.

JPG (dimensioni ottimizzate: 81.4 KB)

Dimensioni JPG

Immagine JPG

PNG (dimensioni ottimizzate: 85.1 KB)

Dimensioni PNG

Immagine PNG

SVG (dimensioni ottimizzate: 6.1 KB)

Dimensioni SVG

Immagine SVG

Come si può vedere sopra, l’SVG comporta una diminuzione delle dimensioni del file del 92,51% rispetto al JPG. E se confrontato con il PNG, il 92,83%. Si legga il nostro tutorial su come utilizzare SVG sul proprio sito WordPress.

Le Migliori Prassi

Ecco alcune best practice generali quando si tratta di ottimizzare le immagini per il web:

Click to Tweet

Una volta che avete formattato le immagini in modo da ottenere prestazioni migliori e aver seguito le best practice, il vostro sito sarà più apprezzato dai motori di ricerca, dai browser e dalle reti, e verrà caricato più velocemente per i vostri lettori. Oh, e assicuratevi di dare un’occhiata al nostro tutorial sull’hotlinking, per evitare che altri vi rubino le immagini e la larghezza di banda.

Avete formattato le vostre immagini per migliorare le prestazioni? Le formattate manualmente, utilizzate un plugin o entrambi? C’è un altro strumento o plugin che consigliereste? Avete qualcosa da aggiungere? Fateci sapere le vostre tecniche e le vostre migliori prassi nei commenti qui sotto!


Se ti è piaciuto questo articolo, allora apprezzerai la piattaforma di hosting WordPress di Kinsta. Metti il turbo al tuo sito web e ricevi supporto 24×7 dal nostro team di veterani di WordPress. La nostra infrastruttura potenziata da Google Cloud è centrata su scaling automatico, performance e sicurezza. Permettici di mostrarti la differenza di Kinsta! Scopri i nostri piani