ottimizzare le immagini WordPress

Per ottimizzare le immagini WordPress bisogna intervenire soprattutto su quattro elementi: dimensioni in pixel, peso del file, formato e modalità di caricamento. Caricare immagini più leggere, però, non significa necessariamente sacrificare la qualità: l’obiettivo è fornire al browser il file più adatto alla pagina evitando dati e risoluzioni inutili.

Le immagini possono infatti incidere in modo significativo sui tempi di caricamento, soprattutto quando vengono caricate direttamente dalla fotocamera, esportate con dimensioni eccessive o utilizzate in formati poco efficienti.

Un buon processo di ottimizzazione parte quindi prima del caricamento su WordPress e continua con compressione, immagini responsive, lazy loading e corretta gestione SEO.

Cosa significa ottimizzare le immagini su WordPress?

Ottimizzare un’immagine significa ridurre le risorse necessarie per visualizzarla mantenendo una qualità adeguata al contesto.

Non significa semplicemente comprimere il file il più possibile.

Bisogna trovare un equilibrio tra dimensioni, qualità visiva, formato e modo in cui l’immagine viene caricata dal browser.

WordPress aiuta già in questo processo generando automaticamente diverse dimensioni delle immagini caricate nella Libreria Media. In questo modo il browser può ricevere una versione più appropriata rispetto allo spazio disponibile.

Questo però non rende inutile una corretta preparazione del file originale.

Caricare una fotografia larga 6.000 pixel quando verrà visualizzata a 900 pixel significa comunque partire da una risorsa molto più grande del necessario.

Per questo l’ottimizzazione delle immagini dovrebbe far parte della normale gestione di un sito WordPress, non essere affrontata soltanto quando PageSpeed Insights segnala un problema.

Perché le immagini possono rallentare WordPress?

Il problema principale è la quantità di dati che il browser deve scaricare.

Una fotografia ad alta risoluzione può facilmente pesare diversi megabyte. Se nella stessa pagina vengono caricate numerose immagini di questo tipo, il peso complessivo aumenta rapidamente.

Succede soprattutto quando si utilizzano immagini con dimensioni molto superiori allo spazio in cui vengono mostrate, PNG per fotografie che potrebbero utilizzare formati più efficienti, file esportati alla qualità massima o immagini fuori dalla prima schermata caricate immediatamente.

Anche il comportamento apparentemente opposto può creare problemi: applicare il lazy loading all’immagine principale della pagina può ritardare il caricamento di una risorsa importante e peggiorare il Largest Contentful Paint.

La soluzione deve quindi considerare l’intero processo, non soltanto la compressione.

Come ottimizzare le immagini WordPress correttamente

Il sistema più efficace è intervenire sul file prima dell’upload e lasciare successivamente a WordPress e agli eventuali strumenti di ottimizzazione il compito di gestire le diverse versioni necessarie.

Ridimensiona l’immagine prima del caricamento

Il primo controllo riguarda la risoluzione.

Se un’immagine viene visualizzata all’interno di un contenitore largo circa 1.000 pixel, normalmente non serve caricare un originale largo 5.000 o 6.000 pixel.

Non esiste una dimensione universale valida per ogni sito perché dipende da layout, tema, densità dello schermo e posizione dell’immagine.

Come riferimento operativo, una hero a tutta larghezza può richiedere circa 1.600-1.920 pixel, mentre per un’immagine inserita nel corpo di un articolo possono spesso essere sufficienti 800-1.200 pixel. Per le immagini in evidenza, 1.200-1.600 pixel rappresentano frequentemente un intervallo adeguato.

Sono riferimenti, non regole rigide.

La domanda da farsi è sempre: quanto grande verrà realmente mostrata questa immagine?

WordPress genera inoltre automaticamente diverse dimensioni dell’immagine originale. Le impostazioni principali possono essere controllate in Impostazioni > Media.

La documentazione ufficiale di WordPress sulle impostazioni Media spiega come vengono gestite le dimensioni predefinite.

JPEG, PNG, WebP o AVIF: quale formato scegliere?

Il formato influenza direttamente il peso finale del file.

JPEG rimane adatto soprattutto alle fotografie e permette di ottenere un buon equilibrio tra qualità e dimensione.

PNG è particolarmente utile quando servono trasparenze o determinate caratteristiche grafiche, ma per fotografie complesse può generare file sensibilmente più pesanti.

