Comprimere le immagini per il web: guida pratica (JPG, PNG, WebP)

Se il tuo sito è lento, c’è un colpevole molto probabile e molto poco esotico: le immagini. Nella mia esperienza è la causa numero uno dei siti pesanti — fotografie da fotocamera caricate così com’erano, megabyte su megabyte serviti a visitatori che avrebbero visto lo stesso identico risultato con un decimo del peso. La buona notizia: comprimere le immagini è l’ottimizzazione con il miglior rapporto risultato/fatica che esista, e si fa con strumenti gratuiti. Vediamo come, con un metodo semplice da applicare subito.

Perché il peso delle immagini conta così tanto

In una pagina web tipica, le immagini sono la parte più pesante di tutto ciò che viene scaricato. Ogni megabyte di troppo si paga tre volte: in velocità (e la pazienza degli utenti è documentata e poca), in posizionamento (la velocità entra nei Core Web Vitals con cui Google valuta il sito, capitolo SEO tecnica) e in connessioni mobili, dove i megabyte costano tempo e dati a chi ti visita.

L’obiettivo del lavoro è uno: servire ogni immagine al peso minimo che non si vede. E i margini sono enormi: una foto da smartphone pesa svariati MB; la stessa foto, ridimensionata e compressa per il web, fa il suo lavoro con 100-200 KB. Anche venti volte meno.

I tre pilastri: dimensioni, formato, compressione

1. Le dimensioni giuste (l’errore più grosso)

Prima ancora di comprimere: ridimensionare. Una foto da 6000 pixel di larghezza mostrata in uno spazio da 800 pixel è uno spreco puro — il browser scarica tutto e butta via la differenza. Regola pratica: l’immagine va servita a una larghezza vicina a quella massima a cui verrà mostrata (con un margine per gli schermi ad alta densità: il doppio della larghezza di visualizzazione è un buon compromesso). Per la maggior parte degli usi: 1200-1600 pixel per immagini a tutta larghezza, 800 per immagini di contenuto, meno per le miniature.

2. Il formato giusto

• WebP — lo standard moderno, supportato ormai da tutti i browser: comprime meglio di JPG e PNG, gestisce la trasparenza, ed è quello che uso di default in ogni progetto. Se devi ricordarti una sola cosa di questo articolo: converti in WebP.
• JPG — il veterano, ancora valido per le fotografie: universale, buona compressione.
• PNG — per grafiche con trasparenza e screenshot con testo nitido; per le foto è la scelta sbagliata (pesi enormi).
• SVG — per loghi e icone: è vettoriale (matematica, non pixel), pesa pochissimo ed è perfetto a qualunque dimensione.
• AVIF — il formato di nuova generazione: comprime ancora meglio di WebP, il supporto è ormai ampio; ottimo come scelta aggiuntiva dove il flusso di lavoro lo consente.

3. La compressione giusta

I formati fotografici usano compressione “lossy”: eliminano informazione visiva che l’occhio non percepisce. Il segreto è nel dosaggio, e la zona magica è qualità 75-85%: peso ridotto drasticamente, differenza invisibile su schermo. Sotto il 60% iniziano gli artefatti visibili; il 100% è uno spreco che non porta qualità percepibile.

Gli strumenti (gratuiti) per farlo

• Squoosh — il mio consiglio per chi non è tecnico: si usa nel browser, mostra il confronto prima/dopo in tempo reale mentre regoli la qualità, esporta in WebP e AVIF. Perfetto per capire vedendo.
• TinyPNG / TinyJPG — trascini le immagini, le riscarichi compresse: la via più rapida per lotti di immagini.
• ImageOptim (Mac) e simili — compressione in locale, anche in blocco.
• I CMS ben configurati — WordPress e simili possono ridimensionare e convertire automaticamente al caricamento (con i plugin giusti): se aggiorni il sito spesso, l’automazione è la vera soluzione, perché il metodo che dipende dalla buona volontà prima o poi si dimentica.

Il flusso di lavoro, riassunto

Per ogni immagine destinata al sito: ridimensiona alla misura d’uso reale → converti in WebP → comprimi a qualità ~80% → rinomina il file in modo descrittivo (software-gestionale-magazzino.webp, non IMG_4521.jpg) → carica e compila il testo alternativo. Cinque passaggi, un minuto a immagine, e il sito ringrazia per anni.

Due accortezze tecniche che completano il quadro (se il sito lo gestisce qualcuno per te, chiedigliele): il lazy loading — le immagini sotto la piega si caricano solo quando l’utente scorre — e gli spazi riservati (attributi di larghezza e altezza), che evitano i salti di pagina durante il caricamento.

Quando il problema è più grande delle immagini

La compressione delle immagini è il primo intervento per resa, ma se il sito resta lento anche dopo, le cause sono più profonde — codice gonfio, hosting inadeguato, troppi script — e meritano una diagnosi vera: la guida a PageSpeed spiega come leggerla. E se preferisci che la faccia io, scrivimi: analizzo il sito e ti dico dove si è impantanato, gratis e senza impegno.