Immagini eCommerce: WebP, AVIF, srcset e lazy loading senza perdere qualita

Tempo di lettura: 5 min

In un eCommerce le immagini vendono. Ma se pesano troppo, rallentano tutto: categorie, schede prodotto, homepage, blog, feed e campagne.

Ottimizzare le immagini non significa renderle brutte o minuscole. Significa servire a ogni dispositivo il formato giusto, nella dimensione giusta, al momento giusto.

WebP, AVIF, srcset e lazy loading servono proprio a questo: mantenere qualita visiva e ridurre peso, migliorando Core Web Vitals, esperienza utente e conversioni.

Perche le immagini pesano cosi tanto sugli eCommerce

Un sito vetrina puo avere poche immagini. Un eCommerce invece ne carica ovunque:

• listing categoria;
• schede prodotto;
• varianti colore;
• zoom prodotto;
• brand page;
• banner promo;
• blog e guide;
• feed social e shopping;
• immagini generate da fornitori diversi.

Se ogni immagine e caricata in formato originale, magari 2000 o 3000 pixel anche su mobile, il sito spreca banda e tempo.

WebP e AVIF: formati moderni, non magia

WebP e AVIF possono ridurre molto il peso rispetto a JPEG e PNG, ma vanno usati bene.

• WebP: ottimo supporto browser, buon compromesso qualita/peso.
• AVIF: compressione spesso ancora migliore, ma richiede test accurati su qualita e tempi di generazione.
• JPEG: resta utile come fallback o per pipeline legacy.
• PNG: utile per trasparenze e grafica, spesso pesante per foto prodotto.
• SVG: adatto a loghi e icone, non alle foto prodotto.

La strategia migliore non e "convertiamo tutto e basta". E creare una pipeline che genera vari formati e dimensioni, poi serve la versione piu adatta.

srcset: il mobile non deve scaricare immagini desktop

srcset permette al browser di scegliere l'immagine piu adatta in base a schermo, densita pixel e layout.

Per un prodotto puoi avere versioni diverse:

• 320 px per thumbnail mobile;
• 480 px per card prodotto;
• 800 px per scheda prodotto;
• 1200 px per desktop e zoom leggero;
• 1600 px o piu per zoom vero, solo quando serve.

Questo evita che un telefono scarichi una foto enorme solo per mostrarla in una card da 160 pixel.

Lazy loading: utile, ma non sulla hero sbagliata

Il lazy loading carica le immagini quando servono, di solito quando stanno per entrare nel viewport.

Su un eCommerce e molto utile per:

• prodotti sotto la prima schermata;
• gallerie lunghe;
• articoli correlati;
• recensioni con immagini;
• contenuti editoriali non immediatamente visibili.

Ma attenzione: l'immagine principale sopra la piega, quella che contribuisce al LCP, spesso non deve essere lazy. Deve essere caricata presto, con dimensioni definite e priorita corretta.

LCP: l'immagine principale decide la percezione di velocita

Il Largest Contentful Paint misura quanto tempo impiega l'elemento principale della pagina a essere visibile. Su molte pagine eCommerce, quell'elemento e un'immagine: hero, prodotto principale o card grande.

Per migliorarlo:

• usa dimensioni corrette;
• comprimi senza perdere dettagli importanti;
• evita lazy loading sull'immagine LCP;
• definisci width e height;
• precarica solo immagini davvero critiche;
• riduci script che bloccano il rendering;
• usa CDN e cache efficaci.

Qualita: non rovinare cio che deve vendere

La compressione non deve distruggere la fiducia.

Su un eCommerce alcune immagini devono restare molto nitide:

• foto prodotto principale;
• dettagli materiali;
• etichette ingredienti;
• packaging e formato;
• zoom su texture, taglie, cuciture o componenti;
• immagini tecniche o compatibilita.

L'ottimizzazione va testata su casi reali. Se il cliente non riesce a leggere un'etichetta o vedere un dettaglio, hai risparmiato kilobyte e perso fiducia.

Alt text: performance e accessibilita non bastano

Ogni immagine importante dovrebbe avere un alt text utile. Non serve riempirlo di keyword. Serve descrivere il contenuto quando l'immagine ha valore informativo.

Esempi:

• "borsa in pelle nera con tracolla regolabile";
• "crocchette per cani in confezione da 12 kg";
• "scarpa running blu vista laterale";
• "dettaglio etichetta ingredienti prodotto".

Alt text, nome file e contesto aiutano accessibilita, comprensione e qualita della scheda.

Pipeline ideale per immagini eCommerce

Una piattaforma ben fatta dovrebbe automatizzare il piu possibile.

1. Upload immagine originale.
2. Controllo dimensioni, peso e qualita.
3. Generazione varianti responsive.
4. Conversione WebP e AVIF.
5. Creazione placeholder leggero se utile.
6. Scrittura automatica di srcset e sizes.
7. Lazy loading sulle immagini non critiche.
8. CDN e cache.
9. Monitoraggio LCP e peso pagina.

Questo riduce il lavoro manuale e impedisce che ogni nuovo prodotto rallenti il sito.

Errori comuni

• Caricare immagini enormi e ridimensionarle solo via CSS.
• Usare lazy loading anche sull'immagine principale.
• Dimenticare width e height, causando layout shift.
• Convertire tutto in WebP senza test qualita.
• Non avere fallback per formati non supportati.
• Usare PNG per foto prodotto senza motivo.
• Non distinguere thumbnail, card, scheda e zoom.
• Non ottimizzare immagini del blog o delle categorie.
• Non misurare LCP con dati reali.

Come lo gestiamo in BitHub

Nei progetti eCommerce custom lavoriamo sulle immagini come parte della piattaforma, non come intervento manuale una tantum.

Questo significa pipeline automatica, varianti responsive, formati moderni, dimensioni stabili, attenzione a LCP, alt text e qualita visiva. Se il catalogo cresce, il sistema deve continuare a produrre immagini corrette.

Il tema si collega a Green Web Audit, Core Web Vitals eCommerce, riconoscimento immagini prodotto e eCommerce custom.

Fonti utili

Per formati, immagini responsive e caricamento abbiamo considerato la documentazione MDN sui formati immagine, la guida MDN sulle responsive images e la guida web.dev sul lazy loading nativo delle immagini.

FAQ

WebP e AVIF migliorano sempre la velocita?

Spesso si, ma dipende dalla pipeline. Dimensioni corrette, srcset, cache e lazy loading contano quanto il formato.

Devo convertire tutte le immagini in AVIF?

Non necessariamente. AVIF puo essere ottimo, ma va testato su qualita, compatibilita, tempi di generazione e fallback.

Lazy loading va messo su tutte le immagini?

No. Le immagini sotto la piega si, ma l'immagine principale che incide sul LCP spesso deve essere caricata subito.

srcset serve davvero?

Si, soprattutto su eCommerce con molte card prodotto. Evita di servire immagini desktop a dispositivi mobile.

Le immagini influenzano le conversioni?

Si. Immagini piu veloci migliorano UX, ma devono restare nitide e informative per non ridurre fiducia e dettaglio prodotto.

Vuoi alleggerire il tuo eCommerce senza rovinare le immagini?

Possiamo analizzare peso immagini, LCP, formati, srcset, lazy loading e qualita visiva per costruire una pipeline piu veloce e stabile.

Analizziamo le immagini del tuo eCommerce