Ottimizzazione Immagini PrestaShop: Alt Tag, Lazy Loading e Velocità della Pagina

Le immagini rappresentano il carico pi pesante su quasi ogni negozio PrestaShop con cui ho lavorato. Fotografie prodotto, banner di categoria, grafiche promozionali: su una tipica pagina di elenco prodotti, le immagini costituiscono il 50-70% del peso totale della pagina. Secondo i dati di HTTP Archive, i byte dedicati alle immagini su mobile sono aumentati di oltre dieci volte tra il 2011 e il 2025 (fonte: NitroPack). Non una tendenza: piuttosto una corsa agli armamenti contro la velocit di caricamento.

E la velocit della pagina non riguarda pi solo l'esperienza utente. Le immagini sono responsabili dell'elemento Largest Contentful Paint (LCP) sull'85% delle pagine desktop e sul 76% delle pagine mobile (fonte: MDN). L'immagine hero del prodotto quasi certamente il vostro elemento LCP, il che significa che la vostra strategia di ottimizzazione immagini determina direttamente se Google considerer i vostri Core Web Vitals come "buoni", "da migliorare" o "scarsi".

Questa guida copre tutto ci che ho imparato ottimizzando le immagini su decine di negozi PrestaShop: selezione del formato con dati reali sulle dimensioni dei file, impostazioni di qualit di compressione, implementazione del lazy loading nativo, l'attributo fetchpriority che la maggior parte dei negozi ancora non utilizza, impatto sui Core Web Vitals, rigenerazione immagini di PrestaShop e numeri reali prima/dopo da negozi in produzione.

Formati Immagine: JPEG vs. WebP vs. AVIF Con Numeri Reali

Permettetemi di chiarire il dibattito sui formati con dati concreti. Ho processato la stessa foto prodotto 800x800 (un portafoglio in pelle su sfondo bianco tipico scatto e-commerce) attraverso ciascun formato a qualit visiva comparabile:

I numeri parlano da soli. Ma la scelta del formato non riguarda solo i rapporti di compressione: fondamentale sapere quale formato usare e dove.

JPEG: La Base di Partenza

Il JPEG rimane l'opzione sicura per eccellenza. Supporto universale dei browser, rendering prevedibile e comportamento di compressione ben conosciuto. Per i negozi che non possono implementare la negoziazione dei formati (servire formati diversi a browser diversi), il JPEG a qualit 80-85 perfettamente accettabile. Sopra 85, la dimensione del file aumenta drasticamente con guadagni di qualit quasi invisibili la maggior parte degli esseri umani non riesce a distinguere un JPEG 85 da un JPEG 100 su una foto prodotto.

WebP: Il Vincitore Pratico

Il WebP offre una riduzione del 25-35% della dimensione del file rispetto al JPEG a qualit visiva equivalente. Con il 97% di supporto browser nel 2026 ogni browser moderno incluso Safari non c' pi un motivo significativo per evitare il WebP come formato principale. L'impostazione di qualit ottimale per il WebP 75-85, dove si ottiene il miglior equilibrio tra compressione e fedelt visiva.

Per i negozi PrestaShop, il WebP il formato che raccomando come standard produttivo oggi. Il divario nel supporto browser trascurabile e i risparmi sono sostanziali.

AVIF: Il Leader delle Prestazioni

L'AVIF produce file fino al 50% pi piccoli rispetto al JPEG circa il doppio del risparmio del WebP. A bassi bitrate (immagini altamente compresse), l'AVIF mantiene una qualit significativamente migliore rispetto sia al JPEG che al WebP, producendo meno artefatti di compressione. L'impostazione di qualit raccomandata 60-70, che tipicamente appare equivalente al JPEG 85 (fonte: Two Row Studio).

Il punto debole: il supporto browser si attesta intorno al 92% nel 2026. Significa che circa 1 visitatore su 12 potrebbe non supportare l'AVIF. La soluzione l'elemento <picture> con fallback dei formati:

<picture>
  <source srcset="product-image.avif" type="image/avif">
  <source srcset="product-image.webp" type="image/webp">
  <img src="product-image.jpg" alt="Blue leather wallet - front view with card slots"
       width="800" height="800" loading="lazy">
