Le immagini sono il 60% del peso totale di un e-commerce. Una singola foto di prodotto male ottimizzata rallentra il caricamento di 2-3 secondi. Scopri come ottimizzare le immagini con formati moderni, lazy loading, responsive design e CDN per dominare Core Web Vitals e aumentare conversioni.
Una foto prodotto deve convincere e arrivare in tempo. Il lavoro di ottimizzazione unisce scatto, formato, dimensione e distribuzione in un unico percorso: meno attese per il visitatore, più spazio per concentrarsi sulla scelta.
In un e-commerce, le immagini non sono decorative: sono il tuo prodotto. Il visitatore non può toccare la maglietta, vederla dal vivo, o valutarla di persona. Può solo guardare le foto. Per questo Google e i tuoi clienti giudicano il sito in base alla velocità con cui queste immagini si caricano.
I numeri sono chiari: se il tuo sito impiega 3 secondi a caricare le immagini della categoria prodotti, il 40% dei visitatori abbandona prima di cliccare. In un e-commerce con 10.000 visite al mese, questo significa 4.000 potenziali clienti persi.
Le immagini rappresentano in media il 60-70% del peso totale di una pagina e-commerce. Ottimizzarle non è una nicchia SEO: è il fondamento della velocità.
Impatto diretto: Google Core Web Vitals usa LCP (Largest Contentful Paint) come KPI. Se l'immagine del prodotto (spesso il contenuto più grande) impiega più di 2,5 secondi, il tuo sito viene penalizzato nei ranking.
La maggior parte dei siti e-commerce ancora usa JPEG e PNG. Entrambi sono stati inventati negli anni '90. WebP (2010) e AVIF (2021) sono il presente e il futuro, e riducono il peso delle immagini del 25-35%.
WebP è supportato da tutti i browser moderni (Chrome, Firefox, Safari, Edge). Una foto di prodotto in WebP pesa tipicamente 200-300 KB al posto dei 500-700 KB in JPEG.
cwebp immagine.jpg -o immagine.webp -q 80<picture> per servire WebP ai browser moderni e JPEG ai browser vecchi.AVIF è il nuovo standard (AV1 codec). Comprime il 20-30% meglio di WebP. Supporto ancora limitato (Safari e Firefox solo di recente), ma crescente.
<picture><source srcset="image.avif" type="image/avif"><source srcset="image.webp" type="image/webp"><img src="image.jpg" alt="Prodotto"></picture>Lazy loading significa "carica l'immagine solo quando l'utente la vede". In un e-commerce con 20 prodotti in categoria, non servire 20 immagini in full resolution al caricamento della pagina: servi solo quelle nel viewport e carica il resto quando l'utente scrolla.
<img src="prodotto.jpg" loading="lazy" alt="Prodotto">
Questo attributo nativo è supportato da tutti i browser moderni. L'immagine si carica automaticamente quando si avvicina al viewport.
Un'immagine di prodotto su mobile non ha bisogno della stessa risoluzione che serve su desktop. Usa srcset per servire immagini diverse a seconda della dimensione dello schermo.
<img srcset="prodotto-small.jpg 480w, prodotto-medium.jpg 800w, prodotto-large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 800px) 80vw, 1200px" src="prodotto.jpg" alt="Prodotto">
Benefici: Un utente mobile scarica solo 300 KB di immagine. Su desktop, arriva la versione full-res. Stesso aspetto, peso dimezzato.
Combina <picture> con srcset per servire AVIF/WebP con fallback JPEG, E lazy loading, E responsive:
<picture><source type="image/webp" srcset="p-480.webp 480w, p-800.webp 800w" sizes="(max-width: 800px) 100vw, 800px"><img src="p-800.jpg" alt="Prodotto" loading="lazy"></picture>
LCP (Largest Contentful Paint) misura il tempo fino a quando il contenuto più grande della pagina diventa visibile. In un e-commerce, questo è quasi sempre l'immagine del prodotto.
Google ranking: Se LCP > 2,5 secondi, Google degrada il ranking. Se LCP > 4 secondi, il sito cade drasticamente nei risultati.
Conversioni: Ogni 100 ms di ritardo nel caricamento dell'immagine, le conversioni calano dell'1-2%. In un e-commerce con 10.000 euro di conversioni giornaliere, 1 secondo di ritardo costa 100-200 euro al giorno.
Come misurare LCP: Usa Google PageSpeed Insights (inserisci l'URL, vedi LCP nel report). Usa anche Lighthouse (strumento integrato in Chrome DevTools).
Ottimizzazione focalizzata su LCP:
<link rel="preload" as="image" href="hero.jpg"><img src="hero.jpg" fetchpriority="high" loading="lazy" alt="Prodotto">Un CDN (Content Delivery Network) memorizza copie delle tue immagini su server distribuiti globalmente. Se il tuo e-commerce è in Italia ma il cliente è in Giappone, le immagini vengono servite dal server più vicino, non dal tuo server a Milano.
Cloudflare e CDN moderni comprimono automaticamente le immagini: se il browser supporta WebP, servi WebP; se no, fallback a JPEG. Se il dispositivo è mobile, riduci la risoluzione.
Configurazione semplice: Carica le immagini in Cloudflare, sostituisci l'URL del dominio con il dominio Cloudflare. Il resto è automatico.
Configura cache-control per immagini statiche: Cache-Control: public, max-age=31536000 (1 anno). Le immagini si cachiano nel browser e nel CDN, riducendo il traffico in partenza dal tuo server.
Segui questa checklist per ottimizzare le immagini del tuo e-commerce step-by-step:
<img src="old.jpg"> con: <picture><source type="image/webp" srcset="p-600.webp 600w, p-1200.webp 1200w" sizes="(max-width: 768px) 100vw, 800px"><img src="p-1200.jpg" alt="Nome prodotto" loading="lazy" decoding="async"></picture>loading="lazy" a tutte le immagini non-hero.fetchpriority="high" e loading="eager".Cache-Control: public, max-age=31536000 per immagini statiche.Le immagini sono il tuo e-commerce. Ogni secondo di ritardo nel caricamento è denaro perso in conversioni. Ottimizzare le immagini non è un dettaglio tecnico: è direttamente ROI.
Approfondisci ulteriormente l'ottimizzazione del tuo e-commerce:
WebP, lazy loading, CDN, Core Web Vitals: non è solo tecnica, è conversioni. Ti aiutiamo a ottimizzare il tuo sito e dominare i ranking.