Comprimere immagini senza perdere qualità: guida WordPress

Hai scattato foto bellissime, le hai caricate sul sito e ora le pagine si aprono lentamente? Molto spesso il colpevole sono le immagini. Imparare a comprimere le immagini è una delle cose più utili che puoi fare per un sito veloce, e non serve essere tecnici: bastano uno strumento gratuito e qualche accorgimento. In questa guida vediamo come ottimizzare le immagini per il web, con esempi pratici anche per WordPress.

Perché le immagini pesanti rallentano il sito

Su quasi tutti i siti le immagini sono la parte che pesa di più. Una foto scattata con lo smartphone può superare i 4 o 5 MB: se ne metti cinque in una pagina, il visitatore deve scaricare decine di megabyte prima di vedere tutto. Con una connessione mobile non perfetta, l'attesa si sente.

Google se ne accorge. Nei suoi strumenti di misura della velocità, come PageSpeed Insights, c'è un indicatore chiamato LCP (Largest Contentful Paint). In parole semplici: è il tempo che passa prima che compaia la parte più grande della pagina, spesso proprio l'immagine in alto. Fa parte dei cosiddetti Core Web Vitals, i valori con cui Google valuta l'esperienza di chi visita un sito. Se quella foto è enorme, l'LCP peggiora.

Comprimere le immagini non garantisce una posizione migliore su Google, ma rende il sito più piacevole da usare.

Compressione con perdita e senza perdita

Esistono due modi di comprimere un'immagine.

Senza perdita (lossless): il file viene riscritto in modo più efficiente, ma ogni pixel resta identico. Il risparmio è modesto, in genere dal 5 al 30%.
Con perdita (lossy): vengono eliminate piccole differenze di colore che l'occhio fa fatica a notare. Il risparmio può essere molto più grande, anche oltre il 70%, ma se esageri compaiono sfocature e macchie.

Per le foto, la compressione con perdita a qualità moderata è quasi sempre la scelta giusta: a occhio il risultato sembra identico all'originale, ma il file pesa una frazione. Per loghi, schemi e immagini con testo nitido conviene stare più prudenti, oppure usare la compressione senza perdita.

Conserva sempre l'originale in una cartella a parte. Comprimere più volte lo stesso file già compresso peggiora la qualità: parti sempre dalla copia originale.

Quale formato scegliere

Il formato del file conta quanto la compressione. Ecco una guida rapida.

Formato	Quando usarlo	Note
JPEG	Foto e immagini con molte sfumature	Ottimo compromesso peso/qualità, funziona ovunque. Non supporta la trasparenza.
PNG	Loghi, icone, schermate, immagini con sfondo trasparente	Senza perdita, quindi per le foto è spesso molto pesante.
WebP	Quasi tutto: foto e grafiche	Di solito più leggero di JPEG e PNG a parità di qualità. Supportato dai browser moderni.
AVIF	Foto, se vuoi risparmiare ancora di più	Formato più recente e molto efficiente, ma meno comodo da gestire: usalo solo se il tuo strumento lo supporta bene.

Se devi scegliere senza pensarci troppo: JPEG o WebP per le foto, PNG o WebP per loghi e grafiche con trasparenza. Il WebP è oggi una scelta molto sensata per la maggior parte dei siti.

Le dimensioni giuste prima del caricamento

Prima ancora di comprimere, chiediti: quanto è larga l'immagine sulla pagina? Se nel tuo sito la foto si vede larga 800 pixel, caricarne una da 4000 pixel è uno spreco: il browser la rimpicciolisce, ma scarica comunque tutto il file.

Indicazioni pratiche, da adattare al tuo tema:

