Ottimizzare le immagini per WordPress

Le immagini sono quasi sempre la parte più pesante di una pagina WordPress. Su un sito tipico, le immagini rappresentano il 50-80% del peso totale della pagina, e non è raro vedere una singola immagine hero non ottimizzata pesare più di tutto l'HTML, il CSS e il JavaScript combinati. Se il tuo sito sembra lento, le immagini sono il primo posto in cui guardare. La buona notizia è che l'ottimizzazione delle immagini offre alcuni dei più grandi e diretti miglioramenti delle prestazioni che puoi ottenere.

Perché le immagini sono il principale fattore di peso della pagina

Una moderna fotocamera di smartphone produce foto che pesano 3-8 MB ciascuna. Se le carichi direttamente su WordPress senza alcuna elaborazione, è ciò che i tuoi visitatori devono scaricare. Moltiplica questo per 5-10 immagini su una pagina e stai guardando 30-80 MB di dati immagine, sufficienti a far sentire lente anche le connessioni veloci.

Il peso della pagina influisce direttamente sul tempo di caricamento, che influisce sull'esperienza utente e sulla SEO. Google utilizza la velocità della pagina come fattore di ranking, e i Core Web Vitals (soprattutto Largest Contentful Paint) sono fortemente influenzati dalle dimensioni dell'immagine. Ogni kilobyte che tagli dalle tue immagini si traduce in tempi di caricamento più rapidi, minori bounce rate e migliori posizionamenti nei motori di ricerca.

Scegliere il formato immagine giusto

Il formato che scegli per ogni immagine può fare una drammatica differenza nella dimensione del file. Ecco quando usare quale formato:

• WebP: Il miglior formato generico per le immagini web di oggi. WebP offre file 25-35% più piccoli rispetto a JPEG con la stessa qualità visiva e supporta sia la compressione lossy che lossless e la trasparenza. Tutti i browser moderni supportano WebP (Chrome, Firefox, Safari 14+, Edge). A meno che tu non debba supportare browser molto vecchi, WebP dovrebbe essere la tua scelta predefinita.
• AVIF: Il formato più recente, che offre file 20-30% più piccoli rispetto a WebP. AVIF produce risultati eccellenti a impostazioni di bassa qualità, rendendolo ideale per grandi immagini hero dove ogni kilobyte conta. Il supporto dei browser è in crescita (Chrome, Firefox, Safari 16.4+), ma la codifica è più lenta di WebP. Usalo dove la massima compressione conta e puoi permetterti il tempo di codifica.
• JPEG: Ancora il formato più ampiamente supportato e una scelta solida per le foto. Usa impostazioni di qualità tra l'80-85% per un buon equilibrio tra dimensione del file e qualità visiva. Sotto il 75%, gli artefatti di compressione diventano evidenti. Sopra il 90%, il miglioramento della qualità è appena visibile ma l'aumento della dimensione del file è significativo.
• PNG: Usa PNG solo quando hai bisogno di trasparenza (loghi, icone con sfondo trasparente) o riproduzione pixel-perfect (screenshot, diagrammi). I file PNG sono in genere 3-5 volte più grandi di JPEG/WebP per contenuti fotografici. Se hai bisogno di trasparenza e vuoi file più piccoli, considera WebP con canale alpha.
• SVG: Perfetto per loghi, icone e illustrazioni semplici. Gli SVG sono basati su vettori, quindi scalano a qualsiasi dimensione senza perdita di qualità e in genere pesano solo pochi kilobyte. Sono anche stilizzabili con CSS. Non usare SVG per le foto.

Comprendere la compressione delle immagini: lossy vs lossless

Esistono due tipi fondamentali di compressione, e comprendere la differenza ti aiuta a prendere migliori decisioni di ottimizzazione:

La compressione lossy rimuove i dati dell'immagine meno percettibili all'occhio umano. Questo raggiunge rapporti di compressione molto più elevati (spesso il 70-90% di riduzione della dimensione del file), ma il processo è irreversibile. Non puoi recuperare la qualità originale. Per le immagini web, la compressione lossy al giusto livello di qualità è quasi sempre la scelta giusta, perché i risparmi sulla dimensione del file sono enormi e la differenza di qualità è invisibile a tipiche distanze di visualizzazione dello schermo.

La compressione lossless riduce la dimensione del file senza eliminare dati. L'immagine originale può essere ricostruita perfettamente. Il compromesso è che la compressione lossless in genere raggiunge solo il 10-30% di riduzione della dimensione del file. Usa la compressione lossless per immagini in cui ogni pixel conta, come la fotografia di prodotto per le viste di zoom nell'e-commerce, l'imaging medico o gli screenshot di testo.

Per la maggior parte dei siti WordPress, un'impostazione di compressione lossy all'80-85% di qualità offre un eccellente equilibrio. A questo livello, la differenza visiva rispetto all'originale è praticamente non rilevabile, ma la dimensione del file è in genere inferiore del 60-75%.

Dimensioni immagine consigliate per WordPress

Caricare immagini più grandi del necessario spreca larghezza di banda e rallenta il tuo sito. Ecco linee guida pratiche per le dimensioni comuni delle immagini WordPress:

• Immagini hero a tutta larghezza: 1920px di larghezza è sufficiente per la maggior parte degli schermi. Andare a 2560px è ragionevole se vuoi coprire schermi high-DPI (Retina) a piena larghezza.
• Immagini in evidenza per post del blog: 1200px di larghezza copre la maggior parte dei layout dei temi e appare nitida su schermi Retina.
• Immagini di contenuto all'interno dei post: Adatta alla larghezza della colonna di contenuto del tuo tema. Se la tua area di contenuto è larga 800px, carica immagini a 1600px (2x per Retina).
• Thumbnail e immagini di archivio: 600x400px è una dimensione comune, ma controlla cosa usa effettivamente il tuo tema.
• Immagini prodotto WooCommerce: 800-1200px sul lato più lungo, a seconda che il tuo tema supporti lo zoom.

Non ha senso caricare un'immagine 6000px se la più grande visualizzazione sarà mai 1920px. Ridimensiona prima di caricare, o usa un plugin che ridimensiona al caricamento.

Dimensioni immagini WordPress e rigenerazione

Quando carichi un'immagine, WordPress genera automaticamente più dimensioni: thumbnail (150x150), medium (300x300), medium_large (768px di larghezza) e large (1024x1024). Il tuo tema e i tuoi plugin possono registrare dimensioni aggiuntive.

Puoi visualizzare e regolare le dimensioni predefinite in Impostazioni, poi Media. Se modifichi queste dimensioni dopo aver caricato immagini, le miniature esistenti non vengono aggiornate automaticamente. Devi rigenerarle utilizzando un plugin come Regenerate Thumbnails o tramite WP-CLI:

# Rigenera tutte le miniature
wp media regenerate --yes

# Rigenera le miniature per un'immagine specifica
wp media regenerate 42

Se il tuo tema registra dimensioni immagine personalizzate che usi raramente, quelle dimensioni inutili sprecano spazio su disco e tempo di elaborazione ad ogni upload. Puoi usare il plugin Stop Generating Unnecessary Thumbnails per disabilitare le dimensioni di cui non hai bisogno.

Plugin di ottimizzazione delle immagini

Il modo più semplice per ottimizzare le immagini in WordPress è con un plugin dedicato che comprime automaticamente le immagini al caricamento. Ecco le opzioni più popolari:

• ShortPixel Image Optimizer: Offre modalità di compressione lossy, glossy e lossless. Include la conversione WebP e AVIF. Funziona tramite un'API cloud, quindi non grava sul tuo server. Il piano gratuito include 100 crediti al mese (un credito per dimensione di immagine generata). La modalità glossy è particolarmente buona, in quanto offre una qualità visiva quasi lossless con dimensioni di file lossy.
• Imagify: Costruito dallo stesso team di WP Rocket. Offre modalità Normal (lossless), Aggressive (lossy) e Ultra (massima compressione). Include la conversione WebP e uno strumento di ottimizzazione in blocco. L'interfaccia è pulita e facile da capire. Il piano gratuito include 20 MB al mese.
• Smush: Opzione gratuita popolare che offre la compressione lossless senza limite mensile. La versione gratuita comprime immagini fino a 5 MB e gestisce l'ottimizzazione in blocco fino a 50 immagini alla volta. La versione Pro aggiunge la compressione lossy, la conversione WebP e la consegna CDN.
• EWWW Image Optimizer: Unico in quanto può eseguire la compressione localmente sul tuo server senza un'API esterna. Buona scelta per siti con problemi di privacy o grandi volumi. Supporta la conversione WebP, il lazy loading e il ridimensionamento automatico delle immagini. La modalità basata su API offre rapporti di compressione migliori.

Tutti questi plugin possono anche ottimizzare immagini caricate prima dell'installazione del plugin. Cerca la funzione "bulk optimize" per elaborare la tua libreria multimediale esistente.

Convertire le immagini in WebP

Se stai ancora servendo file JPEG e PNG, convertirli in WebP è una delle vittorie più facili. La maggior parte dei plugin di ottimizzazione delle immagini include la conversione WebP come funzione integrata. Generano una versione WebP accanto all'originale e la servono ai browser che la supportano.

Per la conversione manuale in WebP, puoi usare strumenti da riga di comando:

# Converti una singola immagine in WebP
cwebp -q 80 input.jpg -o output.webp

# Bulk-convert tutti i JPEG in una directory
for file in *.jpg; do cwebp -q 80 "$file" -o "${file%.jpg}.webp"; done