</picture>

Il browser seleziona il primo formato che supporta. I browser compatibili con AVIF ottengono il file pi piccolo. I browser compatibili con WebP ottengono la seconda miglior opzione. Tutti gli altri ricadono sul JPEG. Zero problemi di compatibilit, massima compressione per ogni visitatore.

PNG: Solo per la Grafica

Il PNG utilizza la compressione lossless e produce file drasticamente pi grandi per le fotografie. Non usate mai il PNG per le foto prodotto da 3 a 5 volte pi grande del JPEG senza alcun beneficio visivo. Il PNG corretto per loghi, icone e grafiche con testo, bordi netti o sfondi trasparenti. Per tutto il resto, usate WebP o AVIF.

Compressione nella Pratica: Prima e Dopo

Ecco come appare l'ottimizzazione delle immagini su una vera pagina di categoria PrestaShop che mostra 20 prodotti:

Prima dell'Ottimizzazione

• 20 immagini prodotto in PNG (upload originali): 11,6 MB totali
• Banner di categoria: 1,8 MB (PNG 4000x1000)
• Peso totale immagini: 13,4 MB
• Tempo di caricamento pagina: 6,2 secondi (mobile 4G)
• LCP: 4,8 secondi

Dopo l'Ottimizzazione

• 20 immagini prodotto in WebP (qualit 80, ridimensionate a 600x600): 1,4 MB totali
• Banner di categoria in WebP (ridimensionato a 1920x480): 95 KB
• Peso totale immagini: 1,5 MB
• Tempo di caricamento pagina: 1,8 secondi (mobile 4G)
• LCP: 1,6 secondi

Si tratta di una riduzione dell'89% del peso delle immagini e di un miglioramento del 67% dell'LCP da "scarso" a "buono" nella scala Core Web Vitals di Google, solo dalle immagini.

