Il caricamento veloce di un sito web, oggi, è un fattore molto importante per l’indicizzazione, e quindi lato SEO, ma soprattutto lo è per l’utente. Un lettore che deve aspettare più di 2 secondi per il caricamento di una pagina, abbandonerà con molta probabilità il sito web prima di compiere qualsiasi altra azione.
Per questo motivo è importante avere sempre tempi di risposta del server brevi e ottimizzare bene le performance prestando attenzione a diversi fattori come – per citarne qualcuno – codice, cache, CDN, etc. Ma soprattutto è necessario ottimizzare le immagini.
Per farlo abbiamo l’imbarazzo della scelta, strumenti di ogni tipo che ci aiutano ad ottenere il massimo con il minimo sforzo.
Possiamo parlare di ottimizzazione delle immagini prima del caricamento o dopo il caricamento sul sito web. Nel primo caso utilizzeremo programmi offline o servizi online e quindi ottimizzeremo le nostre immagini prima di caricarle sul sito web. Nel secondo caso, invece, ci occuperemo dell’ottimizzazione direttamente sul sito WordPress.
Perché ottimizzare le immagini è importante?
Spesso carichiamo le immagini sul nostro sito WordPress senza pensarci due volte, senza prestare attenzione al peso, formato e dimensioni.
Ha senso caricare un’immagine con una larghezza di 5000 pixel? E se l’immagine avesse un peso di 3MB? Sai che questo influisce sulle dimensioni finali della pagina e quindi sul tempo di download? Immagina addirittura averne 3-4 o, peggio, decine; la pagina potrebbe impiegare minuti prima del caricamento completo!
E non è solo un esempio, perché di siti con immagini non ottimizzate ne è pieno il web.
Per questo motivo dobbiamo scoprire come ridurre le dimensioni e il peso delle immagini e come applicare metodi di caricamenti ritardati o esterni.
Formati di immagine comuni
Quando si tratta di immagini sul web, i formati giocano un ruolo cruciale nell’ottimizzazione complessiva. I formati più comuni con cui avrai a che fare sono JPEG, PNG e GIF.
Il JPEG è come un mago dell’arte della compressione con perdita: è ideale per le fotografie in quanto può mantenere dettagli visivi in modo sorprendente, riducendo allo stesso tempo le dimensioni del file. Tuttavia, può mostrare qualche debolezza nei dettagli delle immagini con confini netti o testi.
Il PNG, d’altro canto, è più adatto per le immagini con contorni definiti e trasparenze, poiché supporta la compressione senza perdita. Tuttavia, i file PNG tendono ad essere più grandi rispetto ai JPEG.
Infine, il GIF è famoso per le sue animazioni a loop e la sua compatibilità con trasparenze. Tuttavia, ha una tavolozza di colori limitata e produce file di grandi dimensioni.
Oltre a questi, esistono nuovi formati come il WebP, che promettono un’ottima qualità con dimensioni di file ridotte, ma potrebbero richiedere un’attenzione speciale per la compatibilità del browser.
La scelta del formato giusto dipenderà dal tipo di immagine e dalle esigenze del tuo sito.
Strumenti per l’ottimizzazione delle immagini
Ed eccoli, gli eroi senza mantello: gli strumenti e i plugin di ottimizzazione delle immagini!
Iniziamo parlando di qualsiasi strumento tu stia utilizzando per creare o modificare la tua immagine. Nel caso di Photoshop, per fare solo un esempio, per ottimizzare l’immagine è sufficiente fare attenzione alle dimensioni, qualità e formato dell’immagine durante il salvataggio.
Ma questo non sempre basta. Per questo motivo possiamo utilizzare 2 ottimi strumenti online, gratuiti e senza alcun limite di utilizzo!
Ottimizzazione delle immagini prima del caricamento
TinyPNG
TinyPNG è uno strumento online super efficace e rapido che ti permette di ridurre il peso delle immagini in pochi istanti. Apri il sito, trascina una o più immagini contemporaneamente et voilà! Puoi subito scaricare le immagini compresse. Oltre al link di download, l’interfaccia mostrerà il peso dell’immagine prima e dopo e la percentuale ridotta.
Un limite di TinyPNG è l’impossibilità di convertire in altri formati, ma se non ne hai bisogno è lo strumento più rapido per la riduzione del peso di un’immagine.
Resizing.App
Questo è uno degli strumenti che preferisco. Anch’esso gratuito, Resizing permette allo stesso tempo di:
- ridurre il peso dell’immagine
- cambiare le dimensioni
- ritagliare
- convertire l’immagine in 5 diversi formati: PNG, JPEG, WEBP, BMP, TIFF
Supporta l’upload per i formati: PNG, JPEG, BMP, TIFF, HEIC, GIF, WEBP.
Per i motivi su elencati, preferisco quest’ultimo. Ovviamente ci sono anche tantissime alternative e addirittura con l’intelligenza artificiale oggi possiamo non solo ridurre, ma anche aumentare le dimensioni dell’immagine e migliorarne la qualità, riducendo per esempio il disturbo. Ma questo è un altro discorso.
Ottimizzazione dopo del caricamento: plugin ottimizzazione immagini WordPress
Se il tuo sito presenta già tante immagini, puoi scaricarle tutte e modificarle singolarmente o in massa! Che fatica. Oppure potresti optare per un plugin WordPress, che si occuperà in automatico di ottimizzare tutte le immagini presenti sul sito e anche delle immagini che caricherai in futuro!
Di seguito una lista dei migliori plugin per ottimizzare le immagini WordPress
1. Litespeed Cache
Se utilizzi un server LiteSpeed, LiteSpeed Cache con una corretta configurazione può far volare il tuo sito. Ma non stavamo parlando di immagini? LiteSpeed è un plugin gratuito completo che offre anche una buona ottimizzazione delle immagini, conversione in WebP, aggiunta di width e height espliciti per migliorare la metrica Core Web Vitals e ridurre CLS. Inoltre offre anche Lazy Load per caricare in ritardo le immagine (e non solo) below the fold (non visibili fino allo scroll) e, infine, può anche servirle tramite la propria CDN: QUIC.cloud.
2. Smush
Smush è probabilmente il plugin WordPress più utilizzato per ottimizzare le immagini. Può processare JPEG, PNG e anche GIF, ridimensionare le immagini, attivare Lazy Load ma soprattutto è compatibile con Multisite. Se hai necessità della conversione in WebP, devi però attivare un abbonamento.
3. EWWW Image Optimizer
Anche EWWW è una buona soluzione per l’ottimizzazione delle proprie immagini. Offre ottimizzazioni senza limiti di velocità o di dimensioni del file per formati JPG, PNG, GIF e WebP e può agire su qualsiasi cartella del sito. Offre infine conversione in WebP e Lazy Load come i precedenti plugin e nei piani a pagamento l’ottimizzazione avviene sui loro server. Ideale se ha un hosting low cost.
4. Optimole
Image Optimization by Optimole è tra le mie soluzioni preferite perché non impatta molto sulle prestazioni del sito e utilizza una CDN per servire le immagini. Le immagini del nostro sito verranno quindi caricate sul loro server e quado un utente visiterà la nostra pagina, l’immagine verrà distribuita da Optimole facendo risparmiare risorse e banda a noi e tempo all’utente!
Il piano gratuito supporta ben 5 mila visite mensili, quindi è un’ottima soluzione per siti piccoli.
Possiamo inoltre applicare watermark, abilitare Lazy Load, mostrare immagini a bassa risoluzione se la connessione dell’utente non è veloce e convertire le immagini in WebP e AVIF. Quest’ultimo è ideale per ridurre il peso delle GIF ma non è un formato supportato da tutti i browser.
L’alternativa a Optimole è Sirv, ma fai attenzione perché in alcuni casi aumenta il tempo di caricamento della pagina tramite il proprio script (disattivabile tramite impostazioni)
Ottimizzare immagini in ottica SEO: attributi alt e title
Nel vasto e intricato mondo dell’ottimizzazione delle immagini per la SEO, ci sono due fedeli compagni che non dovrebbero mai essere tralasciati: gli attributi alt e title. Questi piccoli ma potenti elementi svolgono un ruolo cruciale nel garantire che le tue immagini si distinguano non solo agli occhi dei visitatori, ma anche agli occhi acuti dei motori di ricerca.
L’attributo alt, o testo alternativo, è come una telegrafica descrizione per le tue immagini. Non solo fornisce informazioni importanti per gli utenti che utilizzano lettori di schermo o che hanno problemi di visualizzazione, ma dà anche ai motori di ricerca un’indicazione chiara di ciò che l’immagine rappresenta. Questo può migliorare notevolmente l’accessibilità del tuo sito e la sua visibilità nei risultati di ricerca.
Dall’altra parte, c’è l’attributo title, che agisce come un’etichetta descrittiva per le tue immagini. Sebbene possa non avere un peso significativo ai fini della SEO, può aggiungere un tocco di contesto e ulteriori dettagli all’esperienza dei visitatori quando passano il mouse sopra un’immagine.
Utilizzare correttamente alt e title dimostra un impegno nei confronti dell’accessibilità e della qualità del tuo contenuto, elementi che i motori di ricerca tengono in alta considerazione. Quindi, non lasciare mai vuoti questi preziosi attributi! Considerali come le note musicali che compongono l’armonia della tua strategia di SEO, portando sia significato che visibilità alle tue immagini e al tuo sito nel complesso.
In pratica devi inserire una descrizione accurata e pertinente nell’attributo alt, utilizzando anche le tue parole chiave mirate. Ma non esagerare! Fai in modo che sia informativo e attraente per i motori di ricerca e i visitatori.
Compressione immagini con o senza perdita?
Esistono due tipi principali di compressione per le immagini: la compressione con perdita (lossy) e la compressione senza perdita (lossless):
- Compressione con perdita (Lossy): Questa tecnica riduce le dimensioni del file eliminando alcune informazioni non essenziali dalle immagini. Poiché le informazioni vengono perse durante il processo di compressione, l’immagine risultante potrebbe avere una leggera diminuzione della qualità visiva, sebbene spesso impercettibile all’occhio umano. I formati di immagine compressi con perdita più comuni sono JPEG e WebP. Questi formati sono ideali per le fotografie e le immagini complesse in cui una certa riduzione di qualità è accettabile in cambio di dimensioni di file più piccole.
- Compressione senza perdita (Lossless): In questo caso, le immagini vengono compresse riducendo le dimensioni del file senza perdere alcuna informazione visiva. Gli algoritmi di compressione senza perdita eliminano i dati ridondanti o ripetitivi nelle immagini, ma mantengono intatti tutti i dettagli visivi. I formati di immagine compressi senza perdita più comuni sono PNG, GIF e TIFF. Questi formati sono preferiti quando la qualità dell’immagine deve rimanere inalterata, ad esempio per le immagini con testo o dettagli molto nitidi.
La scelta tra i due tipi di compressione dipenderà dal tipo di immagine, dall’uso previsto e dai compromessi accettabili tra qualità visiva e dimensioni del file. Spesso, una combinazione strategica di entrambe le tecniche può essere utilizzata per ottimizzare le immagini in base alle esigenze specifiche di un sito web.
Infine, molti strumenti di editing e di ottimizzazione delle immagini consentono di rimuovere o ridurre anche i dati EXIF, se necessario, durante il processo di compressione o di ridimensionamento. Ciò può contribuire a ridurre le dimensioni del file senza compromettere la qualità visiva dell’immagine stessa. La decisione su cosa fare con i dati EXIF dipenderà dall’obiettivo del sito web e dalle preferenze personali. Se i dettagli tecnici e le informazioni sulle immagini non sono importanti per il tuo pubblico, puoi valutare la possibilità di rimuoverli per migliorare le prestazioni del tuo sito.
Conclusioni
In conclusione, l’ottimizzazione delle immagini si rivela un aspetto cruciale per il successo di un sito web. Non solo contribuisce all’indicizzazione e alla visibilità sui motori di ricerca, ma migliora l’esperienza degli utenti, riducendo i tempi di caricamento e aumentando la probabilità di coinvolgimento. La scelta dei formati giusti e l’utilizzo accurato degli attributi alt e title sono passi fondamentali. L’uso di strumenti di ottimizzazione, sia prima che dopo il caricamento, consente di bilanciare qualità visiva e prestazioni. In un panorama digitale in cui l’attenzione degli utenti è preziosa, investire nell’ottimizzazione delle immagini si rivela un vantaggio competitivo per un sito web di successo.
E tu? Conoscevi questi strumenti o hai soluzioni migliori?
