Dimensione file immagine, velocità pagina e vendite: Il collegamento diretto che i venditori e-commerce non vedono

La maggior parte dei venditori e-commerce sa che le immagini grandi sono problematiche. Pochi lo trattano come un problema urgente di fatturato. Una ricerca Google e Deloitte lo quantifica: ogni 100ms aggiuntivi di tempo di caricamento costa ai siti retail circa l'1% nel tasso di conversione. Per un sito con 100.000 € di fatturato mensile, un secondo di ritardo può significare 12.000 € di fatturato annuo perso — solo a causa delle immagini. Questa guida copre gli obiettivi di dimensione file, le impostazioni di esportazione, le correzioni tecniche e l'audit rapido che ti permette di trovare i problemi in meno di dieci minuti.

La ricerca: velocità e conversioni

Il collegamento tra velocità della pagina e vendite è ben documentato. Uno studio Google e Deloitte del 2019 su 37 siti retail e di viaggi ha rilevato che un miglioramento di 0,1 secondi nella velocità della pagina mobile ha aumentato i tassi di conversione in media dell'8%. I siti retail hanno mostrato un miglioramento del 10% nel valore medio degli ordini grazie allo stesso guadagno di velocità. I dati recenti di Google dalla ricerca sui Core Web Vitals mostrano che le pagine che raggiungono la soglia LCP "Buono" (meno di 2,5 secondi) convertono a tassi measurably più elevati.

Le immagini sono il singolo maggiore contribuente ai tempi di caricamento lenti sulla maggior parte delle pagine prodotto. Una pagina che carica 3 MB di immagini non ottimizzate prima che l'acquirente abbia scorso oltre l'immagine principale sta perdendo denaro.

Obiettivi di dimensione file: cosa devi raggiungere

Non esiste una regola universale, ma i benchmark del settore per le pagine prodotto e-commerce sono coerenti:

• Immagine prodotto principale (above the fold): Sotto 100 KB è ideale; 200 KB è un tetto accettabile. Sopra 200 KB, stai impattando measurably l'LCP.
• Immagini galleria (below the fold): Sotto 200 KB ciascuna. Poiché vengono caricate in lazy loading su siti correttamente configurati, sono meno critiche dell'immagine principale.
• Massimo assoluto per qualsiasi immagine visualizzata sul web: 500 KB. Se pubblichi regolarmente immagini oltre 500 KB sulle tue pagine prodotto, l'ottimizzazione dovrebbe essere la prima cosa da correggere.

Questi obiettivi sono raggiungibili senza perdita di qualità visibile. Il nostro servizio di ottimizzazione web delle immagini gestisce questo su larga scala per negozi con cataloghi grandi.

Confronto formati: WebP, JPEG e PNG

La scelta del formato influenza significativamente la dimensione del file. Per un confronto dettagliato dei compromessi di ogni formato per la fotografia prodotto, consulta la nostra guida su WebP vs JPEG vs PNG per l'e-commerce. In breve per la velocità della pagina:

• WebP è la scelta migliore per le immagini prodotto web. Offre file dal 25 al 34% più piccoli rispetto a JPEG con qualità visiva equivalente e supporta la trasparenza. Tutti i principali browser lo supportano dal 2020.
• JPEG è il fallback affidabile. Usa la codifica JPEG progressiva per un caricamento percepito più rapido. Le impostazioni di qualità 75–85 producono risultati quasi indistinguibili con dimensioni di file significativamente più piccole rispetto alla qualità 95–100.
• PNG deve essere riservato alle immagini che richiedono genuinamente trasparenza. I file PNG sono costantemente più grandi di JPEG per il contenuto fotografico. Caricare PNG per foto prodotto che non richiedono trasparenza è uno degli errori di dimensione file più comuni nell'e-commerce.

Come esportare correttamente da Photoshop

La finestra di dialogo "Esporta come" di Photoshop ti dà pieno controllo sulla qualità di output e la dimensione del file. Usa queste impostazioni per le immagini prodotto web:

• Formato: JPEG (o WebP se il tuo workflow lo supporta). Evita PNG per le immagini fotografiche di prodotti.
• Qualità: 8–10 sulla scala di Photoshop (80–100%). La qualità 8 (80%) è indistinguibile dalla qualità 10 (100%) alle dimensioni di visualizzazione web — ma il file è del 40–60% più piccolo.
• Codifica progressiva: Abilita "Progressivo" per JPEG. I JPEG progressivi renderizzano quasi istantaneamente una versione a bassa risoluzione dell'immagine mentre si carica il resto, migliorando significativamente la velocità di caricamento percepita.
• Risoluzione: 72 dpi per il web. Un'immagine a 300 dpi visualizzata a 72 dpi aggiunge peso al file senza alcun beneficio visivo.
• Dimensioni: Ridimensiona alle dimensioni di visualizzazione effettive prima dell'esportazione. Un'immagine prodotto visualizzata a 1500×1500 px sul tuo sito deve essere esportata a 1500×1500 px, non alla risoluzione di acquisizione originale.

