Come ottimizzare le immagini WordPress: formati WebP, AVIF e lazy loading
Le immagini rappresentano in media il 50-70% del peso totale di una pagina web. Un sito WordPress con immagini non ottimizzate carica più lentamente, consuma più banda e penalizza i Core Web Vitals, in particolare il Largest Contentful Paint (LCP). In questa guida ti mostro come ottimizzare le immagini del tuo sito usando formati moderni, compressione intelligente e lazy loading.
Perché le immagini rallentano WordPress
Quando carichi un’immagine nella libreria media di WordPress, il sistema genera automaticamente diverse dimensioni (thumbnail, medium, large, full). Ma non applica compressione aggressiva né converte in formati moderni. Il risultato sono pagine con megabyte di immagini in formato JPEG o PNG non ottimizzato.
I problemi più comuni:
- Immagini troppo grandi: caricare foto da 4000×3000 pixel per mostrarle a 800×600 spreca banda.
- Formato sbagliato: PNG usato per fotografie (dovrebbe essere JPEG) o JPEG per grafiche con trasparenza (dovrebbe essere PNG o WebP).
- Nessuna compressione: immagini dirette dalla fotocamera senza alcuna ottimizzazione.
- Troppe immagini caricate subito: tutte le immagini della pagina vengono scaricate anche se l’utente non scorre fino in fondo.
Formati moderni: WebP e AVIF
I formati di immagine moderni offrono una compressione molto superiore ai tradizionali JPEG e PNG:
WebP (sviluppato da Google):
- Riduce il peso delle immagini del 25-35% rispetto a JPEG a parità di qualità visiva.
- Supporta trasparenza (come PNG) e animazioni (come GIF).
- Supportato da tutti i browser moderni (Chrome, Firefox, Safari, Edge).
- È il formato consigliato come standard per il web nel 2026.
AVIF (basato su AV1):
- Compressione ancora migliore di WebP: 30-50% più leggero di JPEG.
- Qualità visiva superiore, specialmente a bitrate bassi.
- Supportato da Chrome, Firefox e Safari (dalla versione 16).
- Tempi di codifica più lunghi rispetto a WebP, quindi la generazione è più lenta.
La strategia ideale è servire AVIF ai browser che lo supportano, WebP come fallback e JPEG/PNG per i browser più vecchi.
Plugin per la conversione automatica
Convertire manualmente ogni immagine sarebbe impraticabile. Ecco i migliori plugin che lo fanno automaticamente:
ShortPixel Image Optimizer:
- Comprime e converte in WebP e AVIF automaticamente al caricamento.
- 100 crediti gratuiti al mese (circa 100 immagini).
- Tre livelli di compressione: Lossy, Glossy e Lossless.
- Ottimizza anche le immagini già presenti nella libreria media (bulk optimization).
Imagify:
- Dello stesso team di WP Rocket, integrazione perfetta.
- Conversione WebP automatica con servizio dell’immagine tramite regole .htaccess o tag <picture>.
- 20 MB gratuiti al mese.
EWWW Image Optimizer:
- Compressione locale (sul tuo server) senza limiti nella versione gratuita.
- Conversione WebP gratuita.
- AVIF disponibile nella versione premium.
- Ideale per chi non vuole dipendere da servizi cloud.
Lazy loading: caricare solo il necessario
Il lazy loading ritarda il caricamento delle immagini che non sono visibili nella viewport del browser. Quando l’utente scorre la pagina, le immagini vengono caricate man mano che entrano nel campo visivo.
A partire da WordPress 5.5, il lazy loading nativo è attivo di default tramite l’attributo loading=”lazy” aggiunto automaticamente alle immagini. Questo funziona bene per la maggior parte dei casi.
Attenzione al LCP: l’immagine principale della pagina (hero image, immagine in evidenza) non dovrebbe avere lazy loading perché è l’elemento LCP. Se viene caricata in ritardo, il punteggio LCP peggiora. WordPress dalla versione 6.3 esclude automaticamente la prima immagine dal lazy loading, ma verifica che sia così nel tuo tema.
Ridimensionare le immagini prima del caricamento
La compressione non basta se carichi immagini con dimensioni eccessive. Una foto da 5000×4000 pixel compressa in WebP resta comunque troppo grande se viene mostrata a 800×600.
Regola pratica: l’immagine non dovrebbe mai essere più larga del doppio della dimensione di visualizzazione. Se il tuo contenuto è largo 800 pixel, carica immagini da massimo 1600 pixel di larghezza (per supportare schermi Retina).
Puoi configurare WordPress per limitare automaticamente la dimensione massima. Aggiungi a functions.php:
add_filter('big_image_size_threshold', function() { return 2048; });
Questo ridimensiona automaticamente le immagini più larghe di 2048 pixel al caricamento.
Ottimizzare le immagini già caricate
Se hai un sito con migliaia di immagini non ottimizzate, puoi ottimizzarle in massa:
- Installa ShortPixel, Imagify o EWWW Image Optimizer.
- Vai alla sezione Bulk Optimization del plugin.
- Avvia l’ottimizzazione di massa. Il plugin processerà tutte le immagini nella libreria media.
- Attiva la conversione WebP/AVIF durante il processo.
Nota: su siti con migliaia di immagini, l’ottimizzazione in massa può richiedere ore e consumare risorse del server. Eseguila in orari di basso traffico.
Servire le immagini WebP/AVIF
Dopo aver generato le versioni WebP e AVIF, devi configurare il server per servirle ai browser compatibili. I plugin lo fanno automaticamente in due modi:
- Tag <picture>: il plugin modifica l’HTML per usare il tag <picture> con source multiple (AVIF, WebP, JPEG). Il browser sceglie il formato migliore che supporta.
- Regole .htaccess/Nginx: il server rileva il browser tramite l’header Accept e serve automaticamente WebP o AVIF se disponibili, senza modificare l’HTML.
Il metodo .htaccess è più efficiente perché funziona anche con le immagini nel CSS e non modifica l’HTML.
Serve assistenza?
Ottimizzare le immagini di un sito WordPress con migliaia di file richiede tempo e configurazione corretta. Se vuoi migliorare le prestazioni del tuo sito senza rischiare problemi di qualità visiva, il team di SoccorsoWP può occuparsi di tutto. Apri un ticket e velocizza il tuo sito.