I due maggiori guadagni non erano esotici: ridimensionare alle dimensioni di visualizzazione effettive (nessuno ha bisogno di un'immagine da 4000px mostrata a 600px) e convertire da PNG a WebP. La compressione riduce le dimensioni dei file del 50-80% attraverso l'ottimizzazione lossy (fonte: NitroPack).

Tag Alt: Molto Pi di una Casella da Spuntare per la SEO

Ogni immagine del vostro negozio ha bisogno di un attributo alt descrittivo. Non opzionale: svolge tre funzioni distinte:

1. Accessibilit: I lettori di schermo usano il testo alt per descrivere le immagini agli utenti ipovedenti. In molte giurisdizioni (UE, USA, UK), l'accessibilit web un requisito legale. Un negozio e-commerce con tag alt vuoti potenzialmente non conforme.
2. SEO: I motori di ricerca non possono vedere le immagini. Il testo alt il modo in cui Google comprende cosa raffigura un'immagine, il che determina se appare nei risultati di Google Immagini. Per le immagini prodotto, la ricerca per immagini pu generare il 10-15% del traffico organico totale.
3. Fallback: Quando un'immagine non si carica (connessione lenta, interruzione CDN, percorso interrotto), il testo alt viene visualizzato al suo posto, mantenendo il contesto per l'utente.

Scrivere Tag Alt che Funzionano Davvero

Ho analizzato centinaia di negozi PrestaShop e gli stessi errori nei tag alt compaiono ovunque:

Sbagliato:

alt=""                          — Vuoto, non fornisce informazioni
alt="image1"                    — Nome file senza significato
alt="product"                   — Troppo generico
alt="buy cheap blue leather wallet best price free shipping" — Keyword stuffing

Corretto:

alt="Blue leather bifold wallet, front view showing card slots"
alt="Hand-stitched leather wallet in navy, open to show 6 card pockets"
alt="Wallet packaging — gift box with magnetic closure"

La formula: nome prodotto + caratteristica distintiva + contesto. Mantenetelo sotto i 125 caratteri. Descrivete ci che l'immagine mostra effettivamente, non ci per cui volete posizionarvi.

Per un prodotto con 5 immagini, ogni tag alt dovrebbe essere unico, descrivendo quella specifica angolazione o vista. Non cinque copie del nome del prodotto.

Automatizzare i Tag Alt in PrestaShop

Scrivere manualmente i tag alt per 5.000 prodotti con 3-5 immagini ciascuno non realistico. Sono 15.000-25.000 tag alt individuali. Usate un modulo come Automatic SEO Images Alt Tags per generare i tag alt dai dati del prodotto nome prodotto, categoria, attributi chiave poi revisionate e migliorate manualmente i prodotti con pi traffico.

I tag alt automatizzati non sono perfetti, ma sono infinitamente migliori di attributi alt vuoti su tutto il catalogo.

Lazy Loading: Il Maggior Guadagno Rapido per la Velocit della Pagina

Il lazy loading rimanda il download delle immagini fino a quando non stanno per entrare nel viewport (l'area visibile dello schermo). Su una pagina di categoria che mostra 40 prodotti, solo i primi 4-8 sono visibili senza scorrere il lazy loading significa che le altre 32-36 immagini non consumano banda fino a quando l'utente non scorre fino a esse.

Lazy Loading Nativo: L'Approccio Moderno

Dato che l'HTML ora supporta il lazy loading nativamente, l'implementazione un singolo attributo:

<img src="product.webp" alt="Blue leather wallet"
     width="600" height="600" loading="lazy">

Tutto qui. Nessuna libreria JavaScript, nessuna configurazione, nessun polyfill. L'attributo loading="lazy" supportato dal 95% dei browser nel 2026. I browser che non lo supportano caricano semplicemente l'immagine normalmente degradazione elegante senza alcuno svantaggio.

L'Errore Critico: Applicare il Lazy Loading all'Immagine LCP

Questo l'errore di performance pi comune che vedo, e il team MDN Web Docs lo segnala specificamente: il 16% delle pagine applica il lazy loading alla propria immagine LCP, che uno dei pattern di performance pi dannosi sul web (fonte: MDN).

La vostra immagine LCP tipicamente l'immagine hero del prodotto su una pagina prodotto, o la prima immagine visibile su una pagina di categoria deve caricarsi il pi velocemente possibile. Applicarle il lazy loading aggiunge un ritardo artificiale: il browser deve prima renderizzare il layout della pagina, poi calcolare che l'immagine nel viewport, poi iniziare a scaricarla. Questo aggiunge 200-500ms al tempo del vostro LCP.

L'approccio corretto per la vostra immagine LCP:

<img src="hero-product.webp" alt="Blue leather wallet - main product image"
     width="800" height="800"
     loading="eager"
     fetchpriority="high">

L'attributo loading="eager" (il default del browser) assicura il caricamento immediato. L'attributo fetchpriority="high" dice al browser di dare priorit a questa immagine rispetto ad altre risorse come fogli di stile e script. Nel 2026, fetchpriority supportato da tutti i browser moderni, eppure solo il 17% delle pagine lo usa sulla propria immagine LCP (fonte: Two Row Studio). Questa un'ottimizzazione enormemente sottovalutata.

La Regola: Eager Sopra la Piega, Lazy Sotto

• Immagine hero della pagina prodotto: loading="eager" fetchpriority="high"
• Prima riga di prodotti nella pagina di categoria (tipicamente 3-4 immagini): loading="eager"
• Tutto il resto: loading="lazy"
• Logo e immagini di navigazione: loading="eager" (sempre visibili)

Implementare questo pattern in un negozio PrestaShop richiede tipicamente la modifica del template prodotto e del template di elenco delle categorie. Un modulo come Automatic SEO Images Lazy Tags gestisce tutto automaticamente, applicando il lazy loading alle immagini sotto la piega mantenendo le immagini critiche in modalit eager.

Lazy Loading Basato su JavaScript: Quando Servono Pi Opzioni

Il lazy loading nativo copre il 95% dei casi d'uso. Il restante 5% casi in cui servono animazioni di fade-in, caricamento progressivo con placeholder sfocati o controllo specifico della soglia richiede un approccio JavaScript. Librerie come lazysizes o lozad.js forniscono queste funzionalit mantenendo buone prestazioni.

Tuttavia, il lazy loading basato su JavaScript aggiunge un overhead proprio (download, parsing ed esecuzione dello script). Per la maggior parte dei negozi PrestaShop, il lazy loading nativo sufficiente e preferibile.

Prevenire lo Spostamento del Layout (CLS) con Dimensioni Immagine Corrette

Il Cumulative Layout Shift (CLS) misura quanto il contenuto della pagina si sposta inaspettatamente durante il caricamento. Le immagini senza attributi espliciti width e height sono la causa principale del CLS sui siti e-commerce: man mano che ogni immagine si carica, il browser ricalcola il layout, spostando il contenuto.

La soluzione semplice: includete sempre gli attributi width e height su ogni tag <img>:

<img src="product.webp" alt="Blue leather wallet"
     width="600" height="600" loading="lazy">

Con il CSS, potete comunque rendere le immagini responsive prevenendo lo spostamento del layout:

img {
  max-width: 100%;
  height: auto;
}

Il browser usa gli attributi width e height per calcolare il rapporto d'aspetto prima che l'immagine si carichi, riservando lo spazio corretto nel layout. Aggiungere gli attributi width e height elimina la maggior parte dei problemi di CLS (fonte: NitroPack).

Immagini Responsive: Servire la Dimensione Giusta a Ogni Dispositivo

Un'immagine prodotto da 1200px visualizzata a 300px su uno smartphone spreca il 75% dei byte scaricati. Le immagini responsive risolvono questo problema fornendo dimensioni multiple e lasciando al browser la scelta di quella pi appropriata:

<img srcset="product-300w.webp 300w,
             product-600w.webp 600w,
             product-900w.webp 900w,
             product-1200w.webp 1200w"
     sizes="(max-width: 576px) 300px,
            (max-width: 768px) 600px,
            900px"
     src="product-900w.webp"
     alt="Blue leather wallet"
     width="900" height="900"
     loading="lazy">

L'attributo srcset elenca i file immagine disponibili con le loro larghezze. L'attributo sizes indica al browser quale dimensione di visualizzazione aspettarsi alle diverse larghezze del viewport. Il browser combina queste informazioni con il rapporto pixel del dispositivo per selezionare il file ottimale.

PrestaShop genera dimensioni multiple delle immagini attraverso la configurazione dei tipi di immagine (Back Office → Design → Impostazioni Immagini). Assicuratevi di avere i tipi di immagine configurati per le dimensioni che il vostro tema utilizza effettivamente. Dimensioni comuni per le immagini prodotto:

• Miniatura piccola: 125x125 (carrello, mini-carrello)
• Media: 300x300 (elenchi di categoria su mobile)
• Grande: 600x600 (elenchi di categoria su desktop)
• Extra grande: 1200x1200 (immagine hero della pagina prodotto, zoom)

Rigenerazione Immagini di PrestaShop

Dopo aver modificato le dimensioni dei tipi di immagine o aggiunto nuovi tipi, dovete rigenerare tutte le immagini prodotto. PrestaShop deve creare nuove miniature alle dimensioni aggiornate.

Tramite il Back Office

Navigate su Design → Impostazioni Immagini e cliccate su "Rigenera miniature" in fondo alla pagina. Selezionate quali tipi di immagine rigenerare (prodotti, categorie, marchi) e se eliminare le vecchie miniature non utilizzate.

Per cataloghi grandi, questo processo pu andare in timeout nel browser. L'approccio da back office funziona per negozi con meno di 2.000 prodotti.

Tramite Riga di Comando (Cataloghi Grandi)

Per negozi con migliaia di prodotti, usate il comando CLI che non ha le limitazioni di timeout del browser:

php bin/console prestashop:image:regenerate --type=products

Opzioni disponibili:

• --type=products rigenera solo le immagini prodotto
• --type=categories rigenera le immagini delle categorie
• --type=manufacturers rigenera le immagini dei marchi/produttori
• Omettere --type per rigenerare tutti i tipi di immagine

Per cataloghi molto grandi (10.000+ prodotti con immagini multiple ciascuno), questo processo pu richiedere ore. Eseguitelo durante le ore non di punta e monitorate le risorse del server l'elaborazione delle immagini intensiva per la CPU.

Conversione a WebP

PrestaShop 1.7.8+ e 8.x supportano nativamente la generazione di immagini WebP. Attivate l'opzione in Design → Impostazioni Immagini → Opzioni di generazione immagini. Quando abilitato, PrestaShop genera versioni WebP accanto agli originali JPEG/PNG durante la rigenerazione.

Se la vostra versione di PrestaShop non supporta la generazione nativa WebP, soluzioni a livello server come mod_pagespeed (Apache) o CDN per immagini come la funzione Polish di Cloudflare possono convertire le immagini al volo. Un modulo dedicato all'ottimizzazione delle immagini come Performance Revolution pu gestire conversione dei formati, compressione e lazy loading in un unico pacchetto.

Rimozione dei Metadati EXIF

Le foto prodotto scattate con fotocamere o smartphone contengono metadati EXIF: modello della fotocamera, coordinate GPS, timestamp, profili colore. Questi dati aggiungono 50-200 KB per immagine e non forniscono alcun valore ai visitatori del vostro negozio. Rimuovere i dati EXIF una riduzione gratuita della dimensione del file che non richiede alcun cambiamento visivo di qualit.

La maggior parte degli strumenti di compressione immagini rimuove automaticamente i dati EXIF. Se elaborate le immagini manualmente prima dell'upload, strumenti come ImageOptim (Mac), FileOptimizer (Windows) o il tool da riga di comando exiftool possono rimuovere in batch i metadati dall'intera libreria di immagini.

Nota: PrestaShop non rimuove i dati EXIF all'upload per impostazione predefinita. Qualsiasi metadato contenuto nelle immagini originali sar conservato in tutte le miniature generate.

Core Web Vitals: Comprendere i Numeri

I Core Web Vitals di Google sono le metriche di performance che influiscono direttamente sul vostro posizionamento nei risultati di ricerca. L'ottimizzazione delle immagini influenza due delle tre metriche:

Largest Contentful Paint (LCP)

L'LCP misura quanto tempo impiega l'elemento visibile pi grande a renderizzarsi quasi sempre un'immagine sulle pagine e-commerce. Le soglie di Google:

• Buono: Sotto i 2,5 secondi
• Da migliorare: Da 2,5 a 4,0 secondi
• Scarso: Oltre 4,0 secondi

Ottimizzare la vostra immagine LCP formato corretto, dimensione appropriata, fetchpriority="high", nessun lazy loading, preloading se necessario la singola azione di maggior impatto che potete fare per i Core Web Vitals del vostro negozio. I casi studio mostrano risultati eclatanti: NDTV ha migliorato l'LCP del 55%, portando a una diminuzione del 50% del bounce rate (fonte: NitroPack).

Cumulative Layout Shift (CLS)

Il CLS misura la stabilit visiva. Le soglie di Google:

• Buono: Sotto 0,1
• Da migliorare: Da 0,1 a 0,25
• Scarso: Oltre 0,25

Per le immagini, la soluzione sempre la stessa: includete gli attributi width e height. Con questi attributi, le immagini contribuiscono essenzialmente zero al CLS.

L'Impatto sul Business

Se le metriche tecniche sembrano astratte, considerate i dati di business:

• Walmart: 1 secondo di miglioramento nel tempo di caricamento = 2% di aumento nelle conversioni
• Zitmaxx Wonen: Punteggio PageSpeed perfetto + tempo di caricamento sotto i 4 secondi = 50,2% di aumento nelle conversioni mobile
• Google: Le pagine che soddisfano tutte le soglie Core Web Vitals registrano il 24% in meno di abbandoni

L'ottimizzazione delle immagini non solo un'attivit SEO: un'attivit di ottimizzazione del tasso di conversione che incide direttamente sul fatturato.

Misurare i Progressi con PageSpeed Insights

Prima e dopo qualsiasi lavoro di ottimizzazione, analizzate le vostre pagine chiave con Google PageSpeed Insights. Concentratevi su:

1. Punteggio LCP La vostra immagine hero si carica abbastanza velocemente?
2. Punteggio CLS Le immagini causano spostamenti del layout?
3. Audit "Dimensiona correttamente le immagini" State servendo immagini sovradimensionate?
4. Audit "Servi immagini in formati di nuova generazione" State usando WebP/AVIF?
5. Audit "Codifica efficientemente le immagini" I livelli di compressione sono ottimali?
6. Audit "Rinvia le immagini fuori schermo" Il lazy loading funziona correttamente?

Eseguite sia i test mobile che desktop. Il mobile ci che conta per il posizionamento (Google utilizza l'indicizzazione mobile-first), ma i risultati desktop sono importanti per l'esperienza utente sul vostro traffico effettivo.

Controllate anche il rapporto Core Web Vitals in Google Search Console (Esperienza → Core Web Vitals). Questo mostra dati sul campo da utenti reali pi accurati dei test di laboratorio, ma con una media mobile di 28 giorni, il che significa che i miglioramenti richiedono tempo per riflettersi nel rapporto.

Integrazione della Sitemap Immagini

L'ottimizzazione delle immagini non si ferma alla compressione e alla strategia di caricamento. Far apparire le vostre immagini in Google Immagini richiede una corretta scoperta. Includete le vostre immagini prodotto in una sitemap immagini (o usate estensioni per immagini nella vostra sitemap prodotti). L'Advanced SEO Sitemap Builder pu generare automaticamente sitemap immagini dal vostro catalogo prodotti PrestaShop.

Per i dettagli sulla sintassi e la struttura della sitemap immagini, consultate la nostra guida completa alle sitemap XML.

La Checklist Completa di Ottimizzazione Immagini per PrestaShop

Ecco la checklist ordinata per priorit che seguo per ogni negozio PrestaShop che ottimizzo:

1. Ridimensionate le immagini sorgente alla dimensione massima di visualizzazione Nessuna immagine dovrebbe essere pi grande di 1200px sul lato pi lungo per le immagini prodotto (2x la dimensione di visualizzazione di 600px per gli schermi retina).
2. Convertite a WebP Abilitate la generazione WebP nelle impostazioni immagini di PrestaShop e rigenerate tutte le miniature.
3. Impostate la qualit di compressione a 80 Sia per JPEG che per WebP. Una qualit sopra 85 aggiunge dimensione al file con benefici visivi impercettibili.
4. Aggiungete width e height a tutti i tag img Previene il CLS. I template del vostro tema dovrebbero includere questi attributi.
5. Implementate il lazy loading loading="lazy" su tutte le immagini tranne la prima riga visibile e le immagini di navigazione.
6. Aggiungete fetchpriority="high" all'immagine LCP La vostra immagine hero del prodotto e la prima immagine prodotto della pagina di categoria.
7. Scrivete tag alt descrittivi Automatizzate con un modulo, poi migliorate manualmente i primi 100 prodotti per traffico.
8. Rimuovete i metadati EXIF Usate uno strumento di compressione che rimuove i metadati automaticamente.
9. Implementate le immagini responsive (srcset) Servite dimensioni appropriate a mobile, tablet e desktop.
10. Considerate l'AVIF con fallback Per i negozi dove la massima compressione conta e l'implementazione dell'elemento <picture> fattibile.
11. Includete le immagini nella sitemap Generate una sitemap immagini per la scoperta su Google Immagini.
12. Testate con PageSpeed Insights Verificate che tutti gli audit relativi alle immagini passino sia su mobile che su desktop.

Conclusione

L'ottimizzazione delle immagini una di quelle rare attivit SEO che beneficiano tutti gli stakeholder. Gli utenti ottengono pagine pi veloci e migliore accessibilit. Google ottiene segnali puliti per la ricerca immagini e la valutazione dei Core Web Vitals. Il vostro server gestisce meno banda. Il vostro tasso di conversione migliora perch le pagine si caricano pi velocemente. E il vostro conto hosting potrebbe effettivamente diminuire.

Iniziate con i guadagni pi grandi: ridimensionate le immagini sovradimensionate, convertite a WebP e implementate il lazy loading con la corretta suddivisione eager/lazy. Solo questi tre cambiamenti possono ridurre il peso della pagina del 70% o pi. Poi aggiungete i perfezionamenti fetchpriority, immagini responsive, AVIF con fallback, tag alt strutturati, sitemap immagini.

I negozi che vedo performare meglio su PageSpeed non fanno nulla di esotico. Fanno i fondamentali correttamente e in modo costante su ogni pagina del catalogo. Questo l'intero segreto.