Ottimizzazione Immagini Web: Formati, Compressione e Lazy Loading

L'ottimizzazione immagini è spesso l'intervento con il miglior rapporto sforzo/risultato sulla velocità di un sito web. Le immagini costituiscono mediamente il 50-60% del peso totale di una pagina e sono la principale causa di punteggi bassi sul Largest Contentful Paint (LCP), la metrica Core Web Vitals che Google usa per misurare la velocità percepita dal visitatore. Eppure la maggior parte dei siti le pubblica senza alcuna ottimizzazione: formato sbagliato, compressione assente, dimensioni fisse per tutti i dispositivi, caricamento immediato anche per immagini mai visibili all'avvio.

In questa guida vediamo come scegliere il formato giusto per ogni tipo di contenuto, applicare la compressione corretta, implementare immagini responsive con srcset e sizes, e attivare il lazy loading. Ogni tecnica viene spiegata con esempi di codice funzionanti.

Formati immagine a confronto: JPEG, PNG, WebP e AVIF

Scegliere il formato sbagliato può vanificare qualsiasi altra ottimizzazione. Un logo in JPEG pesa meno di un PNG, ma appare sgranato sui bordi. Una fotografia in PNG ha qualità perfetta, ma può pesare cinque volte il JPEG equivalente. Il formato è la prima decisione, e dipende dal tipo di contenuto visivo.

JPEG: il formato per fotografie e immagini complesse

JPEG usa compressione lossy ottimizzata per immagini con molte sfumature di colore: fotografie, rendering 3D, immagini di sfondo complesse. Su questo tipo di contenuto produce file molto più piccoli di PNG a parità di qualità visiva percepita.

La compressione si regola con un parametro di qualità da 0 a 100. Per il web, valori tra 70 e 85 offrono un buon equilibrio tra peso e nitidezza: sotto 70 gli artefatti iniziano a diventare visibili nelle aree di transizione cromatica, sopra 85 il peso aumenta senza benefici percettibili a schermo.

Dove non usarlo: testo su sfondo colorato, icone, grafici con bordi netti. La compressione lossy crea artefatti visibili (effetto "blocchi" o banding) esattamente nelle aree ad alto contrasto dove l'occhio li nota di più.

PNG: quando servono trasparenza e nitidezza

PNG usa compressione lossless: nessuna perdita di informazione, qualità identica all'originale. Il vantaggio principale è il supporto al canale alpha per la trasparenza, indispensabile per loghi, icone e illustrazioni posizionate su sfondi variabili.

Il formato esiste in due varianti: PNG-8 (256 colori, adatto a grafica semplice con palette limitata) e PNG-24 (milioni di colori, per illustrazioni complesse con sfumature). Per icone e loghi con colori piatti, PNG-8 riduce significativamente il peso senza perdita di qualità visiva.

Dove non usarlo: fotografie. Un PNG fotografico può pesare 3-5 volte il JPEG equivalente senza miglioramento visibile. Se l'immagine non ha aree trasparenti, JPEG o WebP sono la scelta corretta.

WebP: lo standard moderno con supporto quasi universale

WebP supporta sia compressione lossy che lossless, trasparenza alpha e animazioni, sostituendo efficacemente sia JPEG che PNG nella maggior parte dei casi d'uso. Il risparmio rispetto a JPEG è tipicamente del 25-35% a parità di qualità visiva; su PNG con trasparenza il risparmio lossless è comparabile o superiore.

Supporto browser: Chrome dalla versione 9, Firefox 65+, Safari 14+, Edge 18+. Copre circa il 95% degli utenti globali. Per siti nuovi o aggiornati di recente, WebP può essere usato come formato default senza fallback. Il 5% non coperto comprende prevalentemente browser molto vecchi o versioni iOS precedenti alla 14, una percentuale trascurabile per la maggior parte dei progetti.

AVIF: compressione superiore e il futuro già presente

AVIF è basato sul codec video AV1 e offre la compressione più efficiente disponibile oggi per le immagini web: tipicamente il 30-50% più leggero di WebP a parità di qualità, con supporto nativo a HDR e wide gamut color. La gestione delle sfumature complesse è migliore rispetto sia a JPEG che a WebP.

Il supporto browser ha raggiunto la maturità pratica con Edge 121 (gennaio 2024): Chrome 85+, Firefox 93+, Safari 16+, Edge 121+. La copertura è di circa il 93% degli utenti, una differenza marginale rispetto al 95% di WebP.

La strategia consigliata: offrire AVIF come formato preferenziale tramite l'elemento <picture>, con WebP o JPEG come fallback per i browser che non lo supportano ancora.

<picture>
  <source srcset="immagine.avif" type="image/avif">
  <source srcset="immagine.webp" type="image/webp">
  <img src="immagine.jpg" alt="Descrizione immagine">
</picture>

Il browser seleziona la prima sorgente che supporta: AVIF se disponibile, poi WebP, poi JPEG. Nessun JavaScript, nessuna logica lato server. Il tempo di encoding AVIF è più lento di WebP, ma è rilevante solo per sistemi che generano immagini in tempo reale: per upload statici e pipeline di build il costo è irrilevante.

