Strategie e strumenti per ottimizzare le immagini sul tuo sito

Ogni volta che analizzo un sito lento, il colpevole è quasi sempre lo stesso: le immagini. Foto caricate direttamente dalla fotocamera, PNG enormi usati dove basterebbe un JPEG, file da 3MB per un’immagine che viene mostrata a 400 pixel.

Le immagini rappresentano in media oltre il 40% del peso di una pagina web. È il primo posto dove intervenire se vuoi un sito più veloce. E la buona notizia è che ottimizzarle non è complicato: servono gli strumenti giusti e un po’ di metodo.

In questa guida vediamo come ottimizzare le immagini per il web in modo efficace: dalla scelta del formato alla compressione, dagli strumenti che uso quotidianamente alle strategie avanzate come lazy loading e CDN.

Cos’è l’ottimizzazione delle immagini e perché dovresti farla

Ottimizzare un’immagine significa ridurne il peso mantenendo una qualità visiva accettabile. Non si tratta solo di “comprimere”: è un lavoro che coinvolge dimensioni, formato, metodo di compressione e a volte anche il modo in cui l’immagine viene servita al browser.

Indipendentemente dal fatto che l’immagine l’abbia scattata un fotografo, oppure sia stata cercata online gratuitamente, qualsiasi immagine che si carica su un sito deve essere ottimizzata. L’obiettivo è trovare quel punto di equilibrio in cui il file pesa poco ma l’immagine è ancora bella da vedere. Con gli strumenti giusti puoi ottenere riduzioni anche dell’80% senza che nessuno noti la differenza.

Perché vale la pena investirci tempo

Il sito carica più velocemente: sembra ovvio, ma vale la pena ripeterlo. Immagini pesanti corrispondono ad un sito lento. Google dice che il 53% degli utenti abbandona una pagina se impiega più di 3 secondi a caricarsi. Tre secondi. È pochissimo, e un paio di immagini non ottimizzate bastano a sforarli.

Gli utenti non si frustrano: un sito veloce si naviga meglio. Le pagine scorrono fluide, i contenuti appaiono subito, nessuno resta a fissare uno schermo bianco aspettando che carichi quella foto in alta risoluzione che poteva pesare un decimo.

Su mobile questo conta ancora di più. Non tutti hanno una connessione veloce, e chi naviga con i dati cellulari apprezzerà non scaricare 10MB di immagini per leggere un articolo.

Google ti premia (o almeno non ti penalizza): la velocità è un fattore di ranking. Le Core Web Vitals, le metriche che Google usa per valutare l’esperienza utente, sono influenzate direttamente dalle immagini.

Il Largest Contentful Paint (LCP), per esempio, misura quanto tempo ci vuole per caricare l’elemento più grande visibile nella pagina. Indovina un po’: spesso è un’immagine. Se l’LCP supera i 2,5 secondi, hai un problema.

Risparmi spazio e soldi: immagini più leggere occupano meno spazio sul server. Se hai un sito con migliaia di foto, la differenza si sente. Anche i backup diventano più veloci.

I formati immagine: quale usare e quando

Per ottimizzare un’immagini si deve partire dalle basi, e prima di parlare di compressione bisogna parlare di formato e scegliere quello giusto. Ogni formato ha i suoi punti di forza, e usare quello sbagliato è come partire già con il piede sbagliato.

WebP

L’ho inserito per primo perché è quello che uso per tutti i progetti e per la quasi totalità delle immagini. WebP è un formato sviluppato da Google specificatamente come formato per il web, prendendo il meglio di JPEG e PNG: supporta sia la compressione lossy che lossless, gestisce la trasparenza e produce file sensibilmente più leggeri. Parliamo di riduzioni di peso che arrivano anche all’80% rispetto al JPEG a parità di qualità.

WebP è un formato relativamente nuovo, e non tutti lo conoscono (soprattutti i non addetti ai lavori), ma oramai tutti i browser moderni lo gestiscono senza problemi. Solo se devi supportare versioni molto vecchie di Safari o browser legacy potresti aver bisogno di un fallback.

