Ottimizzare le immagini: il trucco che nessuno fa (e costa caro)

Ogni volta che apro un sito nuovo di un cliente per la prima volta, faccio sempre la stessa cosa: apro gli strumenti di sviluppo del browser e guardo la tab Network. E puntualmente, nel 90% dei casi, vedo lo stesso problema: immagini da 3-4 MB che si caricano con una lentezza imbarazzante.

Parliamoci chiaro: le immagini sono quasi sempre il componente più pesante di un sito web. Possono rappresentare anche il 60-70% del peso totale di una pagina. E quando un'immagine pesa troppo, il sito rallenta. Punto. Non c'è framework o server che tenga.

Il bello è che ottimizzare le immagini è probabilmente una delle cose più semplici da fare, eppure tantissimi la trascurano. Vi racconto cosa faccio io, sia quando realizzo siti web professionali, sia quando devo intervenire su progetti esistenti.

Il problema che vedo più spesso

Qualche mese fa mi ha chiamato un cliente con un e-commerce che vendeva prodotti artigianali. Mi dice: "Alex, il sito è lentissimo, i clienti mi scrivono che si blocca". Apro la homepage e vedo che ci metteva quasi 8 secondi a caricare completamente. Otto secondi nel 2024 sono un'eternità.

Vado a vedere: ogni foto prodotto pesava tra i 2 e i 5 MB. Foto fatte con una reflex professionale, caricate direttamente sul sito così come uscivano dalla fotocamera. 4000x3000 pixel per mostrare un'immagine di 400x400 pixel sullo schermo. Un nonsenso totale.

La cosa assurda? Bastava ridimensionare e comprimere quelle immagini per portare il caricamento della pagina sotto i 2 secondi. Nessun cambio di hosting, nessuna CDN costosa, solo un po' di attenzione alle immagini.

I tre pilastri dell'ottimizzazione

Nella mia esperienza, ottimizzare le immagini significa lavorare su tre aspetti fondamentali: dimensioni, formato e compressione. Sembrano cose ovvie, ma vi garantisco che la maggior parte dei siti che vedo non fa nemmeno una di queste tre cose.

Primo: le dimensioni giuste. Se un'immagine viene mostrata a 800 pixel di larghezza, non ha senso caricare un file da 3000 pixel. Io uso sempre la regola del doppio: se l'immagine viene mostrata a 800px, carico un file da massimo 1600px (per gli schermi retina). Non di più. Per un e-commerce, di solito lavoro con foto prodotto di 1200-1500px di lato massimo. Più che sufficienti.

Secondo: il formato moderno. JPEG e PNG vanno ancora bene, ma esistono formati molto più efficienti. WebP, per esempio, può ridurre il peso del 25-35% rispetto a un JPEG di qualità equivalente. E ormai è supportato praticamente da tutti i browser. Quando sviluppo un sito, uso sempre WebP come formato principale, con un fallback JPEG per i browser più vecchi (che sono sempre meno, per fortuna).

Terzo: la compressione intelligente. Qui c'è un equilibrio da trovare. Comprimere troppo significa perdere qualità visiva, comprimere troppo poco significa sprecare banda. Io uso strumenti come ImageOptim o Squoosh per trovare il punto giusto. Di solito una qualità JPEG dell'80-85% è più che sufficiente per il web, e il risparmio di peso è notevole.

Il lazy loading: carica solo quello che serve

Un altro trucco che uso sempre: il lazy loading. In pratica, le immagini vengono caricate solo quando stanno per entrare nel viewport, cioè quando l'utente sta per vederle scrollando. Perché caricare 20 immagini in fondo alla pagina se l'utente potrebbe non arrivarci mai?

Il bello è che ormai è semplicissimo da implementare. Basta aggiungere l'attributo loading="lazy" ai tag <img>:

<img src="foto-prodotto.webp" 
     alt="Descrizione prodotto" 
     loading="lazy" 
     width="800" 
     height="600">

