Ottimizzazione delle Immagini: Il Segreto SEO Sottovalutato

Quelle Immagini da 3 MB Che Ti Stanno Affondando il Sito

Ti sorprenderebbe sapere quanti siti che analizzo hanno immagini da 3MB caricate così, senza alcuna ottimizzazione. L'altro giorno stavo facendo un audit per un cliente qui a Perugia – un e-commerce con circa 200 prodotti – e la home page pesava 28 megabyte. Ventotto. La metà di quel peso erano immagini caricate direttamente dalla fotocamera, a risoluzione piena, senza nessun tipo di compressione.

Il risultato? La pagina ci metteva 12 secondi a caricarsi su una connessione mobile media. Google PageSpeed gli dava un punteggio di 8 su 100. Otto. E poi il cliente si lamentava che non si posizionava. Beh, ci credo.

L'ottimizzazione delle immagini è probabilmente l'intervento SEO con il miglior rapporto sforzo-risultato che esista. Eppure è sistematicamente sottovalutato. Oggi ti spiego tutto quello che devi sapere, senza tecnicismi inutili ma senza semplificare troppo.

I Formati: JPEG, PNG, WebP, AVIF – Quale Usare e Quando

Partiamo dalle basi. Non tutti i formati immagine sono uguali, e scegliere quello giusto fa una differenza enorme.

JPEG: Il Veterano Affidabile

Il JPEG è il formato che tutti conoscono. Ottimo per le fotografie, supporta milioni di colori, e permette di regolare il livello di compressione. Un JPEG salvato a qualità 80-85% è praticamente indistinguibile dall'originale a occhio nudo, ma pesa una frazione.

Quando usarlo: foto di prodotti, immagini di sfondo, foto del team, qualsiasi immagine fotografica.

Quando evitarlo: loghi, icone, grafiche con testo, immagini che necessitano di trasparenza.

PNG: Quando Serve la Trasparenza

Il PNG è il formato da usare quando hai bisogno di trasparenza (sfondo trasparente) o quando hai grafiche con bordi netti, testo, loghi. Il problema del PNG è che pesa parecchio, soprattutto nelle versioni PNG-24 con trasparenza.

Un errore che vedo spessissimo: foto normali salvate in PNG. Una foto che in JPEG peserebbe 200KB, in PNG ne pesa facilmente 2MB. Non ha senso. Se non ti serve la trasparenza, non usare il PNG per le foto.

WebP: Il Presente

WebP è il formato sviluppato da Google che offre compressione superiore sia al JPEG che al PNG. Un'immagine WebP pesa mediamente il 25-35% in meno rispetto al corrispondente JPEG a parità di qualità visiva. Supporta anche la trasparenza, come il PNG, ma con file molto più leggeri.

Nel 2025 il supporto dei browser è praticamente universale: Chrome, Firefox, Safari, Edge lo supportano tutti. Non ci sono più scuse per non usarlo.

AVIF: Il Futuro (Quasi Presente)

AVIF è il formato più recente e offre una compressione ancora migliore del WebP, fino al 50% in meno rispetto al JPEG. La qualità è eccellente, soprattutto per le fotografie.

Il supporto browser sta crescendo rapidamente, ma non è ancora al 100%. Il mio consiglio: usalo con un fallback. Servi AVIF a chi lo supporta, WebP come alternativa, e JPEG come ultima risorsa. L'elemento HTML <picture> ti permette di fare esattamente questo.

Compressione: Gli Strumenti Che Uso Ogni Giorno

Comprimere le immagini non significa rovinarle. Significa rimuovere dati non necessari mantenendo la qualità visiva. Ci sono due tipi di compressione:

• Lossless (senza perdita) – Riduce il peso senza toccare la qualità. Il risparmio è modesto, tipicamente il 10-30%.
• Lossy (con perdita) – Sacrifica un po' di qualità (di solito impercettibile) per risparmi di peso molto più consistenti, anche il 70-80%.

Gli strumenti che uso e raccomando:

• Squoosh (squoosh.app) – Gratuito, online, fatto da Google. Ti fa vedere il prima e dopo fianco a fianco. Perfetto per comprimere singole immagini.
• ShortPixel – Plugin WordPress eccellente. Comprime automaticamente le immagini quando le carichi. Ha un piano gratuito con 100 immagini al mese.
• ImageOptim (Mac) e FileOptimizer (Windows) – Applicazioni desktop per compressione batch.
• Sharp (Node.js) e Pillow (Python) – Per chi ha bisogno di automazione a livello di codice.

Il mio workflow tipico: ridimensiono l'immagine alla dimensione massima a cui verrà visualizzata, la converto in WebP con qualità 80%, e verifico visivamente il risultato. In quasi tutti i casi il risparmio è superiore al 70% senza perdita di qualità percepibile.

Alt Text: Non È Solo per la SEO

Il testo alternativo (attributo alt) delle immagini è una di quelle cose che tutti sanno di dover compilare ma pochi fanno bene. Servono due chiarimenti fondamentali.

Primo: l'alt text esiste innanzitutto per l'accessibilità. Le persone che usano screen reader si affidano all'alt text per capire cosa mostra un'immagine. Scrivere alt text scadenti non è solo cattiva SEO, è escludere delle persone dal tuo contenuto.