Quando usarlo: praticamente sempre. È il mio formato di riferimento per qualsiasi immagine web. Va bene per foto, immagini e loghi. È il formatio che uso nel 99% dei casi.

JPEG

Il classico per le fotografie. Usa una compressione con perdita (lossy), il che significa che elimina alcuni dati per ridurre il peso. La cosa interessante è che lo fa in modo intelligente, concentrandosi sui dettagli che l’occhio umano nota meno.

Quando usarlo: fotografie, immagini con tante sfumature e colori, sfondi fotografici.

Quando evitarlo: loghi, icone, qualsiasi cosa con trasparenza o bordi netti. Il JPEG non supporta la trasparenza e tende a creare artefatti visibili sui bordi definiti.

PNG

Il formato per la grafica. Supporta la trasparenza (il famoso canale alfa) e usa una compressione senza perdita. Il file decompresso è identico all’originale.

Il problema? Per le fotografie produce file enormi. Ho visto PNG di screenshot che pesavano 5-6MB quando lo stesso file in JPEG sarebbe stato sotto i 500KB.

Quando usarlo: loghi, icone, screenshot, grafiche con aree di colore piatto, qualsiasi cosa che richieda trasparenza.

Quando evitarlo: fotografie. Sul serio, mai usare PNG per le foto.

AVIF

È il formato più recente e più efficiente. Offre una compressione ancora migliore di WebP, con riduzioni che possono arrivare al 50% rispetto a JPEG.

Il problema è che il supporto browser è ancora in evoluzione. Chrome e Firefox lo gestiscono bene, Safari ha iniziato a supportarlo da poco. Altri browser meno diffusi ancora non lo supportano. Lo si può usare, ma bisogna avere un fallback.

Quando usarlo: quando vuoi spremere ogni KB possibile e puoi gestire i fallback. Per la maggior parte dei siti, WebP è ancora la scelta più pratica.

SVG

Un discorso a parte merita l’SVG, che non è un formato raster ma vettoriale. Le immagini SVG sono descritte matematicamente, il che significa che puoi scalarle a qualsiasi dimensione senza perdita di qualità.

Per loghi e icone è imbattibile: file leggerissimi, nitidezza perfetta su qualsiasi schermo, e puoi persino modificarli via CSS.

Quando usarlo: loghi, icone, illustrazioni semplici, elementi dell’interfaccia.

Quando evitarlo: fotografie o grafiche molto complesse. Un SVG con troppi elementi diventa pesante e lento da renderizzare.

Un breve recap dei formati delle immagini

Il workflow per ottimizzare le immagini

Una volta scelto il formato da caricare sul sito, è ora di passare alla pratica e ottimizzare l’immagine per poi caricarla online. Il wordflow che uso e che suggerisco è:

• Ridimensiona l’immagine alle dimensioni corrette;
• Comprimi e converti in WebP (o nel formato che hai scelto) trovando il giusto compromesso qualità/peso;
• Rinomina il file con un nome coerente con l’immagine;
• Rimuovi i metadati;
• Carica l’immagine su WordPress o sul tuo CMS;
• Aggiungi l’alt text per fare in modo che l’immagine sia ottimizzata per la SEO e l’accessibilità.

1. Ridimensiona alle dimensioni reali

È il primo intervento e spesso anche il più efficace. Se un’immagine viene mostrata a 800 pixel di larghezza, non ha senso caricare un file da 4000 pixel.

Esempio pratico: nel mio blog, quello che stai leggendo, la larghezza massima delle immagini in versione desktop è di 674px. Non avrebbe senso caricare un’immagine di 2000px, quindi la ridimensiono perché un’immagine di 2000px, anche compressa, pesa di più.

