Ottimizza Immagini per la Velocità Web: Riduci il Caricamento Senza Perdere Qualità

Ultimo aggiornamento: June 28, 2026

Le immagini sono solitamente la parte più pesante di una pagina web, quindi ottimizzarle è il cambiamento con l'impatto maggiore che si può fare per la velocità della pagina. Il lavoro è semplice: servire la dimensione giusta, il formato giusto e la compressione giusta, e poi differire il caricamento delle immagini che l'utente non vede immediatamente. Questa guida copre i passaggi concreti che riducono il peso delle immagini e i tempi di caricamento senza perdita visibile di qualità, e come questi guadagni si riflettono nei Core Web Vitals.

Risposta rapida: come si ottimizzano le immagini per la velocità web?

Ridimensionare Resize ogni immagine alle dimensioni con cui viene effettivamente visualizzata, convertirla in WebP (o AVIF con un fallback), compressare a qualità 80 e servire varianti responsive con srcset in modo che ogni dispositivo carichi la dimensione corretta. Implementare il lazy-load per le immagini sotto la piega e distribuire tramite una CDN. Questa sequenza può ridurre il peso delle immagini del 70% o più senza perdita visibile di qualità, migliorando direttamente la metrica Largest Contentful Paint e il caricamento complessivo della pagina.

Perché le immagini dominano il peso della pagina?

Una tipica pagina web è composta per lo più da immagini in termini di byte. Il testo è minuscolo, CSS e JavaScript sono limitati, ma una foto hero non ottimizzata può pesare diversi megabyte da sola. Servire le immagini a risoluzione completa e in formati pesanti rende la pagina pesante di default.

L'opportunità è grande perché il default — caricare un JPEG a risoluzione fotocamera — è estremamente sprecoso. Una foto da 5000 pixel che viene visualizzata a 800 pixel serve sei volte più pixel del necessario, e un JPEG quando sarebbe WebP aggiunge altro peso. Correggere entrambi riduce drasticamente il file.

Passo 1: Ridimensionare alle dimensioni di visualizzazione

Non servire mai più pixel di quelli con cui l'immagine viene visualizzata. Resize alla larghezza massima di visualizzazione, moltiplicata per 2 per la nitidezza retina.

• Misurare lo slot di visualizzazione, non la risoluzione sorgente.
• Moltiplicare per 2 per gli schermi retina (3x per i telefoni densi).
• Ridimensionare prima di comprimere: meno pixel significano una compressione minore.
• La guida al ridimensionamento copre come fare questo in modo pulito.

Passo 2: Convertire in un formato moderno

La scelta del formato stabilisce il limite per la dimensione del file. WebP e AVIF comprimono le foto molto meglio di JPEG senza perdita visibile di qualità sui browser moderni.

• AVIF — il più piccolo, supporto in crescita. Servire con un fallback WebP o JPEG.
• WebP — il default pratico, ampiamente supportato e molto più piccolo di JPEG.
• JPEG — il fallback universale per i browser non supportati.
• SVG — per loghi e icone; infinitamente scalabile e minuscolo.

Il confronto dei formati e la guida AVIF vs WebP coprono i compromessi. Utilizzare l'elemento <picture> per servire prima AVIF con fallback WebP e JPEG.

Passo 3: Comprimere alla qualità target

Dopo aver ridimensionato e convertito, compressare per ridurre ulteriormente i byte. Qualità 80 è il punto ideale per le foto: la perdita è invisibile alle dimensioni di visualizzazione.

Testare al 100% di zoom per confermare l'assenza di artefatti visibili. La guida alla compressione copre le tecniche.

Passo 4: Servire varianti responsive e lazy-load

Schermi diversi richiedono dimensioni diverse, e le immagini sotto la piega non devono caricarsi immediatamente. Gestire entrambi con il markup.

• Usare srcset con descrittori di larghezza in modo che ogni dispositivo riceva il file giusto.
• Aggiungere loading="lazy" alle immagini sotto la piega per differire il loro caricamento.
• Mantenere l'immagine hero precaricata (eager-loaded) affinché l'elemento LCP carichi velocemente.
• Impostare sempre gli attributi width e height per prevenire lo shift del layout.

La guida alle immagini responsive e la guida al lazy loading coprono l'implementazione in dettaglio.

Come influisce la velocità delle immagini sui Core Web Vitals?

L'ottimizzazione delle immagini influenza direttamente la metrica Largest Contentful Paint (LCP), che spesso misura quanto velocemente carica l'immagine hero. Un hero pesante e lento sposta LCP oltre la soglia di 2,5 secondi che Google considera "buono", danneggiando sia l'esperienza utente che il posizionamento nei motori di ricerca. La guida Core Web Vitals e la guida SEO per immagini collegano questi guadagni al ranking, e la documentazione web.dev LCP spiega la metrica. La guida performance Mozilla copre il quadro di misurazione più ampio — eseguire PageSpeed Insights dopo l'ottimizzazione per confermare che LCP è migliorato.

Esempio pratico: ottimizzare un'immagine hero