WebP è uno dei formati più utilizzati sul web moderno e supporta compressione sia con perdita sia senza perdita.

AVIF è ancora più recente e può offrire un’elevata efficienza di compressione in diversi scenari.

WordPress supporta nativamente AVIF dalla versione 6.5, a condizione che il server disponga delle librerie necessarie per elaborare questo formato. La compatibilità può essere verificata da Strumenti > Salute del sito > Informazioni > Gestione media.

La documentazione del WordPress Core sul supporto AVIF contiene maggiori dettagli tecnici.

Non significa però che AVIF debba sostituire automaticamente qualsiasi altra soluzione.

Per molti siti WordPress, WebP rappresenta ancora un ottimo compromesso tra semplicità, compatibilità e compressione. Il formato migliore dipende dal tipo di immagine e dal risultato finale.

Conta molto più ottenere un’immagine nitida e leggera che utilizzare il formato più recente soltanto perché è tecnicamente più moderno.

Comprimi le immagini senza perdere qualità visibile

Dopo dimensioni e formato arriva la compressione.

La compressione lossless cerca di ridurre il peso preservando integralmente i dati dell’immagine, mentre quella lossy elimina parte delle informazioni per ottenere file più piccoli.

Per il web una compressione lossy moderata è spesso perfettamente accettabile, soprattutto sulle fotografie, perché permette di ridurre sensibilmente il peso senza produrre differenze visibili nell’utilizzo normale.

Non esiste però una percentuale di compressione ideale per ogni file.

Una fotografia, uno screenshot con molto testo e un’illustrazione richiedono impostazioni differenti.

Anche web.dev, nella documentazione dedicata alle performance delle immagini, consiglia di trovare un equilibrio tra qualità percepita e dimensione del file invece di applicare indiscriminatamente la stessa configurazione.

L’obiettivo non è ottenere il file più piccolo possibile, ma il file più leggero compatibile con la qualità realmente necessaria.

Utilizzare un plugin per ottimizzare le immagini WordPress

Quando un sito contiene molte immagini, gestire manualmente ogni file può diventare poco pratico.

Plugin come Imagify, ShortPixel, EWWW Image Optimizer o Optimole possono automatizzare operazioni come compressione, ridimensionamento, conversione in WebP o AVIF e ottimizzazione delle immagini già presenti nella Libreria Media.

Non esiste però un plugin migliore per qualsiasi sito.

La scelta dipende dalla quantità di immagini, dalla necessità di utilizzare una CDN, dai formati desiderati e soprattutto dagli strumenti già attivi.

Molti hosting, CDN e plugin di cache includono infatti funzioni di ottimizzazione delle immagini.

Prima di installare una nuova soluzione conviene quindi controllare ciò che il sito sta già utilizzando. Due sistemi che eseguono contemporaneamente conversione, lazy loading o ottimizzazione delle stesse risorse possono creare sovrapposizioni e complicare inutilmente la configurazione.

Un plugin dovrebbe completare un buon processo di gestione delle immagini, non essere utilizzato per compensare sistematicamente file originali enormi.

Lazy loading: utile, ma non per tutte le immagini

Il lazy loading permette di rinviare il caricamento delle immagini che non sono immediatamente visibili.

Su una pagina lunga può ridurre le risorse iniziali perché il browser non deve scaricare subito immagini che si trovano parecchio più in basso.

WordPress supporta nativamente il lazy loading delle immagini dalle versioni moderne del CMS. Il comportamento è stato inoltre progressivamente migliorato per evitare di ritardare alcune immagini che potrebbero trovarsi nella prima schermata.

Dalla versione 6.3 WordPress può anche aggiungere automaticamente fetchpriority="high" all’immagine che identifica come probabile candidata al Largest Contentful Paint.

Questo significa che non è sempre necessario aggiungere un ulteriore sistema di lazy loading attraverso un plugin.

Bisogna prima verificare come stanno lavorando WordPress, tema, page builder e plugin di performance.

In particolare, l’immagine principale immediatamente visibile non dovrebbe normalmente essere caricata in lazy loading quando rappresenta l’elemento LCP.

Google tratta questo aspetto nella documentazione su come ottimizzare il Largest Contentful Paint.

Controlla le immagini responsive

WordPress crea diverse versioni delle immagini e utilizza attributi come srcset per consentire al browser di scegliere il file più appropriato.

Questo è particolarmente importante sui dispositivi mobili.