Sembra banale, eppure è un errore comunissimo. Il browser deve comunque scaricare l’intero file prima di ridimensionarlo, quindi stai sprecando banda e tempo di caricamento per pixel che nessuno vedrà mai.

Ora, visto che siamo tutti umani e il peso tra un’immagine da 600px e una da 700px è irrisorio, io cerco di attestarmi su cifre tonde. Non le ridimensiono a 674px, visto che sarebbe impossibile ricordarselo ogni volta, ma uso un valore di 1000px.

3. Comprimi l’immagine

La compressione è un aspetto fondamentale dove si può guadagnare davvero in termini di peso. Una compressione fatta bene può ridurre la dimensione di un’immagine anche dell’80%. Esistono due “modi” per comprimere un’immagine:

Compressione lossy (con perdita): elimina dati dall’immagine in modo intelligente, puntando sui dettagli meno percepibili. Per le fotografie JPEG, un livello di qualità tra 70 e 85 è spesso il punto ideale: il file pesa molto meno e la differenza visiva è quasi impossibile da notare. Sotto il 60% la degradazione inizia a vedersi, soprattutto nelle aree con sfumature o nei dettagli fini.

Compressione lossless (senza perdita): riduce il peso senza toccare i dati dell’immagine. La riduzione è minore (10-30% tipicamente), ma la qualità rimane intatta. Utile per grafiche che potrebbero essere modificate in futuro o dove ogni dettaglio conta, oppure in immagini che richiedono una grandissima qualità e non sono troppo grandi.

Personalmente uso molto più spesso la compressione lossy piuttosto che la lossless, visto che la compressione è molto maggiore, mentre il degrado in termini qualitativi non è così evidente. Con gli strumenti giusti si ottengono immagini qualitativamente valide anche con la compressione lossless e risparmiando un sacco di spazio.

Quanto deve pesare un’immagine?

Lo so che lo stai pensando. Quanto deve pesare l’immagine dopo la compressione? Il meno possibile potrebbe non voler dire nulla. Se l’immagine ha un peso di partenza di 5Mb e la riduci dell’80%, arriviamo a 1Mb, che per il web è comunque tanto. Mi spiace. E visto che per chi è da poco in questo mondo è difficile capire quanto deve ottimizzare, voglio darti un riferimento, o almeno, il riferimento che io uso.

150KB è il numero che io tengo sempre a mente quando ridimensiono e comprimo.

Non deve essere un numero assoluto, ma un riferimento in cui posso muovermi sopra e sotto in base la contesto. Segnifica che se nel mio sito ho un’immagine pensata a tutto schermo, sarà molto difficile raggiungere i 150KB, ma quello che farò sarà ottimizzare in modo da avvicinarmi il più possibile a quel numero.

Allo stesso tempo, se ho un’immagine ridimensionata in modo corretto che, anche con compressione lossless sta sotto i 150KB, arrivando a 140KB, la terrò buona senza pensare ad ulteriori ottimizzazioni.

È chiaro che il peso delle immagini dipende dal contesto. Se nella home page del sito ho 2 immagini da 200KB, questo non mi creerà problemi a livello di velocità. Mentre se nella pagina di un articolo del blog ho 12 immagini da 150KB, arrivo a più di 2MB solo di immagini, quindi sarà meglio lavorare ulteriormente sull’ottimizzazione.

4. Dai un nome sensato al file

I motori di ricerca non vedono le immagini come le vediamo noi. Per capire cosa rappresenta un’immagine, analizzano il nome del file, l’attributo alt e il contesto della pagina.

Un file chiamato IMG_4521.jpg non dice nulla. Un file chiamato torta-cioccolato-fondente.jpg racconta già una storia.

Qualche regola pratica:

• Usa parole descrittive del contenuto;
• Separa le parole con trattini (non underscore o spazi);
• Evita caratteri speciali e lettere accentate;
• Includi parole chiave rilevanti, ma senza forzature;

5. Rimuovi i metadati inutili