Cosa non fare

L'errore di dimensione file più comune nell'e-commerce è caricare direttamente su un sito web lo stesso file inviato ai workflow di stampa o fulfillment del marketplace. Amazon e molti servizi di stampa richiedono file TIFF a 300 dpi con dimensioni di 3000×3000 px o più grandi — a volte 10–20 MB per file. Esporta sempre una versione web dedicata dal tuo software di ritocco. Non usare mai il file di consegna Amazon o stampa come file per il tuo sito web.

Componente Image di Next.js e caricamento lazy

Se il tuo negozio gira su Next.js, il componente integrato Image risolve automaticamente diversi problemi di velocità della pagina:

• Conversione automatica del formato: Next.js serve WebP automaticamente ai browser che lo supportano, con fallback JPEG per i browser più vecchi.
• Ridimensionamento automatico: Le immagini vengono ridimensionate alle dimensioni di visualizzazione definite nel tuo layout.
• Caricamento lazy: Le immagini sotto il viewport non vengono caricate finché l'utente non scorre verso di esse. Questo riduce il peso iniziale della pagina che influisce sull'LCP.
• Caricamento prioritario: Aggiungi la prop priority alla tua immagine prodotto principale per precaricarla — questa immagine determina il tuo punteggio LCP.

Se non sei su Next.js, l'equivalente è l'attributo HTML loading="lazy" sulle immagini della galleria, e attributi espliciti width e height per prevenire lo spostamento del layout.

CDN: come riduce la latenza di consegna delle immagini

Una Content Delivery Network (CDN) memorizza copie delle tue immagini su server distribuiti globalmente. Quando un acquirente a Sydney carica la tua pagina prodotto ospitata a Londra, il suo browser recupera le immagini da un nodo CDN australiano invece di fare un viaggio di andata e ritorno verso l'Europa. La riduzione della latenza è sostanziale — spesso 200–400ms per le richieste internazionali. Le principali piattaforme e-commerce (Shopify, BigCommerce, Next.js ospitato su Vercel) includono la consegna CDN per le immagini per impostazione predefinita. Le installazioni auto-ospitate di WooCommerce o Magento spesso no — e aggiungere un CDN è uno degli investimenti di prestazione con il maggiore ritorno per quei siti.

Core Web Vitals: LCP e le tue immagini prodotto

I Core Web Vitals di Google sono le metriche tecniche che collegano direttamente le prestazioni delle immagini ai ranking di ricerca organica. La più rilevante per le pagine prodotto è il Largest Contentful Paint (LCP) — il tempo dalla navigazione a quando il più grande elemento visibile finisce di renderizzare. Su una pagina prodotto, quell'elemento è quasi sempre l'immagine principale del prodotto.

Soglie LCP:

• Buono: Sotto 2,5 secondi
• Necessita miglioramento: 2,5–4,0 secondi
• Scarso: Oltre 4,0 secondi

Le pagine nell'intervallo "Buono" beneficiano di un migliore posizionamento nei risultati di ricerca Google. Le immagini prodotto principali troppo grandi sono la causa più comune di punteggi LCP scarsi sulle pagine prodotto e-commerce.

Audit rapido: controlla le dimensioni delle immagini con Chrome DevTools

Puoi verificare le immagini della tua pagina prodotto in meno di cinque minuti usando Chrome DevTools:

• Apri la pagina prodotto che vuoi verificare, poi premi F12 per aprire DevTools.
• Clicca sulla scheda Rete, poi ricarica la pagina con Ctrl+Shift+R (ricaricamento forzato con cache disabilitata).
• Nella barra del filtro, digita Img per mostrare solo le richieste di immagini.
• La colonna Dimensione mostra i byte effettivamente trasferiti. Ordina per dimensione decrescente per trovare le tue immagini più grandi.
• Qualsiasi immagine superiore a 200 KB nella colonna dimensione richiede una riesportazione. Se la tua immagine prodotto principale supera i 100 KB, dovrebbe essere in cima alla lista.

Quando esternalizzare l'ottimizzazione delle immagini

Per i negozi con cataloghi di centinaia o migliaia di SKU, la riesportazione manuale di ogni immagine non è pratica. Il nostro servizio di ottimizzazione web delle immagini gestisce l'elaborazione batch di librerie di immagini prodotto, consegnando file pronti per il web in formati WebP e JPEG, con metadati rimossi e dimensioni file entro gli obiettivi sopra indicati. Invia 5 immagini per un lotto di prova gratuito.