Notate che ho messo anche width e height. Questo aiuta il browser a riservare lo spazio giusto prima che l'immagine si carichi, evitando quei fastidiosi "salti" della pagina. È un dettaglio, ma fa la differenza nell'esperienza utente.

I risultati che vedo davvero

Torniamo al cliente dell'e-commerce. Dopo aver ottimizzato tutte le immagini del catalogo (circa 150 prodotti), il tempo di caricamento della homepage è passato da 8 secondi a 1.8 secondi. La pagina prodotto, che prima impiegava 5-6 secondi, ora caricava in meno di 2 secondi.

Ma il dato più interessante è un altro: il tasso di abbandono è diminuito del 23%. La gente non aspettava più che il sito si caricasse, vedeva subito i prodotti e navigava più volentieri. E questo si è tradotto in più conversioni, più vendite.

Stesso discorso per un sito vetrina che ho realizzato per un ristorante qui a Trento. Il proprietario mi aveva mandato le foto dei piatti fatte dal fotografo: file RAW convertiti in JPEG, ognuno da 6-8 MB. Dopo l'ottimizzazione, ogni foto pesava 150-200 KB invece di 6 MB. Il sito volava letteralmente, e le metriche di Google PageSpeed sono passate da 45 a 92.

Gli strumenti che uso ogni giorno

Nel mio flusso di lavoro ho alcuni tool che uso sempre. Squoosh di Google è fantastico per ottimizzare singole immagini e confrontare formati diversi. Per lavori più grossi, uso script automatizzati con ImageMagick o Sharp (una libreria Node.js). Quando lavoro su WordPress, installo sempre un plugin di ottimizzazione come ShortPixel o Imagify.

Per i progetti custom, specialmente quando sviluppo software gestionali su misura o web app, integro direttamente nel backend un sistema di resize e conversione automatica. L'utente carica l'immagine originale, il sistema genera automaticamente le versioni ottimizzate nei formati e dimensioni necessari. Così non devo dipendere dal cliente che "ricorda" di ottimizzare le foto.

Responsive images: un livello in più

Se volete fare le cose per bene, c'è un ulteriore step: le immagini responsive. In pratica, servire immagini diverse in base alla dimensione dello schermo. Non ha senso mandare un'immagine da 2000px a uno smartphone con schermo da 375px.

HTML ha due soluzioni native per questo: l'attributo srcset e il tag <picture>. Io uso spesso srcset perché è più semplice:

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

Il browser sceglie automaticamente l'immagine più adatta in base alle dimensioni dello schermo e alla connessione dell'utente. È una figata, ma devo ammettere che non tutti i miei clienti hanno bisogno di questo livello di ottimizzazione. Dipende dal tipo di sito e dal traffico.

Quanto vale davvero la velocità?

Google lo dice da anni: la velocità è un fattore di ranking. Un sito lento viene penalizzato nei risultati di ricerca. Ma al di là della SEO, c'è una cosa ancora più importante: l'esperienza dell'utente.

Secondo i dati di Google, il 53% degli utenti mobile abbandona una pagina se ci mette più di 3 secondi a caricare. Più della metà. E non tornano. Quindi tutte le energie che metti nel creare contenuti fantastici, foto bellissime, funzionalità fighe... vanno in fumo se il sito è lento.

Ottimizzare le immagini è il primo passo, quello più semplice e con il maggior impatto. Non serve essere sviluppatori esperti, non serve investire in server costosi. Serve solo un po' di attenzione e gli strumenti giusti.

Se hai un sito che senti lento, o se stai per lanciare un nuovo progetto, dammi un colpo. Posso darti una mano a velocizzare tutto, dalle immagini al codice. Lavoro con clienti qui in Trentino e online, e questa roba la faccio tutti i giorni. Scrivimi e ne parliamo davanti a un caffè (o una videocall, se preferisci).