immagini a tutta larghezza (ad esempio l'immagine di apertura in alto): circa 1600-2000 pixel di larghezza al massimo;
immagini dentro il testo di un articolo: spesso bastano 800-1200 pixel;
miniature, anteprime e foto in elenco: molto meno, per esempio 300-600 pixel;
loghi e icone: poche centinaia di pixel, o meno.

Per i negozi online il discorso vale doppio: ogni scheda prodotto ha spesso diverse foto e le pagine di categoria ne mostrano decine insieme. Se vendi online, vedi anche cosa controlla Cosmo Assist sui prodotti WooCommerce, comprese le immagini mancanti.

Come comprimere immagini passo dopo passo

Il metodo più semplice è lavorare sul tuo computer, prima di caricare le foto sul sito.

Copia gli originali in una cartella di sicurezza.
Ridimensiona ogni foto alla larghezza che ti serve (vedi la sezione precedente). Quasi tutti i programmi di foto, anche quelli già presenti sul computer, hanno la funzione "Ridimensiona".
Comprimi con uno strumento gratuito. Online puoi usare servizi come Squoosh o TinyPNG; se preferisci un programma da installare, ce ne sono di gratuiti per Windows e Mac che lavorano su tante foto insieme.
Regola la qualità: per i JPEG e i WebP, un valore intorno a 75-85 su 100 di solito mantiene un aspetto identico all'originale. Prova a scendere finché non noti differenze, poi risali un po'.
Confronta prima e dopo ingrandendo il dettaglio: se non vedi differenze a occhio, il risultato va bene.
Carica il file nella Libreria Media di WordPress.

Non dimenticare il testo alternativo (alt text): è una breve descrizione dell'immagine che serve a chi usa uno screen reader e aiuta anche i motori di ricerca a capire di cosa parla la foto. Ricordati di compilarlo ogni volta che carichi un'immagine.

Cosa fa WordPress da solo e cosa fanno i plugin

WordPress fa già qualcosa per te, ma non basta a sostituire una buona preparazione delle immagini.

Immagini molto grandi: dalla versione 5.3, se carichi un'immagine più grande di 2560 pixel, WordPress la riduce automaticamente a quella misura (la cosiddetta "soglia per immagini grandi").
Caricamento ritardato: dalla versione 5.5 aggiunge di default l'attributo loading="lazy", che fa scaricare le immagini solo quando stanno per comparire sullo schermo.
WebP: dalla versione 5.8 puoi caricare file WebP nella Libreria Media.

Ma attenzione: ridurre una foto a 2560 pixel non vuol dire renderla leggera, e può comunque pesare diversi MB. Per questo conviene intervenire prima.

Se carichi molte immagini e non vuoi pensarci ogni volta, puoi usare un plugin di ottimizzazione: alcuni esempi sono ShortPixel, Imagify e Smush. Di solito comprimono automaticamente ogni nuova immagine caricata, possono convertirla in WebP e lavorano anche su quelle già presenti. Molti hanno una versione gratuita con limiti mensili: controlla le condizioni prima di scegliere. Ne basta uno solo.

Sistemare le immagini già caricate

Se il sito ha già centinaia di foto pesanti, hai due strade.

Ottimizzazione in blocco con un plugin: i plugin citati sopra hanno quasi sempre una funzione per elaborare tutta la Libreria Media in una volta. Fai prima una copia di sicurezza del sito, poi avvia l'operazione e controlla qualche pagina importante a lavoro finito.
Sostituire i file singolarmente: scarica l'originale dalla Libreria Media, ridimensionalo e comprimilo sul computer, poi caricalo di nuovo. In alcuni casi i plugin di sostituzione dei media permettono di mantenere lo stesso indirizzo del file, così non devi aggiornare le pagine. Se invece carichi una nuova immagine, ricordati di sostituirla nelle pagine dove era usata.

Se hai cambiato la misura delle immagini nel tema, o dopo un cambio di tema, può servire anche rigenerare le miniature: esistono plugin pensati per questo. Parti dalle pagine più visitate: è lì che il vantaggio si vede di più.

Che peso puntare ad avere

Non esiste un numero valido per tutti, ma come ordine di grandezza puoi tenere a mente queste indicazioni:

foto grandi a tutta larghezza: se riesci, sotto i 200 KB circa;
la maggior parte delle altre immagini: sotto i 100 KB circa;
miniature e icone: poche decine di KB.

Sono indicazioni di massima, non regole: una foto molto ricca di dettagli, per esempio un paesaggio, può richiedere di più per restare bella. L'importante è che il peso sia coerente con quello che l'immagine deve mostrare.

Come accorgerti di immagini troppo pesanti

Controllare a mano ogni pagina è faticoso. Cosmo Assist è un plugin WordPress che ogni settimana analizza il sito e segnala anche le immagini troppo pesanti e quelle senza testo alternativo, spiegando perché contano e come risolvere. Non comprime le immagini al posto tuo: individua il problema e ti indica dov'è, poi sei tu a correggerlo.

Checklist veloce

Conservo una copia degli originali.
Ridimensiono l'immagine alla larghezza che serve davvero.
Scelgo il formato giusto: JPEG o WebP per le foto, PNG o WebP per le grafiche.
Comprimo con qualità moderata e confronto il risultato a occhio.
Compilo il testo alternativo di ogni immagine.
Punto a circa 200 KB per le foto grandi e circa 100 KB per le altre.
Se ho un plugin di ottimizzazione, controllo che sia attivo e funzioni.
Rivedo le immagini già presenti, partendo dalle pagine più visitate.