Ottimizzazione Immagini: Checklist per un Web Veloce

Ultimo aggiornamento: June 28, 2026. Esegui questa checklist prima di ogni pubblicazione per risultati coerenti.

L'ottimizzazione delle immagini è una sequenza, non un singolo passaggio. Saltare una fase significa che il risultato sarà o lento o sfocato. Questa checklist copre ogni fase — scelta del formato, ridimensionamento, compressione, consegna responsive, lazy loading e configurazione CDN — nell'ordine in cui vengono effettivamente eseguite, così potrai percorrerla prima di ogni pubblicazione e sapere che le immagini si caricheranno velocemente e appariranno nitide.

Risposta rapida: cosa include un passaggio completo di ottimizzazione delle immagini?

Un passaggio completo significa scegliere il formato giusto (WebP per foto, SVG per vettoriali, PNG per trasparenza), ridimensionare alle dimensioni di visualizzazione, comprimere alla dimensione file target, servire varianti responsive con srcset, implementare lazy-loading per le immagini sotto la piega e distribuire tramite un CDN. Saltare qualsiasi fase lascia prestazioni sul tavolo: un'immagine non compressa è lenta, un'immagine sovradimensionata spreca byte e un'immagine senza lazy loading ritarda il rendering iniziale. Esegui l'intera checklist piuttosto che scegliere solo alcune fasi.

Perché eseguire una checklist invece di ottimizzare ad hoc?

L'ottimizzazione delle immagini ha molti passaggi piccoli, e dimenticarne uno annulla il lavoro degli altri. Una checklist trasforma un processo multi-step facile da dimenticare in una routine ripetibile che produce risultati coerenti.

• Ogni fase affronta un fattore prestazionale distinto.
• Saltare una fase lascia quel fattore non affrontato.
• Le fasi sono abbastanza indipendenti da poter essere controllate con affidabilità tramite checklist.

Fase 1: Scegliere il formato giusto

Il formato è la prima decisione perché vincola tutto ciò che segue. Abbina il formato al contenuto dell'immagine.

• WebP — il predefinito per le foto sui browser moderni. Più piccolo di JPEG alla stessa qualità.
• AVIF — ancora più piccolo di WebP, con supporto in crescita. Usare con un fallback su WebP o JPEG.
• SVG — per loghi, icone e grafica vettoriale. Si scala all'infinito, file minuscolo.
• PNG — per immagini che richiedono trasparenza e qualità lossless.
• JPEG — il fallback universale per le foto quando i formati moderni non sono supportati.

La guida di confronto dei formati e la guida AVIF vs WebP coprono gli aspetti di compromesso in dettaglio. Scegli il formato che fornisce il file più piccolo con una qualità accettabile per il contenuto.

Fase 2: Ridimensionare alle dimensioni di visualizzazione

Non servire mai un'immagine più grande di quanto non venga visualizzata. Una foto da 4000 pixel in uno slot da 600 pixel spreca banda e rallenta la pagina. Ridimensiona alla dimensione massima con cui l'immagine verrà visualizzata, tenendo conto del retina (2x).

Ridimensionare prima della compressione è importante perché la compressione lavora sul conteggio dei pixel: meno pixel si comprimono in meno byte. La guida al ridimensionamento copre come fare ciò senza perdita di qualità.

Fase 3: Comprimere alla dimensione file target

Dopo il ridimensionamento, comprimi per ridurre i byte. Punta al file più piccolo senza perdita visibile di qualità.

• Foto: WebP o JPEG con qualità 80.
• Grafica con colori piatti: PNG o WebP lossless.
• Testare allo zoom del 100% per confermare l'assenza di artefatti visibili.
• Puntare a immagini hero sotto i 200 KB e immagini di contenuto sotto i 100 KB.

La guida alla compressione copre le tecniche e le impostazioni di qualità.

Fase 4: Servire varianti responsive

Schermi diversi richiedono dimensioni immagine diverse. Servile con srcset in modo che ogni dispositivo scarichi il file giusto anziché un formato unico per tutti.

• Generare varianti 1x, 2x e 3x per gli schermi retina.
• Usare descrittori di larghezza (400w, 800w) con sizes per layout responsive.
• Lasciare che il browser scelga il file giusto.
• La guida alle immagini responsive copre il markup.

Fase 5: Lazy-load le immagini sotto la piega

Le immagini sotto la piega non dovrebbero caricarsi finché l'utente non scorre fino a loro. Ciò libera banda per il rendering iniziale e migliora la metrica Largest Contentful Paint.

• Aggiungere loading="lazy" alle immagini sotto la piega.
• Mantenere l'immagine hero precaricata (eager-loaded) in modo che l'elemento LCP si carichi velocemente.
• La guida al lazy loading copre l'implementazione.

Fase 6: Distribuire tramite un CDN

Servire le immagini da una content delivery network affinché vengano scaricate da un punto di accesso vicino a ogni utente. Un CDN riduce la latenza e scarica il server di origine, cosa che è più importante per i siti con un pubblico geograficamente distribuito: altrimenti, un utente su un altro continente aspetterebbe che ogni immagine attraversi quella distanza dal tuo origin. La guida CDN copre la configurazione, incluse le funzionalità di trasformazione che consentono a un CDN di ridimensionare e riformattare al volo, e la guida Core Web Vitals collega la consegna rapida delle immagini alle metriche che influenzano il ranking.

