Ottimizzare le immagini per il web

L’ottimizzazione delle immagini per il web è una di quelle attività che separa i siti veloci dai siti lenti, indipendentemente da quanto si investa in hosting o ottimizzazione del codice. Le immagini rappresentano mediamente il 60-70% del peso totale di una pagina web, e curare bene questo aspetto produce miglioramenti immediati sulle performance, sulla user experience e sul posizionamento organico. Nel 2026 il panorama è cambiato profondamente con l’affermazione di AVIF come formato dominante, l’integrazione di funzionalità AI native nei principali tool grafici, e l’innalzamento della soglia LCP a 1,5 secondi nei Core Web Vitals. In questo articolo ti spiego cosa significa davvero ottimizzare un’immagine, quali sono i formati moderni e come scegliere quello giusto, perché ho recentemente migrato tutti i siti dei miei clienti da WebP ad AVIF, come uso caniuse.com prima di ogni decisione tecnica, quali sono i parametri SEO da curare (nome file, alt, title, metadati IPTC) e come automatizzare il processo.

Cosa significa ottimizzare un’immagine per il web

L’ottimizzazione delle immagini è il processo che riduce il peso del file mantenendo una qualità visiva accettabile per il contesto di utilizzo. L’obiettivo non è la qualità massima assoluta, ma il miglior compromesso tra qualità percepita e velocità di caricamento.

Le operazioni che compongono l’ottimizzazione sono cinque:

• scegliere il formato giusto in base al tipo di immagine (foto, grafica, animazione);
• ridimensionare alle dimensioni reali in cui l’immagine verrà visualizzata;
• comprimere il file riducendo il peso con perdita o senza perdita di qualità;
• configurare correttamente attributi come alt, title e metadati;
• implementare tecniche come lazy loading e srcset responsive.

Il punto cruciale è capire che ogni kilobyte risparmiato si traduce in millisecondi guadagnati sul caricamento della pagina. E nel 2026, con la soglia LCP scesa a 1,5 secondi, ogni millisecondo conta. Un sito con immagini non ottimizzate parte già svantaggiato in partenza, indipendentemente da quanto sia veloce il server o quanto sia pulito il codice.

Tutta la dimensione tecnica delle performance web ruota attorno a queste valutazioni millimetriche, e la mia pagina dedicata al servizio performance e UX entra nel dettaglio del metodo che applico nei progetti dove la velocità è priorità assoluta.

I formati immagine, dal passato al presente

Per scegliere bene il formato di un’immagine bisogna conoscere le caratteristiche di ognuno. Il panorama si è arricchito negli ultimi anni, e nel 2026 la scelta è ben diversa rispetto a quella del 2020.

I formati classici JPEG, PNG, GIF

Sono i formati storici del web, ancora ampiamente usati ma progressivamente sostituiti da alternative più moderne:

• JPEG: formato lossy (con perdita), ottimo per fotografie con molte sfumature di colore;
• PNG: formato lossless (senza perdita), ideale per grafica con trasparenze e dettagli netti;
• GIF: formato datato, oggi quasi esclusivamente per animazioni di breve durata.

Questi tre formati funzionano ancora perfettamente e sono supportati da tutti i browser, ma producono file decisamente più pesanti rispetto alle alternative moderne. Per un sito nuovo nel 2026, sceglierli come formato principale è una decisione che andrebbe motivata bene.

WebP, il salto in avanti del decennio scorso

Sviluppato da Google e rilasciato nel 2010, WebP ha rappresentato per anni il riferimento dei formati moderni. Offre compressione sia lossy sia lossless, supporta trasparenza e animazioni, produce file generalmente più leggeri del 25-35% rispetto a JPEG e PNG con qualità equivalente.

Per molti anni ho usato WebP come formato principale per i siti dei miei clienti. Funzionava bene, era supportato da tutti i browser moderni, riduceva sensibilmente i tempi di caricamento. Sembrava lo standard definitivo per il web.

AVIF, la mia scelta attuale per i progetti dei clienti

Recentemente sono passato da WebP ad AVIF come formato di default per tutti i nuovi progetti che seguo. È un cambio importante che merita una spiegazione dettagliata sui motivi tecnici e operativi.

AVIF (AV1 Image File Format) è un formato di immagine moderno basato sul codec video AV1. Le sue caratteristiche principali sono:

• compressione generalmente migliore di WebP, JPEG, PNG e GIF;
• è stato progettato per superare i formati precedenti rendendoli obsoleti;
• supporta sia compressione lossy che lossless;
• gestisce HDR, ampio gamut di colori e trasparenza con qualità superiore;
• compete con JPEG XL, che ha qualità di compressione simile ed è generalmente considerato più ricco di funzionalità.