Secondo: Google usa l'alt text per capire il contenuto delle immagini. Quindi sì, è un fattore SEO. Ma se lo scrivi pensando prima all'utente e poi a Google, funziona meglio per entrambi.

Come scrivere un buon alt text:

• Descrivi cosa mostra l'immagine – "Piatto di strangozzi al tartufo nero di Norcia serviti su piatto di ceramica" è meglio di "piatto pasta".
• Sii specifico ma conciso – 10-15 parole sono più che sufficienti nella maggior parte dei casi.
• Includi la keyword se pertinente – Se l'immagine mostra davvero quello che stai cercando di posizionare, la keyword ci sta naturalmente. Ma non forzarla.
• Non iniziare con "Immagine di..." – Lo screen reader sa già che è un'immagine. È ridondante.
• Lascia vuoto per immagini decorative – Se un'immagine è puramente decorativa (bordi, sfondi, separatori), usa alt="" vuoto. Non tutto ha bisogno di una descrizione.

Lazy Loading: Carica Solo Quello Che Serve

Il lazy loading è una tecnica che ritarda il caricamento delle immagini fino a quando l'utente non scorre la pagina fino a raggiungerle. In pratica: le immagini che sono fuori dallo schermo non vengono scaricate subito, ma solo quando servono.

Il bello è che oggi implementarlo è semplicissimo. Basta aggiungere loading="lazy" al tag img. Così:

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

Tutti i browser moderni lo supportano nativamente. Non servono librerie JavaScript, non serve codice complicato.

Attenzione però: non mettere lazy loading sulle immagini above the fold (quelle visibili senza scrollare). Quelle devono caricarsi subito, anzi il più velocemente possibile. Il lazy loading va usato solo per le immagini che stanno più in basso nella pagina.

Immagini Responsive: Una Versione Non Basta

Un altro errore classico: caricare un'immagine da 2000 pixel di larghezza e mostrarla a 400 pixel su mobile. Il browser scarica un file enorme per poi visualizzarlo in piccolo. Uno spreco assurdo di banda e di tempo di caricamento.

La soluzione è servire immagini di dimensioni diverse in base al dispositivo. L'attributo srcset fa esattamente questo:

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

Sì, significa creare più versioni di ogni immagine. Ma i CMS moderni e i servizi di hosting immagini lo fanno automaticamente. WordPress, ad esempio, crea già diverse dimensioni per ogni immagine che carichi. Basta usarle correttamente nel tema.

Nomi dei File: Sì, Contano

Sembra una sciocchezza, ma il nome del file immagine conta per la SEO. Google lo legge e lo usa come segnale aggiuntivo per capire il contenuto dell'immagine.

Male: IMG_20250315_142856.jpg, screenshot-2.png, foto(1).jpeg

Bene: strangozzi-tartufo-nero-ristorante-perugia.webp, consulente-seo-perugia-andrea-baglioni.webp

Le regole sono semplici: parole separate da trattini, tutto minuscolo, niente caratteri speciali, descrittivo del contenuto. Non è il fattore SEO più importante del mondo, ma quando stai ottimizzando tutto il resto, perché lasciare punti sul tavolo?

Image Sitemap e CDN: Il Tocco Finale

Se il tuo sito ha molte immagini (e-commerce, portfolio, blog fotografico), vale la pena creare una image sitemap dedicata. È un file XML che elenca tutte le immagini del sito e aiuta Google a scoprirle e indicizzarle più velocemente.

Yoast SEO e altri plugin li generano automaticamente, ma controlla che le immagini siano effettivamente incluse. A volte i plugin non le catturano tutte, specialmente se sono caricate in modo non standard.

Per quanto riguarda i CDN (Content Delivery Network): se il tuo sito ha traffico da tutta Italia o dall'estero, un CDN può velocizzare enormemente il caricamento delle immagini. Servizi come Cloudflare (gratuito nel piano base), BunnyCDN o imgix servono le immagini dal server più vicino all'utente, riducendo i tempi di caricamento.

Un CDN specializzato in immagini come Cloudinary o imgix può anche occuparsi della conversione automatica dei formati, del ridimensionamento e della compressione. Carichi l'immagine originale e il CDN la serve nel formato ottimale per ogni browser e dispositivo. Una comodità non indifferente.

L'Impatto sulla Velocità (e Quindi sul Posizionamento)

Concludo con un dato che dovrebbe motivarti ad agire subito. Ho fatto un test su un sito di un cliente: stessa pagina, stessi contenuti, solo immagini ottimizzate. Il tempo di caricamento è passato da 7.2 secondi a 1.8 secondi. Il punteggio PageSpeed da 34 a 89. E nel giro di un mese, il traffico organico è aumentato del 22%.

Google lo dice chiaramente: i Core Web Vitals sono un fattore di ranking. E il Largest Contentful Paint (LCP), che misura quanto velocemente appare il contenuto principale della pagina, è quasi sempre legato a un'immagine. Ottimizza quell'immagine e il tuo LCP migliorerà drasticamente.

Non è magia, non è teoria: è una delle poche cose in SEO che puoi fare oggi e vedere risultati domani.