Non avrebbe senso far scaricare a uno smartphone un’immagine larga 2.000 pixel quando lo spazio disponibile è molto inferiore.

Per questo è generalmente preferibile utilizzare le dimensioni generate da WordPress invece di forzare sempre la versione originale dell’immagine.

Tema e page builder devono però rispettare correttamente questo comportamento.

Google raccomanda anch’esso l’utilizzo delle immagini responsive attraverso tecniche come srcset e l’elemento <picture>.

È inoltre importante mantenere correttamente larghezza, altezza o rapporto d’aspetto delle immagini. In questo modo il browser può riservare in anticipo lo spazio necessario e ridurre gli spostamenti improvvisi del layout, con benefici sul Cumulative Layout Shift (CLS).

Ottimizza nome file e testo alternativo

Le immagini non devono essere ottimizzate soltanto per le prestazioni.

Prima del caricamento è consigliabile utilizzare un nome file comprensibile.

Un file chiamato:

IMG_5843.jpg

fornisce pochissimo contesto.

Un nome come:

ottimizzazione-immagini-wordpress.webp

è invece più descrittivo.

Il nome deve restare breve e naturale: non serve inserire sequenze di keyword.

Lo stesso vale per l’attributo alt.

Il testo alternativo deve descrivere il contenuto o la funzione dell’immagine quando questa informazione è utile. Il suo obiettivo principale non è ospitare keyword, ma rendere il contenuto comprensibile anche quando l’immagine non viene percepita direttamente.

Google utilizza l’alt text insieme al contenuto della pagina, al nome del file e agli altri elementi contestuali per comprendere le immagini. Nelle proprie best practice per Google Images, Google raccomanda inoltre di evitare il keyword stuffing.

L’alt text non lavora quindi isolatamente: anche il testo vicino all’immagine e il contesto generale della pagina contribuiscono a spiegarne il significato.

Quando un’immagine è solamente decorativa, invece, può essere corretto utilizzare un attributo alt vuoto anziché inventare una descrizione artificiale.

Quanto dovrebbe pesare un’immagine WordPress?

Non esiste una soglia SEO universale espressa in KB.

Dire che ogni immagine debba necessariamente pesare meno di 100 KB o 200 KB sarebbe una semplificazione eccessiva.

Come riferimento operativo, per molti siti aziendali può essere ragionevole cercare di mantenere una normale immagine editoriale nell’ordine di circa 80-180 KB quando la qualità lo permette, mentre un’immagine principale più ampia potrebbe arrivare a circa 150-300 KB.

Questi valori sono riferimenti pratici e non regole stabilite da Google.

Una fotografia particolarmente complessa potrebbe richiedere più dati. Una grafica semplice potrebbe invece pesare molto meno.

Il criterio corretto è trasferire il minor numero di dati possibile mantenendo la qualità richiesta dal contenuto.

Meglio un’immagine nitida da 220 KB che una da 70 KB con evidenti artefatti di compressione.

Come capire quali immagini stanno rallentando WordPress

Prima di modificare tutta la Libreria Media, conviene identificare le risorse che incidono realmente sulle pagine più importanti.

Google PageSpeed Insights può aiutare a individuare immagini sovradimensionate, risorse che potrebbero essere caricate in modo più efficiente e problemi legati al Largest Contentful Paint.

Anche gli strumenti per sviluppatori del browser sono molto utili: attraverso il pannello Network è possibile filtrare le richieste delle immagini e controllare dimensione trasferita, formato realmente ricevuto e ordine di caricamento.

È importante verificare il risultato direttamente sul frontend.

Attivare WebP o AVIF all’interno di un plugin, per esempio, non garantisce automaticamente che il browser stia realmente ricevendo quella versione dell’immagine.

Bisogna controllarlo.

Se il problema interessa l’intero sito e non soltanto le immagini, può essere utile intervenire più ampiamente sulla manutenzione del sito WordPress e analizzare anche cache, plugin, database e altre risorse.

Gli errori più comuni nell’ottimizzazione delle immagini

Uno degli errori più frequenti è pensare che convertire tutto in WebP risolva automaticamente qualsiasi problema.

Un’immagine WebP larga 5.000 pixel può comunque essere inutilmente pesante.

Lo stesso vale per il lazy loading: applicarlo ovunque senza controllare quali risorse sono visibili immediatamente può avere l’effetto opposto rispetto a quello desiderato.