Un CDN assorbe anche i picchi di traffico. Quando una pagina diventa virale o una campagna invia un'ondata di visitatori, la cache edge serve le immagini invece dell'origine, in modo che il sito rimanga veloce sotto un carico che altrimenti sovraccaricherebbe un singolo server. Per i siti dove l'uptime sotto traffico è importante quanto il tempo medio di caricamento, questa resilienza è preziosa quanto la riduzione della latenza.

Errori comuni di ottimizzazione

Anche con una checklist, alcuni errori si ripetono e annullano il lavoro. Conoscerli accelera la fase di verifica.

• Comprimere prima di ridimensionare — spreca sforzi su pixel che vengono scartati. Ridimensiona sempre per primo.
• Servire un'unica dimensione a tutti i dispositivi — i telefoni scaricano file dimensionati per desktop. Usa srcset.
• Lazy-load l'immagine hero — ritarda l'elemento LCP. Mantieni l'immagine sopra la piega precaricata (eager).
• Dimenticare gli attributi width e height — causa spostamenti di layout mentre le immagini vengono caricate. Includerli sempre.
• Usare PNG per foto — gonfia il file. Usa WebP o JPEG per contenuti fotografici.

Verifica: l'ottimizzazione ha funzionato?

Dopo aver eseguito la checklist, verifica il risultato con misurazioni piuttosto che con ipotesi. Gli strumenti confermano se le immagini si caricano effettivamente velocemente, e la misurazione è l'unico modo per sapere che l'ottimizzazione ha funzionato: l'ispezione visiva non rivela la dimensione del file o l'ordine di caricamento. Esegui questi controlli sia su una connessione veloce che su una lenta, poiché un'ottimizzazione che sembra a posto sulla banda larga può comunque avere difficoltà sui dati mobili.

1. Eseguire Google PageSpeed Insights e controllare le opportunità relative alle immagini.
2. Confermare che l'elemento LCP si carichi entro 2.5 secondi.
3. Controllare la scheda network per confermare che il file con la dimensione giusta venga caricato per dispositivo.
4. Verificare che le immagini lazy-loaded vengano ritardate fino allo scroll.

La guida di misurazione delle prestazioni web.dev documenta come PageSpeed valuta le pagine, e la guida alle prestazioni Mozilla copre le metriche in dettaglio. Una pagina che supera questi controlli dopo la checklist ha immagini genuinamente veloci — non semplicemente immagini che sembrano ottimizzate. Per il contesto SEO più ampio, la guida SEO per immagini collega questi guadagni di prestazioni al ranking nei motori di ricerca.

Domande frequenti

Cosa include un passaggio completo di ottimizzazione delle immagini?

Scegliere il formato giusto, ridimensionare alle dimensioni di visualizzazione, comprimere a una dimensione file target, servire varianti responsive con srcset, implementare lazy-loading sotto la piega e fare caching tramite un CDN. Saltare qualsiasi fase lascia byte o qualità sul tavolo. La checklist esiste affinché nessuna fase venga dimenticata.

Perché eseguire una checklist invece di ottimizzare ad hoc?

Perché l'ottimizzazione ad hoc trascura fasi: uno sviluppatore comprime ma dimentica di ridimensionare, o aggiunge srcset ma dimentica il lazy-loading. Una checklist assicura che ogni immagine riceva ogni fase, in modo coerente, su tutto un sito. La coerenza è ciò che sposta Core Web Vitals su larga scala.

Qual è il singolo guadagno più grande nell'ottimizzazione delle immagini?

Ridimensionare alle dimensioni di visualizzazione. Una foto da 6000px servita a 800px è lo spreco maggiore su la maggior parte dei siti. Ridimensiona per primo; tutto il resto si basa su una base con le dimensioni corrette.

Come posso servire varianti responsive?

Generare ogni immagine nelle dimensioni di cui hai bisogno i tuoi breakpoint, quindi usare srcset e sizes per lasciare che il browser scelga il file giusto in base al viewport. Il browser scarica solo la variante di cui ha bisogno, risparmiando byte su schermi piccoli. Vedi la guida alle immagini responsive.

Con quale frequenza dovrei riottimizzare le immagini?

Ogni volta che aggiungi nuove immagini e fai un audit del set esistente quando Core Web Vitals diminuiscono. Le vecchie immagini ottimizzate anni fa potrebbero essere JPEG dove oggi WebP sarebbe più piccolo. Un audit periodico intercetta lo scostamento di formato e compressione.

Come faccio ad auditare le immagini di un sito esistente?

Eseguire un crawl (Lighthouse, o uno strumento come Screaming Frog) per elencare ogni immagine con la sua dimensione e dimensioni, quindi segnalare qualsiasi che sia sovradimensionata rispetto allo slot di visualizzazione, servita come JPEG dove WebP sarebbe più piccolo, o priva di attributi width/height. Correggere prima i maggiori colpevoli: poche immagini enormi sono solitamente responsabili della maggior parte del peso della pagina. Riprovare l'audit dopo le correzioni per confermare il miglioramento.