Le foto scattate con fotocamere e smartphone contengono un sacco di metadati EXIF: data e ora dello scatto, modello della fotocamera, impostazioni, a volte persino le coordinate GPS.

Sul web questi dati sono inutili (e le coordinate GPS possono essere un problema di privacy). La maggior parte degli strumenti di ottimizzazione li rimuove automaticamente, ma vale la pena verificare.

6. Aggiungi l’attributo ALT per la SEO e l’accessibilità

L’attributo alt è un testo che descrive un’immagine. Ha due scopi fondamentali.

Per l’accessibilità: gli screen reader usati da persone con disabilità visive leggono questo testo per descrivere l’immagine. Se manca o è generico, quella persona perde un pezzo di contenuto.

Per la SEO: Google non “vede” le immagini come le vediamo noi. Usa l’attributo alt (insieme al nome file e al contesto) per capire cosa rappresentano e indicizzarle. Un buon alt text può far apparire le tue immagini su Google Immagini e portare traffico.

Come scrivere un alt text efficace

Il principio è semplice: descrivi l’immagine come se stessi parlando a qualcuno che non può vederla.

<!-- ❌ Inutile -->
<img src="foto.jpg" alt="immagine">

<!-- ❌ Keyword stuffing (Google non è stupido) -->
<img src="foto.jpg" alt="scarpe running corsa maratona compra offerta sconto">

<!-- ✅ Descrittivo e utile -->
<img src="scarpe-running-nike.jpg" alt="Scarpe da running Nike Pegasus 40 grigie e verdi, vista laterale">

Qualche indicazione pratica:

• Sii specifico: “Golden retriever che corre sulla spiaggia al tramonto” batte “cane”
• Includi parole chiave se pertinenti, ma in modo naturale
• Per le immagini di prodotto, includi dettagli utili: marca, modello, colore
• Mantieniti sotto i 125 caratteri circa
• Per immagini puramente decorative (sfondi, separatori), usa alt vuoto: alt=""

Non serve scrivere “Immagine di…” o “Foto di…” all’inizio. È ridondante: il browser sa già che è un’immagine.

Gli strumenti per ottimizzare un’immagine

Ora che ci siamo fatti una carrellata sul perché ottimizzare un’immagine e su quali aspetti considerare, veniamo al come si fa nella pratica.

La prima cosa da fare è ridimenisonare l’immagine. È molto semplice e non servono applicazione di terze parti. Puoi farlo difettamente dal software per visualizzare e modificare le immagini del tuo computer (Anteprima su Mac o Foto su Windows).

Per quato riguarda la conversione e l’ottimizzazione, ci sono decine di ottimi strumenti, ma dopo averne provati parecchi vi parlo per primo di quello che uso tutti i giorni.

Squoosh

Squoosh è lo strumento che uso più spesso. È sviluppato da Google Chrome Labs, funziona direttamente dal browser senza caricare nulla su server terzi (significa che funziona anche offline) e ha tutto quello che serve:

• Controllo preciso e completo: puoi regolare qualità, metodo di compressione e vedere il risultato in tempo reale con un confronto affiancato;
• Ridimensionamento integrato: puoi ridimensionare l’immagine nella stessa interfaccia, senza passare da un altro programma;
• Conversione formato: converti tra JPEG, PNG, WebP, AVIF con un clic;
• Funziona offline: una volta caricato, puoi usarlo anche senza connessione.

Il fatto che mostri peso e qualità fianco a fianco mentre regoli i parametri è comodissimo: vedi subito l’impatto di ogni modifica e trovi il punto di equilibrio giusto.

→ squoosh.app

Altri strumenti online validi

TinyPNG / TinyJPG

Molto popolare e semplicissimo da usare: trascini le immagini, lui le comprime. Non hai lo stesso controllo di Squoosh, ma per compressioni rapide in batch è comodo. Limite di 20 immagini alla volta nella versione gratuita.

→ tinypng.com

Compressor.io

Supporta anche GIF e SVG, offre sia compressione lossy che lossless. Interfaccia pulita.

