Se le immagini prodotto sono lente, pesanti o confuse, perdi traffico e vendite. Io parto sempre da qui: formato giusto, dimensioni corrette, compressione, alt text chiaro e delivery responsive. Sono i 5 punti che incidono di più su ranking, UX e conversione.
In pratica, per una scheda prodotto controllo subito questo:
- LCP sotto 2,5 secondi
- CLS sotto 0,1
- hero image non in lazy load
- WebP o AVIF dove possibile
- dimensioni dichiarate in HTML
- alt text e nomi file descrittivi
srcsete<picture>per mobile e desktop- markup
Productcon immagini collegate
Se devo dirlo in una frase: una buona SEO immagini non parte dai metadati, ma da peso, formato e consegna del file. Poi aggiungo contesto con HTML, alt e dati strutturati.
Per fissare le priorità, uso questo schema rapido:
| Area | Cosa controllo | Obiettivo |
|---|---|---|
| Prestazioni | LCP e CLS | < 2,5 s e < 0,1 |
| Formato | WebP / AVIF / JPEG fallback | file più leggeri |
| Dimensioni | hero, gallery, thumbnail, zoom | niente file fuori scala |
| Caricamento | lazy solo sotto la fold | meno peso iniziale |
| SEO on-page | nome file, alt, contesto testuale | immagini più chiare per Google |
| Mobile | srcset, sizes, <picture> |
file giusto per ogni schermo |
| Markup | Product in JSON-LD |
relazione tra prodotto e immagini |
Il punto chiave è semplice: io non tratto le immagini come un dettaglio grafico. Le tratto come una parte diretta della pagina prodotto, con impatto su velocità, visibilità e fiducia.
Formati, Dimensioni e Standard per le Immagini
Prima di caricare qualsiasi immagine, conviene decidere tre cose: formato, dimensioni e regole comuni per tutto il catalogo. Se sistemi questi aspetti subito, eviti di rimettere mano a centinaia di file più avanti. Dopo LCP e CLS, il primo passo pratico è proprio questo: scegliere formato e misure giuste.
JPG, PNG, WebP e AVIF: quale formato usare sulle pagine prodotto
Il formato cambia sia il peso del file sia la resa visiva.
WebP è il formato di riferimento per l’e-commerce: a parità di qualità percepita, pesa meno del JPEG. AVIF va ancora oltre, perché comprime meglio del WebP, ma funziona bene solo se CMS e browser lo gestiscono senza problemi. JPEG resta utile come formato di riserva per browser meno recenti. PNG, invece, ha senso solo quando serve la trasparenza, per esempio con loghi o icone: sulle foto prodotto tende a creare file molto pesanti.
| Formato | Uso consigliato | Punti di forza | Limitazioni |
|---|---|---|---|
| JPEG | Soluzione di riserva per fotografie | Compatibilità universale | Nessuna trasparenza, più pesante di WebP/AVIF |
| PNG | Loghi, icone, trasparenza | Supporta il canale alpha | File pesanti su fotografie |
| WebP | Immagini prodotto standard | Più leggero del JPEG, supporta trasparenza | Richiede soluzione di riserva per browser molto datati |
| AVIF | Immagine hero ad alta qualità | Compressione migliore del WebP | Richiede supporto CMS e browser moderni |
| SVG | Icone e grafica vettoriale | Scalabile, leggerissimo | Non adatto a fotografie reali |
Definire le dimensioni in pixel per hero, gallery, zoom e thumbnail
Uno degli errori più comuni è caricare un solo file enorme e usarlo ovunque. Sembra comodo, ma in pratica spreca banda e appesantisce la pagina. Ogni immagine ha un ruolo diverso, quindi deve avere anche una dimensione adatta.
| Tipo immagine | Dimensioni consigliate (px) | Peso target | Formato prioritario |
|---|---|---|---|
| Immagine hero / Principale | 800×800 – 1.200×1.200 | 250–300 KB | AVIF > WebP |
| Immagini di galleria / Immagini lifestyle | 800×800 | < 200 KB | WebP |
| Thumbnail | 200×200 – 300×300 | < 150 KB | WebP |
| Zoom | 2.000×2.000 – 3.000×3.000 | 500 KB – 1 MB | WebP (caricamento su richiesta) |
| Loghi / Icone | Variabile | < 50 KB | SVG o PNG |
A questo punto entra in gioco il secondo controllo che conta: la coerenza del catalogo.
Creare standard interni per la coerenza del catalogo
Dopo aver scelto formato e dimensioni, servono regole uguali per tutti i prodotti.
Quando gestisci decine o centinaia di SKU, la coerenza visiva pesa sulla fiducia dell’utente e sulla leggibilità del catalogo per i motori di ricerca. Per dirla in modo semplice: un catalogo ordinato si gestisce meglio, si aggiorna meglio e si presenta meglio.
Parti dai nomi file. Usa nomi descrittivi con trattini, nel formato {prodotto}-{colore}-{vista}.webp. Per esempio: scarpa-running-nike-nera-fronte.webp. Per le varianti, colore, materiale e vista devono comparire sia nel nome file sia nell’alt text. Questo aiuta Google a collegare ogni immagine alla pagina prodotto giusta e a indicizzare le varianti in modo più preciso.
Sul lato visivo, conviene fissare poche regole chiare:
- Sfondo uniforme
- Illuminazione coerente
- Rapporto d’aspetto standardizzato, per esempio 1:1 quadrato o 4:3
In pratica, è come dare una griglia al catalogo: ogni prodotto resta diverso, ma tutto appare ordinato. Per tenere il lavoro sotto controllo, usa un foglio condiviso o un DAM per standardizzare i nomi file.
sbb-itb-bc3fb49
Compressione delle Immagini e Velocità di Consegna
Una volta scelti formato e dimensioni, il vero freno diventa il peso del file. E qui si gioca una parte grossa della partita: le immagini, spesso, pesano più di qualunque altro asset della pagina. Se le alleggerisci nel modo giusto, i tempi di caricamento scendono e l’effetto si vede anche sulle conversioni.
Compressione lossy e lossless per le immagini prodotto
La compressione lossy è la scelta più adatta per le fotografie prodotto. Con una qualità tra 75% e 85%, il peso del file può scendere del 40-60%, con una differenza visiva quasi impercettibile. In pratica: risparmi parecchi KB senza rovinare la foto.
La compressione lossless, invece, funziona meglio per loghi, icone e grafiche con trasparenza. In questi casi ogni bordo deve restare pulito e ogni dettaglio ben definito.
C’è poi un errore che si vede spesso: comprimere un file già compresso. Il risultato? Artefatti visibili e nessun vero vantaggio sul peso. Meglio partire sempre dall’originale in alta qualità.
Per lavorare in batch puoi usare strumenti come:
- ShortPixel
- TinyPNG
- Squoosh
Se gestisci cataloghi molto ampi, conviene affidare la conversione direttamente al CDN.
Lazy loading, immagini correttamente dimensionate e CDN
Il lazy loading, tramite l’attributo loading="lazy", dice al browser di caricare le immagini fuori dalla schermata iniziale solo quando l’utente sta per raggiungerle. Questo taglia il peso iniziale di oltre il 50%. Ha senso usarlo per gallerie, miniature e prodotti correlati.
L’immagine principale del prodotto, però, segue un’altra logica. Nella maggior parte dei casi è l’elemento che incide sull’LCP (Largest Contentful Paint), quindi non va mai caricata in lazy. Va invece trattata come prioritaria con fetchpriority="high", così il browser la recupera subito.
Un altro scivolone comune è questo: caricare immagini più grandi del necessario e poi rimpicciolirle solo via CSS. Il problema è semplice: il browser scarica comunque il file intero. Quindi ogni variante va servita nella sua dimensione reale, senza usare il CSS come toppa.
Per un e-commerce con traffico italiano, un CDN aiuta a ridurre la latenza perché distribuisce i file dagli edge server più vicini all’utente. In più può gestire la conversione automatica in WebP o AVIF in base al browser.
A questo punto, il lavoro non finisce: serve controllare cosa cambia nei dati e intervenire prima sulle pagine più pesanti.
Misurare le performance con PageSpeed e i dati reali
Google PageSpeed Insights è il primo posto in cui guardare. Segnala sia le immagini non ottimizzate sia quelle troppo grandi per l’uso che ne fai nella pagina. Il metodo più utile è semplice: usa PageSpeed Insights prima e dopo gli interventi e concentra l’analisi sulle prime 100 pagine prodotto per traffico. Sono quelle che hanno il peso maggiore su conversioni e visibilità organica.
Per capire cosa succede fuori dal laboratorio, entra in gioco il Chrome User Experience Report (CrUX). Qui non stai guardando una simulazione: vedi come utenti reali sperimentano la pagina.
Quando peso e velocità iniziano a stare sotto controllo, il passo dopo è dare più contesto alle immagini con file name, alt e structured data.
Metadata, HTML e Dati Strutturati per le Immagini Prodotto
Formato, peso e velocità sono già a posto. Il passo dopo è fare in modo che ogni immagine sia chiara anche per i motori di ricerca. Qui entrano in gioco tre livelli: nome file, contesto nella pagina e dati strutturati.
Scrivi nome file e testo alternativo chiari per prodotti e varianti
Parti dal nome file. Usa nomi descrittivi con i trattini, nel formato {nome-prodotto}-{colore}-{vista}.webp. Per esempio: borsa-tracolla-pelle-rossa-frontale.webp.
Per il testo alternativo, la regola è semplice: scrivi una descrizione breve che includa nome prodotto, variante e vista. Ogni immagine deve avere un alt diverso in base all’inquadratura – frontale, posteriore, close-up, lifestyle – così distingui le varianti senza ripetere sempre lo stesso testo.
In pratica, l’alt non dovrebbe essere un riempitivo. Deve dire in modo chiaro cosa si vede.
Usa titoli, didascalie e testo prodotto per supportare il contesto
Il testo attorno a un’immagine aiuta a chiarirne il senso. L’H1 e il titolo prodotto devono includere il nome del prodotto e restare allineati con quello che l’utente vede nella foto. Anche la descrizione breve, le specifiche tecniche e gli H2/H3 vicini all’immagine aiutano a spiegare di cosa si parla.
Le didascalie servono quando aggiungono un dettaglio che non è già presente nel testo. Se non dicono nulla di nuovo, rischiano solo di appesantire la pagina.
A questo punto, il contesto visivo va reso chiaro anche nel markup.
Aggiungi il markup Product e organizza la libreria media
Il markup mette in relazione immagine, prodotto e variante in un formato leggibile per i motori di ricerca. Il markup Product in JSON-LD collega le immagini a dati precisi: la proprietà image deve puntare sia alla foto principale sia alle immagini della galleria.
Le proprietà da inserire sono:
image– URL della foto principale e delle immagini aggiuntiveoffers– prezzo, valuta e disponibilitàaggregateRating– punteggio medio e numero di recensionisku– codice prodotto per query su modelli e variantibrand– produttore o marchio per Google Shopping e ricerca visiva
Controlla sempre il markup con il Rich Results Test di Google prima della pubblicazione. Puoi anche monitorare eventuali errori di indicizzazione tramite la Google Search Console. Basta un errore nel tipo di dato per far saltare i risultati arricchiti.
Per la libreria media, conviene scegliere una convenzione chiara fin dall’inizio. Se il catalogo è ampio, un foglio di calcolo con nome file, alt e URL per ogni variante basta per tenere ordine e non perdersi per strada.
SEO Immagini Mobile-First e Manutenzione nel Tempo
Flusso di Lavoro SEO Immagini per Schede Prodotto
Servi immagini responsive con srcset e picture
Dopo formato, dimensioni e compressione, c’è un altro passaggio che fa la differenza: mostrare la versione giusta a ogni schermo. Su mobile, immagini troppo pesanti rallentano il caricamento e fanno salire l’abbandono.
La base è l’attributo srcset, che ti permette di offrire almeno tre versioni della stessa immagine: 400px per mobile, 800px per tablet e 1.200px per desktop. Le versioni ad alta risoluzione vanno usate solo quando servono, per esempio per lo zoom.
Poi entra in gioco sizes. Questo attributo dice al browser quanto spazio occuperà l’immagine nel layout. In pratica, lo aiuta a scegliere il file giusto senza scaricare una risorsa più pesante del necessario.
Per i formati, usa l’elemento <picture> così:
- AVIF come prima scelta
- WebP come alternativa
- JPEG come fallback per i browser più vecchi
C’è anche un dettaglio che spesso viene saltato, ma pesa parecchio: imposta sempre width e height nell’HTML per ogni immagine. Se questi attributi mancano, il browser non sa quanto spazio riservare prima del caricamento. Il risultato? La pagina si sposta mentre gli elementi entrano a schermo, con aumento del CLS. E questo colpisce sia l’esperienza utente sia il punteggio dei Core Web Vitals.
Costruisci un flusso di lavoro ripetibile per nuovi prodotti
La parte tecnica regge solo se il processo resta uguale per ogni nuovo prodotto. Nelle schede prodotto, il problema non è quasi mai una singola immagine fatta male. Il problema è un sistema che cambia ogni volta, o peggio, che non esiste affatto.
Quando arrivano un nuovo SKU o una variante stagionale, senza un flusso chiaro gli errori si sommano. All’inizio sembrano dettagli. Su un catalogo ampio, diventano un pasticcio da sistemare.
Un flusso che funziona segue sempre questo ordine:
- Denominazione standard: assegna il nome file prima dell’upload.
- Ridimensionamento: adatta le dimensioni al layout reale della pagina.
- Compressione automatica: tieni il peso sotto controllo con la pipeline del CDN o con strumenti dedicati.
- Alt text specifico per vista: frontale, laterale, dettaglio, con nome prodotto e variante.
- Validazione: testa ogni nuovo template con PageSpeed Insights e Rich Results Test.
Se gestisci cataloghi ampi, conviene usare un foglio di calcolo con nome file, alt text e variante. È un metodo semplice, ma evita molti errori banali. In più, fai un audit trimestrale per trovare immagini con nomi generici, come IMG_1234.jpg, file troppo pesanti o attributi srcset assenti nelle pagine più visitate.
Conclusione: i controlli essenziali per ogni scheda prodotto
Tutto quello visto in questa guida – formato, dimensioni, compressione, consegna, metadati, dati strutturati e performance mobile – rende di più quando viene applicato con costanza su tutto il catalogo, non solo sulle pagine che curi di più.
Chiudi sempre con questi controlli. Sono quelli che aiutano a tenere in ordine il catalogo nel tempo.
| Metrica | Obiettivo | Strumento |
|---|---|---|
| LCP (Largest Contentful Paint) | < 2,5 secondi | PageSpeed Insights / GSC |
| CLS (Cumulative Layout Shift) | < 0,1 | Chrome User Experience Report |
| Peso immagini per pagina (mobile) | < 1 MB totale | Lighthouse / WebPageTest |
| Copertura alt text | 100% delle immagini prodotto | Screaming Frog / Site Audit |
La coerenza conta più della perfezione presa da sola. Un catalogo con immagini ottimizzate in modo uniforme – anche se non perfette – porta risultati SEO e UX migliori rispetto a dieci schede prodotto fatte benissimo e centinaia di pagine lasciate indietro.
FAQs
Quando usare AVIF invece di WebP?
Conviene usare AVIF se il tuo obiettivo è ridurre il peso delle immagini senza rovinare la resa visiva.
A parità di qualità percepita, AVIF produce file dal 30% al 50% più leggeri di WebP e dal 50% al 70% più leggeri di JPEG.
Oggi il supporto supera il 96%, quindi funziona benissimo per foto e immagini ricche di dettagli, dove ogni KB in meno può fare la differenza.
Per andare sul sicuro, usalo come formato principale dentro un tag picture, con WebP o JPEG come fallback. In pratica, chi può vedere AVIF lo carica; gli altri ricevono una versione compatibile.
Quante immagini servono davvero in una scheda prodotto?
Non c’è un numero fisso: le immagini devono essere abbastanza da mostrare il prodotto da ogni angolazione e colmare il fatto che il cliente non possa toccarlo con mano.
Conta più la qualità che la quantità. Meglio poche immagini, ma pertinenti e ben organizzate, capaci di spiegare uso, dettagli e contesto senza appesantire la pagina o rallentare il caricamento. Se esageri, rischi di pesare su SEO e conversioni.
Come capire se le immagini peggiorano LCP e CLS?
Usa PageSpeed Insights.
Un LCP alto dipende spesso da immagini troppo pesanti. Un’altra causa comune è il lazy loading applicato agli elementi che si vedono subito appena si apre la pagina. In pratica, se l’immagine principale parte in ritardo, anche il dato peggiora.
Il CLS, invece, nasce spesso da immagini senza dimensioni definite nel codice. Risultato: durante il caricamento, gli elementi si spostano e il layout “salta”. Controlla anche che le immagini siano in linea con il template e che non siano più grandi del necessario.