Altri problemi frequenti sono l’utilizzo indiscriminato del PNG, la compressione eccessiva, l’impiego sistematico della dimensione originale, l’installazione di più sistemi di ottimizzazione sovrapposti e l’inserimento forzato di keyword negli attributi alt.

Anche concentrarsi esclusivamente sul punteggio PageSpeed può essere fuorviante.

L’obiettivo non è ottenere un numero perfetto, ma migliorare concretamente la quantità di dati trasferiti e la velocità con cui vengono caricati gli elementi importanti della pagina.

Un workflow semplice per ottimizzare le immagini WordPress

Seguire sempre lo stesso processo permette di ottimizzare le immagini WordPress già durante la pubblicazione, evitando di dover correggere in seguito centinaia di file.

  1. Scegli o crea l’immagine necessaria.
  2. Ritagliala nel rapporto corretto per il punto in cui verrà utilizzata.
  3. Ridimensionala in base allo spazio effettivamente disponibile.
  4. Esportala in WebP, AVIF, JPEG o nel formato più appropriato.
  5. Applica una compressione equilibrata.
  6. Assegna un nome file breve e descrittivo.
  7. Carica l’immagine nella Libreria Media di WordPress.
  8. Inserisci un testo alternativo quando necessario.
  9. Utilizza una dimensione WordPress coerente con lo spazio della pagina.
  10. Verifica sul frontend quale file e quale formato vengono realmente caricati.
  11. Controlla periodicamente le pagine più importanti con PageSpeed Insights.

In questo modo l’ottimizzazione diventa parte del processo di pubblicazione anziché un intervento straordinario da affrontare quando il sito è già diventato pesante.

Quando ottimizzare le immagini non basta

Le immagini possono avere un impatto importante sulle prestazioni, ma non sono l’unica possibile causa di un sito WordPress lento.

Se dopo averle ridimensionate e compresse correttamente le prestazioni rimangono scarse, bisogna analizzare anche hosting, cache, plugin, tema, JavaScript, CSS, font, database e risorse esterne.

In queste situazioni installare un altro plugin per comprimere le immagini difficilmente risolve il problema.

Serve individuare il vero collo di bottiglia.

Se le immagini sono già ottimizzate ma WordPress continua a essere lento, posso analizzare configurazione, plugin, tema e risorse caricate dalle pagine per individuare gli interventi realmente prioritari attraverso una consulenza WordPress.

Domande frequenti sull’ottimizzazione delle immagini WordPress

È meglio WebP o AVIF per WordPress?

Entrambi sono formati efficienti. WebP rappresenta spesso un ottimo equilibrio tra compressione e semplicità, mentre AVIF può produrre file molto efficienti in diversi scenari. WordPress supporta AVIF dalla versione 6.5 quando il server dispone delle librerie necessarie.

Qual è il miglior plugin per ottimizzare le immagini WordPress?

Non esiste un plugin migliore per ogni sito. La scelta dipende dalla quantità di immagini, dalla necessità di WebP o AVIF, dall’eventuale CDN e dagli strumenti già inclusi nell’hosting o nel plugin di cache. È soprattutto importante evitare sistemi duplicati che elaborano contemporaneamente le stesse immagini.

Quanto devono pesare le immagini su WordPress?

Non esiste un limite universale. Un’immagine deve essere il più leggera possibile mantenendo una qualità adeguata. Il peso corretto dipende da risoluzione, contenuto, formato e posizione all’interno della pagina.

Bisogna usare il lazy loading su tutte le immagini?

No. È particolarmente utile per le immagini che si trovano fuori dalla prima schermata. Un’immagine importante immediatamente visibile, soprattutto quando rappresenta il Largest Contentful Paint, non dovrebbe normalmente essere ritardata con il lazy loading.

L’alt text migliora il posizionamento delle immagini?

Il testo alternativo aiuta i motori di ricerca a comprendere il contenuto dell’immagine insieme al contesto della pagina e svolge soprattutto un’importante funzione di accessibilità. Deve descrivere l’immagine in modo naturale, senza ripetere artificialmente keyword.

Posso ottimizzare anche immagini già caricate su WordPress?

Sì. Diversi plugin permettono di comprimere o convertire in blocco le immagini già presenti nella Libreria Media. Prima di procedere è comunque consigliabile effettuare un backup e verificare come vengono gestiti originali, miniature e nuove versioni generate.