→ compressor.io

Software desktop

ImageOptim (Mac)

Ottimo per ottimizzazioni in batch. Trascini una cartella di immagini e lui le processa tutte. Usa diversi algoritmi di compressione e sceglie il risultato migliore.

Adobe Photoshop

Se ce l’hai, la funzione “Esporta per web” (File → Esporta → Salva per Web) resta un riferimento. Hai controllo totale su formato, qualità e dimensioni, con anteprima del peso finale.

GIMP

Alternativa gratuita a Photoshop. La funzione “Esporta come” permette di regolare la qualità di compressione.

Plugin WordPress per comprimere le immagini

Se lavori con WordPress, un plugin di ottimizzazione ti semplifica la vita. Comprime automaticamente le immagini al caricamento e può processare in blocco quelle già presenti.

Smush

Il più diffuso. La versione gratuita ha alcune limitazioni ma per molti siti è sufficiente. Include lazy loading nella versione Pro.

Imagify

Sviluppato dal team di WP Rocket. Tre livelli di compressione, conversione WebP automatica, interfaccia chiara. Lo consiglio spesso.

ShortPixel

Buon rapporto qualità/prezzo. Supporta anche AVIF oltre a WebP.

EWWW Image Optimizer

Ha un’opzione per comprimere localmente senza inviare immagini a server esterni. Utile se la privacy è una priorità.

Strategie avanzate: lazy loading, CDN e formati next-gen

Una volta che hai le basi, ci sono alcune tecniche avanzate che possono fare la differenza.

Lazy loading

In una situazione normale tutti le immagini della pagina vengono caricate al momento dell’apertura. Questo comportamente però non è molto efficiente, visto che la porzione visibile della pagina è limitata dall’altezza dello schermo, e quindi è inutile caricare subito delle immagini che si trovano a metà o a fondo pagina.

Il lazy loading è un attributo html che perette di fare proprio questo. Se un’immagine ha l’attributo loading="lazy" le immagine vengono caricate solo quando l’utente scorre la pagina e si avvicina ad esse. Quelle in fondo alla pagina non vengono scaricate finché non servono.

Il vantaggio è evidente: la pagina si carica più velocemente perché il browser non deve scaricare subito tutte le immagini. Chi non scorre fino in fondo risparmia banda.

WordPress dalla versione 5.5 include il lazy loading nativo. L’attributo loading="lazy" viene aggiunto automaticamente.

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

Un’avvertenza: non applicare il lazy loading alle immagini “above the fold” (quelle visibili senza scrollare, come hero e header). Rallenteresti il Largest Contentful Paint, che è esattamente quello che vogliamo evitare.

CDN per le immagini

Una CDN (Content Delivery Network) distribuisce copie dei tuoi file su server in tutto il mondo. Quando qualcuno visita il sito, le immagini arrivano dal server più vicino geograficamente.

Se hai visitatori da tutto il mondo (o anche solo da tutta Italia), una CDN può ridurre sensibilmente i tempi di caricamento. Alcune CDN per immagini fanno anche ottimizzazione automatica e conversione in WebP al volo.

Opzioni da considerare:

• Cloudflare: ha un piano gratuito generoso, ottimizzazione immagini nel piano Pro
• BunnyCDN: economico e molto performante
• Cloudinary, Imgix: CDN specializzate per immagini, con trasformazioni on-the-fly

Alcuni plugin WordPress come Optimole includono una CDN dedicata per le immagini.

Servire formati next-gen con fallback

I formati di immagini sono molti, e sono nati in periodi diversi. Questo significa che il browser potrebbe non essere in grado di visualizzare correttamente i formati più moderni.

Per formati molto comuni come il jpeg e il png questo problema non si pone, visto che sono supportate anche da versioni molto vecchie dei browser. Il formato webp è anch’esso oramai ampiamente supportato, anche se installazioni molto vecchie di Chrome o Safari potrebbero non leggerlo.