I numeri concreti che ho misurato sui progetti dei clienti raccontano una differenza significativa: passando da WebP ad AVIF, il peso medio delle immagini si è ridotto di un ulteriore 20-50% mantenendo qualità visiva identica. Su siti con molte immagini (e-commerce, portfolio, blog editoriali) questo si traduce in miglioramenti misurabili sui Core Web Vitals e sulla velocità percepita.

Nota: a fine 2025 Google ha reso AVIF il formato predefinito per Chrome e Search, segnale forte che il formato è ormai entrato nella fase di adozione mainstream. Molti CMS, incluso WordPress, hanno integrato il supporto AVIF nativo. Le obiezioni di “compatibilità ancora insufficiente” che si sentivano fino al 2024 oggi non hanno più fondamento tecnico.

Caniuse.com, lo strumento che uso prima di ogni decisione tecnica

Quando faccio scelte tecniche come la migrazione a un nuovo formato di immagini, c’è uno strumento che consulto sempre per primo: caniuse.com. È un servizio gratuito che traccia il supporto di ogni tecnologia web (formati immagine, CSS properties, API JavaScript, HTML5 features) sui diversi browser, restituendo percentuali precise di compatibilità.

Caniuse.com è organizzato in modo molto pratico:

• basta cercare la tecnologia di interesse nella barra di ricerca;
• il sito mostra subito la percentuale globale di supporto;
• una tabella visuale dettaglia versione per versione di ogni browser;
• statistiche separate per desktop e mobile;
• la possibilità di filtrare per area geografica (utile per progetti localizzati);
• note e limitazioni specifiche da conoscere prima di implementare.

Nel caso di AVIF, prima della migrazione ho verificato che ad oggi è accettato dal 95% dei browser in uso globalmente. È una percentuale di supporto che rende il formato pienamente utilizzabile in produzione, con il 5% residuo di browser meno recenti che può essere gestito con un fallback semplice (servendo WebP o JPEG come alternativa tramite il tag <picture>).

La regola pratica che applico nei progetti è chiara: per i formati di immagine considero accettabile l’adozione produttiva sopra il 92-93% di supporto globale, sempre con un fallback per i casi meno recenti. Caniuse.com è lo strumento che permette di prendere queste decisioni su base oggettiva e non su sensazioni.

Come scegliere il formato giusto per ogni caso

Nel 2026 la scelta del formato dovrebbe seguire questa logica decisionale concreta:

• foto realistiche: AVIF come primo formato, fallback WebP, fallback JPEG;
• grafica con trasparenze: AVIF come primo formato, fallback WebP, fallback PNG;
• icone e illustrazioni vettoriali: SVG, formato vettoriale leggero e scalabile;
• animazioni brevi: AVIF animato o WebP animato (NON usare GIF nel 2026);
• video brevi che sembrano animazioni: codifica MP4 ottimizzato con poster image AVIF.

L’implementazione del fallback si fa con il tag HTML <picture> che permette di servire formati diversi a browser diversi. È un meccanismo nativo, robusto, supportato universalmente. Una struttura tipica è:

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

Il browser usa automaticamente il primo formato che supporta. Per chi usa WordPress, plugin come ShortPixel, Imagify e WebP Express gestiscono questa logica in modo automatico, generando tutte le varianti necessarie e servendo quella corretta al browser.

Compressione e dimensionamento, i due fronti operativi

Anche con il miglior formato del mondo, un’immagine va dimensionata e compressa correttamente per essere davvero ottimizzata. Sono due operazioni distinte che vanno gestite con criterio.

Il dimensionamento corretto

Una delle cause più frequenti di siti lenti è il caricamento di immagini con dimensioni in pixel molto superiori a quelle in cui vengono effettivamente mostrate. Un’immagine 4000×3000 pixel che viene visualizzata in uno spazio 800×600 è uno spreco enorme di banda e tempo di caricamento.

Le regole pratiche del dimensionamento:

• l’immagine va salvata al massimo alle dimensioni effettive di visualizzazione;
• per immagini retina/hidpi serve il doppio delle dimensioni in pixel;
• per layout responsive serve generare più varianti per diversi breakpoint;
• il tag srcset permette di servire la variante giusta a ogni dispositivo.

La compressione intelligente

Dopo il dimensionamento si passa alla compressione vera e propria. Gli strumenti che uso quotidianamente:

• Squoosh.app: tool gratuito di Google, ottimo per compressioni puntuali;
• TinyPNG e TinyJPG: tool online classici, anche con API per automazioni;
• ShortPixel: plugin WordPress completo per ottimizzazione bulk;
• Imagify: altro plugin WordPress molto efficace con supporto AVIF nativo;
• ImageOptim: applicazione desktop Mac per compressione locale.

L’integrazione di AI nei tool di compressione ha fatto un salto enorme negli ultimi due anni. I sistemi più moderni applicano compressione differenziata pixel per pixel in base alla complessità visiva del contenuto, ottenendo riduzioni di peso molto superiori a quelle dei vecchi algoritmi standard. Il tempo di lavoro per ottimizzazioni in bulk si è ridotto del 70% rispetto ai workflow manuali del 2023.

Nome file, alt e title, i tre parametri SEO da curare

Sui parametri descrittivi delle immagini si gioca buona parte del valore SEO. Sono dettagli che molti trascurano ma che fanno una differenza misurabile, soprattutto sulla ricerca per immagini Google e sulla citazione nelle risposte degli AI Overviews.

Il nome del file

Il nome del file deve essere descrittivo e leggibile, non un codice generato in automatico dalla fotocamera. Le regole sono:

• tutto in minuscolo, senza spazi né caratteri speciali;
• parole separate da trattini, non da underscore (Google preferisce i trattini);
• descrittivo del contenuto, contenente quando appropriato la keyword target;
• conciso, idealmente sotto i 60 caratteri totali.

Esempio: scarpa-da-corsa-nike-pegasus-blu.avif è infinitamente migliore di IMG_2847.JPG.

L’attributo alt

L’attributo alt è il testo alternativo che descrive il contenuto dell’immagine. Ha tre funzioni essenziali:

• accessibilità: gli screen reader leggono l’alt per descrivere l’immagine alle persone con disabilità visive;
• fallback: appare al posto dell’immagine quando questa non si carica per problemi tecnici;
• SEO: è uno dei segnali principali che Google usa per capire cosa rappresenta l’immagine.

Un buon alt descrive l’immagine in modo naturale, contiene quando ha senso la keyword pertinente, ma evita il keyword stuffing. La lunghezza ideale è tra 80 e 125 caratteri.

L’attributo title

L’attributo title è il testo che appare in tooltip quando l’utente passa il mouse sopra l’immagine. È meno critico dell’alt dal punto di vista SEO ma utile per informazioni complementari. Va usato quando aggiunge valore, non per ripetere semplicemente l’alt.

I metadati IPTC e l’image SEO avanzata

I metadati IPTC (International Press Telecommunications Council) sono informazioni strutturate incorporate direttamente nel file immagine. Nascono dal mondo giornalistico e fotografico per gestire la catalogazione di archivi enormi, ma hanno un valore SEO crescente.

I metadati IPTC includono campi come:

• titolo dell’immagine;
• descrizione estesa del contenuto;
• parole chiave tematiche;
• autore e dettagli di copyright;
• data di creazione;
• fonte e licenza.

L’inserimento avviene tramite software come Adobe Photoshop (funzione “File Info”), Adobe Bridge, Lightroom, o tool dedicati come ExifTool. Una volta inseriti, i metadati restano nel file e Google li legge durante l’indicizzazione delle immagini.

Il punto interessante è che gli AI Overviews di Google e i motori generativi danno crescente importanza ai metadati IPTC per identificare contesto e autorialità delle immagini. Lavorare bene su questi metadati significa avere una marcia in più nella ricerca immagini e nella citazione nei contenuti AI.

Lazy loading e tecniche di caricamento moderne

Oltre all’ottimizzazione del singolo file, le tecniche di caricamento moderne permettono di velocizzare drasticamente la percezione di velocità del sito.

Le tecniche fondamentali nel 2026 sono:

• lazy loading: le immagini sotto la piega si caricano solo quando l’utente scrolla vicino;
• srcset responsive: il browser sceglie la variante giusta in base al dispositivo;
• preload delle immagini critiche: l’immagine LCP viene caricata con priorità massima;
• placeholder a colore dominante: prima che l’immagine arrivi, appare un blocco del colore principale;
• blur-up loading: una versione sfocata caricata immediatamente, poi sostituita da quella nitida.