Per servire immagini WebP ai browser che le supportano con JPEG/PNG come fallback per i browser più vecchi, puoi aggiungere quanto segue al tuo file .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.+).(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule (.+).(jpe?g|png)$ $1.$2.webp [T=image/webp,E=REQUEST_image]
</IfModule>

Lazy loading delle immagini in WordPress

Il lazy loading ritarda il caricamento delle immagini che non sono attualmente visibili nel viewport del browser. Invece di scaricare tutte le immagini quando la pagina viene caricata per la prima volta, il browser recupera le immagini solo quando l'utente scorre verso di esse. Questo può ridurre drasticamente il tempo di caricamento iniziale della pagina, in particolare su pagine con molte immagini.

Dalla versione 5.5 di WordPress, la piattaforma aggiunge automaticamente loading="lazy" alle immagini. Questo lazy loading nativo del browser è supportato da tutti i browser moderni e non richiede JavaScript.

Ci sono alcuni punti importanti da tenere a mente:

• Non fare lazy-loading delle immagini above-the-fold: La tua immagine hero, il logo e tutte le immagini visibili senza scorrere dovrebbero caricarsi immediatamente. Il lazy-loading di queste immagini danneggia effettivamente le prestazioni perché il browser ritarda il caricamento di contenuti che l'utente può già vedere. Dalla versione 5.9 di WordPress, la piattaforma salta automaticamente il lazy loading per la prima immagine sulla pagina.
• Usa fetchpriority="high" per le immagini hero: Aggiungere fetchpriority="high" alla tua immagine above-the-fold più importante dice al browser di dare priorità al suo download. Questo può migliorare significativamente i punteggi Largest Contentful Paint.
• Controlla che il tuo tema non rimuova il lazy loading: Alcuni temi più vecchi o page builder rimuovono l'attributo loading. Controlla il sorgente della tua pagina per confermare che sia presente.

Immagini responsive con srcset

WordPress genera automaticamente gli attributi srcset e sizes per le immagini aggiunte tramite l'editor di contenuti. Questi attributi indicano al browser quale dimensione dell'immagine scaricare in base alla larghezza del viewport, in modo che un utente mobile scarichi un'immagine più piccola rispetto a un utente desktop.

Assicurati che il tuo tema non sovrascriva questo comportamento. Un tag immagine responsive configurato correttamente appare così:

<img src="photo-1024.jpg"
     srcset="photo-300.jpg 300w, photo-768.jpg 768w, photo-1024.jpg 1024w, photo-1536.jpg 1536w"
     sizes="(max-width: 768px) 100vw, 800px"
     width="1024" height="768"
     loading="lazy"
     alt="Un testo alt descrittivo" />

Se stai aggiungendo immagini tramite codice personalizzato o un page builder, usa wp_get_attachment_image() invece di scrivere manualmente tag <img>. Questa funzione include automaticamente gli attributi srcset e sizes.

Usare un CDN per la consegna delle immagini

Una Content Delivery Network (CDN) memorizza copie delle tue immagini su server in tutto il mondo e le consegna dalla posizione più vicina a ciascun visitatore. Questo riduce la latenza e accelera la consegna delle immagini, in particolare per i visitatori lontani dal tuo server di hosting.

Le opzioni CDN popolari per le immagini WordPress includono:

• Cloudflare: Il piano gratuito include una CDN con copertura globale. Il piano Pro aggiunge funzionalità di ottimizzazione delle immagini come Polish (compressione automatica) e conversione WebP.
• BunnyCDN: Prezzi pay-as-you-go convenienti con prestazioni eccellenti. Include una funzione di ottimizzazione delle immagini chiamata Bunny Optimizer che gestisce il ridimensionamento, la compressione e la conversione WebP al volo.
• KeyCDN: CDN developer-friendly con plugin di integrazione WordPress disponibili.

La maggior parte dei plugin di caching (WP Rocket, LiteSpeed Cache, W3 Total Cache) include impostazioni di integrazione CDN che rendono semplice la configurazione.

SEO delle immagini: testo alt e nomi file

L'ottimizzazione delle immagini non riguarda solo la dimensione del file. Buone pratiche SEO aiutano le tue immagini ad apparire nella Ricerca Immagini di Google, che può portare traffico significativo:

• Testo alt: Scrivi testo alt descrittivo per ogni immagine. Questo aiuta i motori di ricerca a comprendere il contenuto dell'immagine ed è essenziale per l'accessibilità (screen reader). Mantienilo conciso ma descrittivo: "Scarpe da corsa rosse su sfondo bianco" è meglio di "scarpe" o "IMG_4532".
• Nomi file: Rinomina i file immagine prima di caricarli. Usa nomi descrittivi separati da trattini come scarpe-corsa-rosse.jpg invece di DSC_0042.jpg. I motori di ricerca usano i nomi file come segnale di ranking per la ricerca immagini.
• Attributi title: Meno importanti del testo alt per la SEO, ma utili per fornire contesto aggiuntivo al passaggio del mouse in alcuni browser.
• Didascalie: Le didascalie delle immagini sono lette più spesso del testo del corpo da molti visitatori. Usale quando aggiungono valore al contenuto.

Verifica la tua ottimizzazione delle immagini con InspectWP

Dopo aver ottimizzato le tue immagini, esegui una scansione InspectWP per controllare i risultati. InspectWP riporta il numero totale di immagini sulla tua pagina e ti aiuta a identificare come il conteggio delle immagini e il peso della pagina si confrontano con le tue metriche di prestazioni complessive. Usa la funzione di reporting automatico di InspectWP per monitorare l'ottimizzazione delle tue immagini nel tempo e rilevare regressioni dopo aggiornamenti di contenuto o modifiche ai plugin.