Personalmente non lo ritengo un problema. Per farti un esempio, il formato webp su Firefox è stato introdotto con la versione 65, rilasciata nel 2019.

Per il formato AVIF invece la questione è un po’ diversa, visto che alcuni browser “minori”, come Opera Mobile, ancora non lo supportano. Per questo si può usare il formato il formato AVIF con una copia di fallback in jpeg o webp, cioè una copia in altro formato che viene mostrata solo se AVIF non è supportato dal browser dell’utente.

Per usare AVIF mantenendo la compatibilità con browser più vecchi, puoi usare l’elemento <picture>:

<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 il primo formato che supporta. Se non capisce AVIF né WebP, ripega sul JPEG.

I plugin WordPress come Imagify o ShortPixel gestiscono questo automaticamente: creano le versioni WebP e servono quella giusta in base al browser.

Immagini responsive con srcset

In un sito web le dimensioni delle immagini possono variare anche sulla stessa pagina. Basta pensare alla differenza di visualizzazione da desktop a mobile. Un’immagine che su un computer ha una larghezza di 800px, su uno smatphone sarà molto più stretta.

Per questo si servono immagini differenti in base al viewport, cioè alla larghezza dello schermo. Per servire immagini di dimensioni diverse si usa l’attributo scrset:

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

Con questo attributo, impostato come nell’esempio sopra, il browser sceglie la versione più adatta.

In un sito statico sia l’implementazione via codice che le immagini di differenti dimensioni va fatta manualmente, il che non è esattamente comodo. In un CMS come WordPress questo lavoro viene fatto automaticamnete, integrando l’attributo scrset al tag img e creando delle copie dei file di dimensioni differenti quando carichi un’immagini nella libreria dei media.

Una cosa in meno a cui pensare!

Come verificare che l’ottimizzazione funzioni

Hai ottimizzato le immagini. Ma come sai se hai fatto un buon lavoro? Questi strumenti ti danno una risposta.

PageSpeed Insights

Lo strumento ufficiale di Google. Inserisci un URL e ottieni un’analisi completa delle performance, sia per mobile che desktop. PageSpeed Insights da una serie di avvisi specifici sulle immagini: “Properly size images”, “Serve images in next-gen formats”, “Efficiently encode images”

→ pagespeed.web.dev

Se vedi questi avvisi, c’è ancora lavoro da fare.

GTmetrix

Analisi dettagliata con il “waterfall” delle richieste: vedi esattamente quanto tempo impiega ogni singola risorsa a caricarsi. Utile per identificare quali immagini specifiche stanno rallentando la pagina.

→ gtmetrix.com

Lighthouse (Chrome DevTools)

Integrato nel browser Chrome. Apri gli strumenti sviluppatore (F12), vai sulla tab Lighthouse e lancia un audit. Hai report dettagliati su performance, accessibilità, SEO e best practice.

Per concludere

L’ottimizzazione delle immagini per il web non è una cosa da fare “quando c’è tempo”. È una delle attività con il miglior rapporto tempo investito / risultati ottenuti. Immagini più leggere significano un sito più veloce, utenti più contenti e (probabilmente) un posizionamento migliore su Google.

I punti chiave da ricordare:

1. Ridimensiona sempre alle dimensioni reali di utilizzo;
2. Usa WebP come formato principale, con fallback JPEG o PNG se hai bisogno di compatibilità estrema;
3. Comprimi le immagini durante la conversioni in WEBP, cercando di mantenere il miglior rapporto qualità/peso;
4. Dai nomi descrittivi ai file e compila sempre gli alt;
5. Attiva il lazy loading per le immagini sotto il primo scroll;

Il prossimo passo? Prendi la pagina più pesante del tuo sito, analizzala con PageSpeed Insights e guarda cosa dice sulle immagini. Probabilmente troverai margini di miglioramento. Applica quello che hai letto qui e misura di nuovo.

La differenza si vede subito.