Tutte queste tecniche concorrono a migliorare i Core Web Vitals, in particolare LCP (Largest Contentful Paint) e CLS (Cumulative Layout Shift). L’aggiornamento del 2026 ha portato la soglia LCP “good” sotto 1,5 secondi, rendendo l’ottimizzazione immagini ancora più critica di prima. Una trattazione approfondita delle tre metriche principali, con i nuovi valori soglia e le tecniche di intervento, è disponibile leggendo il mio approfondimento sui Core Web Vitals.

L’AI nell’ottimizzazione immagini, cosa cambia nel 2026

L’integrazione di funzionalità AI nei tool di ottimizzazione immagini ha trasformato il workflow operativo. Le novità più rilevanti sono tre.

Primo: compressione adattiva intelligente. Gli algoritmi AI valutano la complessità visiva di ogni porzione dell’immagine e applicano compressione differenziata. Aree complesse mantengono alta qualità, aree uniformi vengono compresse aggressivamente. Il risultato è una qualità percepita molto superiore a parità di peso.

Secondo: generazione automatica di alt text descrittivi. Tool come Google Photos, Adobe Photoshop, plugin WordPress dedicati analizzano il contenuto dell’immagine e propongono alt text contestualmente rilevanti, da revisionare e affinare manualmente. Per siti con migliaia di immagini è un’accelerazione enorme del lavoro.

Terzo: ottimizzazione bulk con AI. Workflow che processano cataloghi interi di immagini applicando compressione, generazione varianti responsive, riscrittura metadati in batch. Il tempo per ottimizzare cataloghi grandi è sceso da settimane a giorni.

Per gli e-commerce con migliaia di prodotti queste tecnologie hanno reso possibile mantenere un’ottimizzazione di qualità professionale anche su scale che prima richiedevano team dedicati. L’intero panorama dell’AI applicata allo shopping online, dalle raccomandazioni alla ricerca visuale, viene raccontato nell’articolo dedicato sul mio blog all’intelligenza artificiale e gli e-commerce moderni.

Gli errori più frequenti nell’ottimizzazione immagini

Nei progetti che eredito vedo ricorrere gli stessi errori, anno dopo anno. Li elenco perché sono spesso il motivo principale di siti lenti che potrebbero essere veloci con poche correzioni:

• caricare immagini di dimensioni enormi ridimensionate via CSS;
• usare JPEG dove servirebbe WebP/AVIF: peso doppio o triplo gratuitamente;
• dimenticare l’attributo alt: danno sia all’accessibilità sia alla SEO;
• nomi file generici tipo IMG_4521.jpg, occasione SEO buttata;
• ignorare lazy loading: tutte le immagini si caricano subito anche se non visibili;
• nessun fallback con tag picture: alcuni utenti vedono immagini rotte;
• compressione troppo aggressiva: artefatti visibili che danneggiano la credibilità;
• upload di GIF animate pesanti: nel 2026 usare formati video o WebP animati;
• non aggiornare le immagini storiche: solo i contenuti nuovi sono ottimizzati;
• trascurare i metadati IPTC: opportunità di image SEO sprecata.

L’errore strategico più grave è uno: trattare le immagini come accessorio decorativo invece che come asset tecnico. Un sito con immagini ben ottimizzate non solo carica più velocemente, ma comunica anche cura professionale, attenzione ai dettagli, qualità complessiva.

Performance, qualità e attenzione ai dettagli

Abbiamo visto cosa significa ottimizzare le immagini per il web e perché è una delle attività con miglior rapporto sforzo-risultato in ambito SEO, quali sono i formati moderni (JPEG, PNG, GIF, WebP, AVIF, SVG) e quando usarne uno o l’altro, perché ho recentemente migrato tutti i progetti dei clienti da WebP ad AVIF con riduzioni di peso del 20-50%, come uso caniuse.com per validare ogni decisione tecnica su basi oggettive verificando ad esempio il 95% di compatibilità attuale di AVIF, come gestire dimensionamento e compressione con i tool giusti, perché nome file, alt, title e metadati IPTC sono fondamentali per il posizionamento delle immagini, come sfruttare lazy loading e srcset per migliorare i Core Web Vitals, cosa cambia con l’integrazione AI nei workflow del 2026 e quali sono gli errori più frequenti da evitare.

La riflessione finale è semplice: l’ottimizzazione delle immagini non è un dettaglio tecnico, è un investimento diretto sulla qualità percepita del sito. Pochi millisecondi guadagnati sul caricamento si traducono in tassi di conversione migliori, posizionamenti più solidi, esperienza utente che invoglia a tornare. È una di quelle attività che separano i siti dilettantistici da quelli realmente professionali, e che chi gestisce progetti seri non può permettersi di trascurare.