Attraversare un singolo esempio rende i passaggi astratti concreti. Prendere un JPEG da 5000 pixel di larghezza direttamente dalla fotocamera, destinato a uno slot hero largo 1200 pixel su un sito web.

1. Ridimensionare da 5000px a 2400px (1200 visualizzazione × 2 per retina). Il file si riduce immediatamente perché il conteggio dei pixel diminuisce di oltre il 75%.
2. Convertire JPEG in WebP. Solo il cambio di formato rimuove tipicamente altri 25-35% a parità di qualità.
3. Comprimere a qualità 80. La perdita visibile è trascurabile, ma i byte diminuiscono ulteriormente.
4. Servire con srcset offrendo varianti 1200w e 2400w, in modo che i telefoni ricevano il file più piccolo.
5. Lazy-load se non è l'elemento LCP, o mantenere eager se è l'hero.

Un originale da 6 MB diventa approssimativamente 150 KB attraverso questi passaggi — una riduzione del 97% senza perdita visibile di qualità sulla visualizzazione. Moltiplicare questo su una pagina con una dozzina di immagini e il peso della pagina collassa, ed è esattamente per questo che l'ottimizzazione delle immagini è il lavoro di velocità ad alta leva su la maggior parte dei siti. La stessa logica si applica a ogni immagine, motivo per cui automatizzare il processo porta benefici.

Automatizzare l'ottimizzazione su un sito intero

Ottimizzare un'immagine manualmente è semplice; ottimizzare tutte le immagini su un sito in crescita manualmente non lo è. L'approccio sostenibile è quello di incorporare l'ottimizzazione nel flusso di lavoro affinché avvenga automaticamente piuttosto che come un passaggio manuale che si può dimenticare.

Uno strumento di build-step che esegue la conversione e la compressione WebP su ogni immagine durante il deploy assicura che nessuna immagine non ottimizzata raggiunga la produzione. Per un sito basato su CMS, un plugin che ottimizza al caricamento intercetta le immagini alla fonte. E per i siti in cui il layout è imprevedibile, una CDN che trasforma al volo gestisce le dimensioni senza varianti manuali. La giusta automazione dipende dallo stack, ma il principio è lo stesso: rendere l'ottimizzazione il default in modo che non dipenda dalla memoria di una persona.

Misurare il risultato

L'ottimizzazione senza misurazione è un gioco d'azzardo. Dopo aver eseguito i passaggi, verificare i guadagni con strumenti reali.

1. Eseguire Google PageSpeed Insights e controllare le raccomandazioni per immagini.
2. Confermare che LCP sia inferiore a 2,5 secondi.
3. Controllare la scheda network per le dimensioni dei file effettivamente serviti.
4. Testare su una connessione mobile, non solo banda larga.

Una pagina che supera questi controlli dopo l'ottimizzazione ha immagini genuinamente veloci. Il lavoro è ripetibile: eseguire gli stessi passaggi su ogni immagine prima della pubblicazione e i guadagni di velocità rimarranno validi sull'intero sito.

Domande frequenti

Qual è il più grande vantaggio in termini di velocità delle immagini?

Ridimensionare alle dimensioni di visualizzazione. Una foto da fotocamera da 6000px servita a 800px di visualizzazione è lo spreco singolo più grande. Ridimensionare prima, poi comprimere: l'ordine conta più dello strumento.

Devo fare lazy-load a ogni immagine?

Tutto sotto la piega, sì. L'hero LCP deve caricarsi con eager (e precaricato); il lazy-loading ritarda l'elemento più grande e danneggia i Core Web Vitals. Fare lazy-load al resto in modo che non competano con l'hero.

Come misuro la velocità delle immagini?

PageSpeed Insights dati di campo su una finestra di 28 giorni, non un singolo test di laboratorio. Gli strumenti di laboratorio (Lighthouse) mostrano il potenziale; i dati di campo mostrano cosa sperimentano gli utenti reali. CWV viene valutato sui dati di campo.

Qual è il formato più veloce per il web?

WebP come default sicuro (25–35% più piccolo di JPEG, supporto universale), o AVIF per i file più piccoli sui browser moderni. Servire il formato moderno con un fallback JPEG tramite un elemento <picture>.

Come servo immagini responsive?

Generare ogni immagine nelle dimensioni che i tuoi breakpoint richiedono, quindi usare srcset con un attributo sizes che descrive la larghezza di visualizzazione, lasciando che il browser scelga il file giusto per viewport. Il browser scarica solo la variante necessaria, risparmiando byte su schermi piccoli. Vedere la guida alle immagini responsive per l'impostazione completa.

Cos'è il lazy loading?

Una funzione del browser che ritarda il caricamento delle immagini finché non sono vicine al viewport, in modo che le immagini sotto la piega non competano con l'hero per la larghezza di banda. Aggiungere loading="lazy" alle immagini sotto la piega. L'hero LCP deve caricarsi con eager (non lazy), perché il farlo ritarda l'elemento più grande e danneggia i Core Web Vitals.