Come ottimizzare le immagini WordPress per velocizzare il sito

Le immagini rappresentano in media il 50-70% del peso totale di una pagina web. Se non sono ottimizzate, rallentano drasticamente il caricamento del sito, peggiorano i Core Web Vitals e penalizzano il posizionamento su Google. In questa guida ti mostro come ottimizzare le immagini WordPress con i metodi più efficaci: formati moderni, compressione, lazy loading e dimensioni corrette.

Perché le immagini non ottimizzate rallentano il sito

Quando carichi una foto dalla fotocamera o da un servizio di stock photography, il file può pesare 3-5 MB o più. Anche le immagini ridimensionate manualmente spesso conservano metadati EXIF inutili e non sono compresse in modo ottimale. Se una pagina contiene 10 immagini non ottimizzate, il browser deve scaricare decine di megabyte prima di visualizzare il contenuto. Su connessioni mobile, questo può significare tempi di caricamento di 10-15 secondi, con il risultato che la maggior parte dei visitatori abbandona la pagina prima ancora di vederla.

Scegliere il formato corretto

Il primo passo è usare il formato immagine giusto per ogni situazione:

• WebP: il formato consigliato per la maggior parte delle immagini sul web. Offre una compressione del 25-35% superiore rispetto a JPEG mantenendo la stessa qualità visiva. Supportato da tutti i browser moderni.
• AVIF: il formato più recente e performante, con compressione ancora migliore di WebP. Il supporto dei browser è in crescita ma non ancora universale.
• JPEG: ideale per fotografie e immagini con molti colori quando WebP non è un’opzione. Usa una compressione con qualità tra 75 e 85 per il miglior rapporto qualità/peso.
• PNG: usa questo formato solo quando serve la trasparenza (loghi, icone). Per le fotografie, PNG è molto più pesante di JPEG o WebP.
• SVG: perfetto per loghi, icone e illustrazioni vettoriali. Scalabile senza perdita di qualità e leggerissimo.

Comprimere le immagini prima del caricamento

La pratica migliore è comprimere le immagini prima di caricarle su WordPress. Strumenti online come TinyPNG, Squoosh (di Google) e ShortPixel Online riducono il peso delle immagini fino all’80% senza perdita di qualità percepibile. Squoosh è particolarmente utile perché permette di convertire in WebP o AVIF direttamente nel browser, confrontando la qualità prima e dopo la compressione con un cursore visuale.

Per chi elabora molte immagini, strumenti desktop come ImageOptim (Mac) o FileOptimizer (Windows) permettono di comprimere in batch interi lotti di immagini con un drag and drop.

Plugin WordPress per l’ottimizzazione automatica

Se preferisci automatizzare il processo, i plugin di ottimizzazione comprimono le immagini direttamente al momento del caricamento nella libreria media. Le opzioni migliori:

• ShortPixel Image Optimizer: comprime automaticamente ogni immagine caricata con tre livelli di compressione (lossy, glossy, lossless). Supporta la conversione automatica in WebP e AVIF. Offre 100 crediti gratuiti al mese.
• Imagify: sviluppato dal team di WP Rocket. Offre compressione intelligente con tre livelli e conversione WebP. Interfaccia semplice e ottimizzazione in bulk delle immagini esistenti.
• EWWW Image Optimizer: unico plugin che può comprimere le immagini direttamente sul server senza inviarle a servizi esterni. Ideale per siti con dati sensibili o requisiti di privacy.

Tutti questi plugin possono anche ottimizzare in bulk le immagini già presenti nella libreria media, permettendoti di recuperare spazio e velocità anche sulle immagini caricate in passato.

Ridimensionare le immagini alle dimensioni corrette

Non ha senso caricare un’immagine di 4000×3000 pixel se verrà visualizzata in un’area di 800×600 pixel. Il browser deve scaricare l’immagine originale e poi ridimensionarla visivamente, sprecando banda e rallentando il rendering. Prima di caricare un’immagine, ridimensionala alle dimensioni massime in cui verrà visualizzata sul sito. Per la maggior parte dei blog WordPress, una larghezza massima di 1200 pixel è più che sufficiente per le immagini a larghezza piena.

WordPress genera automaticamente diverse dimensioni per ogni immagine caricata (thumbnail, medium, large), ma l’originale resta nel server. Puoi configurare le dimensioni predefinite in Impostazioni > Media per adattarle al tuo layout.

Implementare il lazy loading

Il lazy loading ritarda il caricamento delle immagini che non sono visibili nella viewport. Invece di scaricare tutte le immagini della pagina al caricamento iniziale, il browser carica solo quelle visibili e scarica le altre man mano che l’utente scorre la pagina. A partire da WordPress 5.5, il lazy loading nativo è attivato automaticamente tramite l’attributo loading=”lazy” aggiunto alle immagini. Se usi un tema aggiornato, questa funzionalità è già attiva senza plugin aggiuntivi.

Per un controllo più avanzato, plugin come Perfmatters o WP Rocket permettono di escludere dal lazy loading le immagini above the fold (come il logo e la hero image) per migliorare la metrica Largest Contentful Paint (LCP).

Servire immagini responsive con srcset

WordPress genera automaticamente l’attributo srcset per le immagini, che indica al browser le diverse dimensioni disponibili. Il browser sceglie la versione più adatta in base alla dimensione dello schermo e alla densità dei pixel. Questo significa che un visitatore da smartphone scaricherà una versione più piccola dell’immagine rispetto a chi visita da desktop, risparmiando banda senza sacrificare la qualità. Assicurati che il tuo tema non sovrascriva questo comportamento con dimensioni fisse nelle immagini.

Pulire la libreria media dalle immagini inutilizzate

Nel tempo, la libreria media di WordPress accumula immagini orfane: immagini caricate ma mai inserite nei contenuti, vecchie versioni sostituite, bozze cancellate. Queste immagini occupano spazio sul server e possono rallentare i backup. Plugin come Media Cleaner analizzano la libreria e identificano i file non utilizzati in articoli, pagine o widget. Prima di eliminare le immagini, il plugin le sposta nel cestino per permetterti di verificare che non siano effettivamente in uso. Una pulizia periodica della libreria media mantiene il sito snello e riduce il peso dei backup.

Usare una CDN per le immagini

Una Content Delivery Network (CDN) distribuisce le immagini su server in tutto il mondo, riducendo la distanza fisica tra il server e il visitatore. Servizi come Cloudflare, BunnyCDN e KeyCDN offrono anche ottimizzazione automatica delle immagini on the fly: ridimensionamento, compressione e conversione in WebP in base al browser del visitatore. Questo approccio è particolarmente efficace per siti con un pubblico internazionale.

Serve aiuto con le performance?

Se il sito è lento e non sai da dove iniziare, il team di SoccorsoWP può analizzare le performance, ottimizzare le immagini e configurare caching e CDN per risultati immediati. Apri un ticket e velocizza il tuo sito.