Come ottimizzare le immagini WordPress per velocizzare il sito: guida completa

Le immagini sono quasi sempre il contenuto più pesante di una pagina web. Su un sito WordPress medio, rappresentano tra il 60% e l’80% del peso totale della pagina. Caricare foto non ottimizzate significa costringere ogni visitatore a scaricare megabyte di dati inutili, rallentando il caricamento e peggiorando l’esperienza utente. In questa guida ti spiego come ottimizzare le immagini WordPress in modo completo: dalla compressione al formato giusto, dal lazy loading al dimensionamento corretto, per un sito che carica veloce senza sacrificare la qualità visiva.

Quanto pesano davvero le immagini non ottimizzate

Per capire l’impatto, facciamo un esempio concreto. Una foto scattata con uno smartphone moderno pesa tipicamente 3-8 MB e ha dimensioni di 4000×3000 pixel o più. Se la carichi così su WordPress per mostrarla in un articolo largo 800 pixel, stai costringendo il browser a:

• Scaricare 5 MB quando basterebbero 80-150 KB con una versione ottimizzata.
• Ridimensionare l’immagine nel browser, consumando CPU e rallentando il rendering.
• Bloccare il caricamento degli altri contenuti della pagina, perché il browser dedica banda all’immagine pesante.

Moltiplica questo per 5-10 immagini per pagina e il risultato è un sito che impiega 8-15 secondi a caricarsi, quando potrebbe farlo in 2-3. Google penalizza attivamente i siti lenti attraverso i Core Web Vitals, quindi il peso delle immagini impatta direttamente anche sul posizionamento SEO.

Ridimensionare le immagini prima di caricarle

Il primo passo è il più semplice e anche il più trascurato: non caricare mai immagini più grandi del necessario. Per la maggior parte dei siti WordPress, la larghezza massima utile è:

• Immagini nel contenuto: 1200 pixel di larghezza sono più che sufficienti anche su schermi Retina.
• Immagini hero/header full-width: 1600-1920 pixel.
• Thumbnail e miniature: 300-600 pixel.

Puoi ridimensionare le immagini prima del caricamento usando strumenti gratuiti come Squoosh (web app di Google), IrfanView (Windows) o Anteprima su Mac. Bastano pochi secondi per ridurre una foto da 5 MB a meno di 200 KB. Questa sola operazione può velocizzare il tuo sito più di qualsiasi plugin di ottimizzazione. Stabilisci una regola: nessuna immagine superiore a 200 KB dovrebbe mai entrare nella libreria media.

Compressione: ridurre il peso senza perdere qualità

Dopo il ridimensionamento, la compressione riduce ulteriormente il peso eliminando dati che l’occhio umano non percepisce. Esistono due tipi:

• Lossy (con perdita): riduce il peso del 60-80% con una perdita di qualità impercettibile nella maggior parte dei casi. È il metodo consigliato per le foto.
• Lossless (senza perdita): riduce il peso del 10-30% senza alcuna perdita di qualità. Ideale per screenshot, grafiche con testo e immagini tecniche.

I migliori plugin WordPress per la compressione automatica:

• ShortPixel: comprime automaticamente ogni immagine al caricamento, supporta lossy, glossy e lossless. Offre 100 crediti gratuiti al mese.
• Imagify: stesso principio, con un’interfaccia molto intuitiva e la possibilità di ottimizzare in bulk tutte le immagini già presenti nella libreria media.
• Smush: versione gratuita generosa ma compressione leggermente meno aggressiva rispetto ai concorrenti.

Il vantaggio di questi plugin è che lavorano in automatico: una volta configurati, ogni immagine caricata viene compressa senza che tu debba fare nulla.

Formato WebP: il futuro è adesso

Il formato WebP, sviluppato da Google, offre la stessa qualità visiva del JPEG con un peso inferiore del 25-35%. Tutti i browser moderni lo supportano (Chrome, Firefox, Safari, Edge) e WordPress lo supporta nativamente dalla versione 5.8.

Come implementarlo:

• Plugin di compressione: ShortPixel, Imagify e Smush possono convertire automaticamente le immagini in WebP al momento del caricamento, servendo la versione WebP ai browser compatibili e il JPEG come fallback.
• CDN: servizi come Cloudflare convertono automaticamente le immagini in WebP (e persino AVIF) senza bisogno di plugin, tramite la funzione Polish.

Se il tuo sito ha una libreria media di centinaia o migliaia di immagini, la conversione in bulk a WebP può ridurre lo spazio occupato del 30% e velocizzare significativamente il caricamento di tutte le pagine.

Lazy loading: caricare solo ciò che serve

Il lazy loading è una tecnica che ritarda il caricamento delle immagini fino a quando il visitatore non scrolla fino alla loro posizione nella pagina. Invece di scaricare tutte le 20 immagini di un articolo al primo accesso, il browser ne carica solo 2-3 visibili sopra la piega e le altre man mano che servono.

WordPress include il lazy loading nativo dalla versione 5.5 attraverso l’attributo loading=”lazy” aggiunto automaticamente alle immagini. Tuttavia, ci sono accorgimenti importanti:

• Non applicare il lazy loading all’immagine hero/LCP: l’immagine principale visibile al primo caricamento (Largest Contentful Paint) deve caricarsi immediatamente. Se viene ritardata dal lazy loading, peggiora il punteggio LCP nei Core Web Vitals.
• Specifica sempre width e height: senza dimensioni esplicite, il browser non può riservare lo spazio e la pagina “salta” quando l’immagine appare (layout shift, che penalizza il CLS).

Plugin come Perfmatters e FlyingPress offrono un controllo più fine sul lazy loading, permettendoti di escludere le prime N immagini dalla pagina.

Dimensioni responsive con srcset

WordPress genera automaticamente diverse dimensioni di ogni immagine caricata (thumbnail, medium, large, full) e utilizza l’attributo srcset per permettere al browser di scegliere la versione più adatta al dispositivo. Questo significa che un visitatore da smartphone scarica una versione più piccola rispetto a chi naviga da desktop.

Per sfruttare al meglio questa funzionalità:

• Non forzare dimensioni fisse nel CSS: lascia che il browser scelga la dimensione appropriata dal srcset.
• Verifica le dimensioni generate: in Impostazioni → Media puoi controllare e modificare le dimensioni predefinite di WordPress (thumbnail, medium, large).
• Non disabilitare la generazione di dimensioni: alcuni tutorial consigliano di disattivare le dimensioni intermedie per risparmiare spazio, ma questo elimina il vantaggio del responsive loading.
• Aggiungi dimensioni custom se necessario: se il tuo tema usa dimensioni specifiche (ad esempio 800×450 per le card), registrale in functions.php con add_image_size() per generarle automaticamente al caricamento.

Ottimizzare le immagini già presenti nel sito

Se hai un sito con centinaia di immagini già caricate e non ottimizzate, non devi ricaricarle una per una. I plugin di ottimizzazione offrono la funzione di bulk optimization:

1. Installa ShortPixel o Imagify.
2. Vai nella sezione Bulk Optimization del plugin.
3. Avvia il processo: il plugin ottimizzerà tutte le immagini nella libreria media, incluse le miniature generate da WordPress.
4. Il processo può richiedere tempo per librerie grandi (migliaia di immagini), ma viene eseguito in background senza impattare il sito.

Prima di avviare la bulk optimization, assicurati di avere un backup delle immagini originali. La maggior parte dei plugin conserva una copia dell’originale per permettere il ripristino, ma un backup indipendente è sempre una buona pratica.

Hai bisogno di ottimizzare le immagini del tuo sito? Ti aiutiamo noi

Se il tuo sito WordPress ha migliaia di immagini non ottimizzate e non sai da dove cominciare, o se vuoi un intervento professionale che copra compressione, conversione WebP, lazy loading e configurazione CDN tutto insieme, il team di SoccorsoWP può occuparsene per te. Ottimizziamo le immagini e la performance complessiva del tuo sito con risultati misurabili. Apri un ticket e velocizza il tuo sito WordPress.