Compressione lossy e lossless: quale scegliere e quando

La confusione tra lossy e lossless porta a due errori opposti: compressione lossless su fotografie (file enormi senza beneficio visivo) o compressione lossy aggressiva su grafica con testo (artefatti visibili difficili da correggere in post-processing).

La compressione lossy elimina informazioni visive che l'occhio fatica a percepire, soprattutto nelle transizioni graduali tra colori vicini. Su una fotografia di paesaggio a schermo normale, la differenza tra qualità 80 e originale è spesso invisibile. La perdita diventa visibile solo su ingrandimenti forti o su aree ad alto contrasto come bordi e testo. Questo è il motivo per cui "lossy" non equivale automaticamente a "qualità inaccettabile": dipende dal contenuto e dal livello di compressione applicato.

La compressione lossless trova pattern ripetuti nei dati dell'immagine e li codifica più efficientemente, senza rimuovere informazioni. Il file risultante è identico all'originale in qualità, ma il risparmio di peso su fotografie è molto inferiore rispetto alla lossy.

Un avvertimento pratico: salvare un'immagine JPEG più volte con compressione lossy accumula artefatti a ogni passaggio. Per l'originale da archiviare, mantieni sempre il file non compresso (PNG o TIFF); il JPEG o WebP compresso è la versione di distribuzione, non la fonte di lavoro.

La scelta in base al tipo di contenuto:

• Fotografie e immagini con sfumature complesse: lossy. Il risparmio è sostanziale (40-70% rispetto all'originale) e la perdita è impercettibile a livelli ragionevoli.
• Loghi, icone e testo su sfondo: lossless. I bordi netti e le aree uniformi rendono gli artefatti lossy immediatamente visibili.
• Screenshot con interfacce UI: lossless o lossy a qualità alta (85+). Il testo nei screenshot degrada male con compressione aggressiva.
• Illustrazioni digitali con colori piatti: lossless. La compressione lossy produce banding nei colori uniformi.

Un test pratico: comprimi la fotografia a qualità 75, confrontala con l'originale alla dimensione effettiva di visualizzazione sul sito. Se non vedi differenza, quella è la qualità giusta. Se vedi artefatti, sali a 80 e ripeti.

Tool per comprimere le immagini: orientarsi senza perdersi

I tool disponibili sono decine. La distinzione che conta è il volume e il flusso di lavoro: ottimizzi occasionalmente poche immagini o gestisci un sito con upload continui?

TinyPNG è la scelta più immediata per uso occasionale: interfaccia web senza registrazione, comprime PNG e JPEG con buoni risultati e preview prima del download. Disponibile anche come API e plugin per i principali CMS. Limite gratuito: 5 MB per file.

Squoosh, sviluppato da Google, è lo strumento ideale per esplorare i formati moderni: confronto visivo side-by-side tra formati (JPEG, WebP, AVIF) con cursore interattivo, e controllo granulare sui parametri di compressione. Utile per calibrare le impostazioni prima di automatizzare il processo.

ShortPixel è pensato per chi gestisce siti con molte immagini: compressione batch, conversione automatica in WebP e AVIF, CDN opzionale. Il plugin WordPress include un piano gratuito fino a 100 immagini al mese e gestisce anche le immagini già caricate in precedenza.

Per chi lavora con pipeline di sviluppo, librerie come sharp (Node.js) o imagemin integrano compressione e conversione di formato direttamente nel processo di build, eliminando il passaggio manuale a ogni deploy.

Il criterio di scelta: usa il tool più facile da integrare nel tuo flusso attuale. Un'ottimizzazione sistematica con strumenti semplici vale più di un'ottimizzazione perfetta applicata solo ad alcune immagini.

Immagini responsive: srcset e sizes spiegati con codice

Caricare un'immagine da 1200px su uno smartphone con schermo da 390px è uno spreco duplice: banda consumata per un file molto più grande del necessario, e tempo di rendering per ridimensionarlo a display. Gli attributi srcset e sizes permettono al browser di scegliere la versione più adatta tra quelle disponibili.

Come funziona srcset: fornire più versioni per larghezza o densità di schermo

L'attributo srcset elenca le varianti dell'immagine con il loro descrittore: larghezza intrinseca del file in pixel (descriptor w) o densità di schermo (descriptor x).

Con il descriptor w, per immagini di contenuto che cambiano dimensione tra dispositivi:

<img
  src="immagine-800w.jpg"
  srcset="immagine-400w.jpg 400w,
          immagine-800w.jpg 800w,
          immagine-1200w.jpg 1200w"
  alt="Descrizione immagine"
>

I valori 400w, 800w, 1200w sono la larghezza intrinseca dei file, non la larghezza di visualizzazione. L'attributo src è il fallback per browser che non supportano srcset. Con solo questo attributo, il browser usa anche la densità di pixel dello schermo nella decisione: su un display Retina 2x caricherà la versione da 800w anche se l'immagine è visualizzata a 400px CSS.

Con il descriptor x, per immagini a dimensione fissa che devono apparire nitide su schermi ad alta densità:

<img
  src="logo.png"
  srcset="logo.png 1x, logo-2x.png 2x"
  alt="Logo azienda"
>

L'attributo sizes: comunicare al browser il contesto di visualizzazione

Con solo srcset, il browser non conosce la larghezza effettiva di visualizzazione prima di scaricare il CSS, e spesso sceglie il file più grande per sicurezza. L'attributo sizes risolve questo problema dichiarando la larghezza attesa per ogni breakpoint.

<img
  src="immagine-800w.jpg"
  srcset="immagine-400w.jpg 400w,
          immagine-800w.jpg 800w,
          immagine-1200w.jpg 1200w"
  sizes="(max-width: 768px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Descrizione immagine"
>

Traduzione: su schermi fino a 768px l'immagine occupa tutta la viewport; su schermi fino a 1200px ne occupa la metà; su schermi più grandi è fissa a 800px. Con queste informazioni il browser calcola la versione sufficiente da scaricare, evitando di caricare quella da 1200px su un telefono.

La sintassi dell'attributo sizes usa le stesse media condition del CSS. L'ultimo valore senza condizione è il default per viewport non coperte dalle condizioni precedenti. Le condizioni vengono valutate in ordine, come in un CSS cascade: vince la prima che corrisponde.

Lazy loading: caricare le immagini solo quando servono

Per impostazione predefinita, il browser inizia a scaricare tutte le immagini della pagina nel momento in cui analizza l'HTML, incluse quelle sotto il fold che l'utente potrebbe non raggiungere mai. Il lazy loading posticipa il download al momento in cui l'immagine sta per entrare nel viewport.

L'implementazione HTML nativa richiede un solo attributo:

<img src="immagine.jpg" loading="lazy" alt="Descrizione">

Nessuna libreria JavaScript, nessuna configurazione aggiuntiva. Supportato da Chrome 77+, Firefox 75+, Edge 79+, Safari 15.4+. Per i browser che non lo supportano, l'attributo viene ignorato e l'immagine si carica normalmente.

Il caso critico da evitare: non applicare loading="lazy" all'immagine principale above the fold. Il lazy loading su questi elementi peggiora l'LCP perché ritarda intenzionalmente il download di contenuto che il browser dovrebbe caricare con priorità massima. Usato sull'immagine sbagliata, l'attributo peggiora invece di migliorare le performance.

La regola pratica: loading="lazy" su tutte le immagini tranne la prima visibile senza scorrere. Per la prima immagine above the fold, non aggiungere l'attributo loading: il comportamento default è il caricamento immediato.

L'impatto sul Core Web Vitals è diretto: ridurre il peso scaricato durante l'avvio libera banda per le risorse critiche, migliorando LCP e il tempo di rendering generale. Per una visione completa di come ottimizzare ogni aspetto della performance, la guida completa alla velocità del sito e ai Core Web Vitals è il punto di partenza.

Una nota sul CDN: servire immagini da un Content Delivery Network riduce ulteriormente i tempi di risposta distribuendo i file su server vicini agli utenti. È un'ottimizzazione complementare, da considerare dopo aver ottimizzato formato, compressione e caricamento.

Alt text: cosa serve sapere (e dove approfondire)

Ogni immagine deve avere un attributo alt descrittivo: serve agli screen reader per l'accessibilità, viene mostrato quando l'immagine non si carica, e fornisce a Google il contesto del contenuto visivo. Alt vuoto, generico ("foto", "immagine") o ripieno di keyword è sempre sbagliato in tutti e tre i contesti.

Le implicazioni SEO dettagliate dell'alt text, le regole per le immagini decorative e le best practice per l'accessibilità sono argomenti che meritano una trattazione dedicata: esulano dallo scope di questa guida tecnica sulla performance e vengono coperti nell'articolo specifico sull'ottimizzazione SEO delle immagini.

Conclusione

L'ottimizzazione delle immagini agisce su livelli indipendenti che si sommano: il formato giusto riduce il peso alla fonte (WebP o AVIF dove possibile), la compressione calibrata al tipo di contenuto elimina il peso residuo senza perdita visiva, srcset e sizes garantiscono che ogni dispositivo scarichi solo la versione necessaria, e il lazy loading posticipa il caricamento di tutto ciò che non è immediatamente visibile.

• Converti le immagini in WebP come formato standard per tutto il sito
• Usa <picture> con AVIF come prima sorgente e WebP o JPEG come fallback
• Applica compressione lossy alle fotografie (qualità 70–85), lossless a loghi e grafica con bordi netti
• Aggiungi loading="lazy" a tutte le immagini sotto the fold; lascia senza attributo la prima immagine visible
• Implementa srcset e sizes per le immagini che cambiano dimensione tra mobile e desktop

Prima e dopo ogni intervento, misura l'impatto con PageSpeed Insights: i numeri concreti prima dell'ottimizzazione rendono visibile il problema, quelli dopo confermano che l'intervento ha prodotto risultati reali.