Ottimizzazione delle Immagini per i Prodotti

Le immagini rappresentano la maggior parte del peso della pagina sulla maggior parte dei siti e-commerce. Una singola pagina prodotto con sei fotografie ad alta risoluzione puo facilmente pesare 10-15 MB senza ottimizzazione, risultando in tempi di caricamento di cinque secondi o piu su connessioni mobili. I Core Web Vitals di Google -- in particolare il Largest Contentful Paint (LCP) -- sono direttamente influenzati dalle dimensioni dei file immagine.

Oltre alla velocita della pagina, le immagini dei prodotti creano opportunita di traffico diretto tramite Google Immagini. Quando un acquirente cerca "tavolino da caffe stile mid-century" in Google Immagini e la tua foto prodotto appare con un alt tag ottimizzato e un nome file descrittivo, clicca direttamente sulla tua pagina prodotto.

L'ottimizzazione delle immagini migliora anche i tuoi listing prodotti in Google Shopping e nei risultati di ricerca visiva. Google Lens e strumenti di ricerca visiva simili stanno crescendo rapidamente, e i prodotti con immagini correttamente ottimizzate hanno piu probabilita di apparire in questi risultati.

L'effetto composto dell'ottimizzazione delle immagini su un grande catalogo e sostanziale. Ridurre la dimensione media delle immagini del 60% su 5.000 pagine prodotto migliora la velocita di caricamento di ogni pagina, il che alza i ranking su tutto il sito e riduce i tassi di rimbalzo.

Scegliere il formato immagine corretto e il fondamento dell'ottimizzazione delle immagini. Per la fotografia di prodotti, tre formati dominano: JPEG, PNG e WebP. Il JPEG e la scelta tradizionale per le fotografie con gradienti di colore complessi. Il PNG e migliore per le immagini che richiedono trasparenza. Il WebP, sviluppato da Google, offre dimensioni di file 25-35% piu piccole del JPEG a qualita visiva equivalente.

I siti e-commerce moderni dovrebbero servire immagini WebP come formato principale, con fallback JPEG per browser piu vecchi. L'elemento HTML picture o la negoziazione di contenuto lato server puo servire WebP ai browser compatibili e JPEG agli altri automaticamente. L'AVIF e un formato ancora piu recente che raggiunge il 20% di compressione migliore del WebP.

Le impostazioni di compressione contano tanto quanto la scelta del formato. Un JPEG salvato al 100% di qualita e molto piu grande del necessario -- la maggior parte delle immagini prodotto appaiono identiche all'occhio umano al 75-85% di qualita ma sono 40-60% piu piccole. Strumenti come ShortPixel, TinyPNG, Squoosh e ImageOptim possono comprimere le immagini in batch prima del caricamento.

Non comprimere le immagini piu volte. Ogni ciclo di compressione con perdita degrada ulteriormente la qualita fornendo riduzioni di dimensione decrescenti. Parti dall'originale di massima qualita, comprimi una volta al tuo livello di qualita target e conserva l'originale separatamente.

Il testo alternativo (alt text) serve a due scopi critici: descrive le immagini per gli utenti ipovedenti che si affidano agli screen reader, e fornisce contesto di parole chiave che i motori di ricerca usano per il ranking delle immagini. Ogni immagine prodotto sul tuo sito ha bisogno di testo alternativo unico e descrittivo che descriva accuratamente cio che l'immagine mostra.

Per l'immagine prodotto principale, scrivi testo alternativo che includa il nome del prodotto e un dettaglio visivo chiave. "Borsa a tracolla donna in pelle rossa con catena dorata - vista frontale" e molto piu utile di "borsa" o "immagine prodotto."

Le pagine prodotto con piu immagini dovrebbero avere testo alternativo variato per ogni foto. La vista frontale, la vista posteriore, i dettagli ravvicinati e le immagini lifestyle mostrano ciascuno qualcosa di diverso, e il testo alternativo dovrebbe riflettere queste differenze.

Per le immagini specifiche delle varianti -- diversi colori, taglie o configurazioni -- includi l'attributo della variante nel testo alternativo. "Scarpone da trekking uomo in verde foresta, taglia 43" e piu utile di un generico "scarpone da trekking."

Evita di lasciare il testo alternativo vuoto su qualsiasi immagine prodotto. Gli attributi alt vuoti dicono agli screen reader di saltare completamente l'immagine, il che e appropriato per le immagini decorative ma mai per le foto di prodotti.

I nomi dei file delle immagini sono un segnale di ranking per Google Immagini che la maggior parte dei negozi e-commerce ignora completamente. Il nome file predefinito della fotocamera "DSC_4821.jpg" non dice nulla ai motori di ricerca sul contenuto dell'immagine. Rinominare quel file in "borsa-tracolla-pelle-rossa-donna-fronte.jpg" prima del caricamento da a Google un segnale aggiuntivo.

Usa trattini per separare le parole nei nomi dei file, non show o spazi. Google tratta i trattini come separatori di parole. Gli show sono trattati come connettori di parole. Gli spazi vengono convertiti in "%20" negli URL.

Mantieni i nomi dei file descrittivi ma concisi. Includi il nome del prodotto, un attributo chiave come colore o materiale, e il tipo di vista. Evita di riempire i nomi dei file con parole chiave eccessive. Punta a tre-sei parole descrittive.

Per i negozi con grandi cataloghi, automatizza la denominazione dei file usando uno schema coerente. Costruisci una convenzione di denominazione come: {nome-prodotto}-{colore}-{vista}.{formato} e applicala programmaticamente.

Gli URL delle immagini dovrebbero anche essere puliti e descrittivi. Evita strutture URL che posizionano le immagini dietro stringhe hash casuali.

I siti e-commerce moderni devono servire immagini di dimensioni appropriate per ogni dispositivo e dimensione dello schermo. Un'immagine hero di 3000x3000 pixel progettata per un display retina desktop spreca banda quando caricata su un telefono mobile con uno schermo largo 375 pixel. L'attributo srcset in HTML ti permette di specificare piu dimensioni di immagine.

Implementa srcset con almeno tre breakpoint per le immagini prodotto: una versione piccola per mobile (circa 400px di larghezza), una media per tablet (circa 800px) e una grande per desktop (circa 1200px). Per le pagine di dettaglio prodotto con zoom, fornisci una versione extra-large (2000-3000px) che si carica solo quando la funzione zoom viene attivata.

Il caricamento differito posticipa il caricamento delle immagini fuori schermo fino a quando l'utente scorre vicino ad esse. Per le pagine prodotto con piu immagini sotto il fold, il caricamento differito puo ridurre il peso iniziale della pagina del 50% o piu. Implementa il caricamento differito usando l'attributo nativo loading="lazy" sui tag img.

Non caricare in modo differito l'immagine prodotto principale o l'elemento LCP. L'immagine prodotto principale visibile al primo caricamento della pagina dovrebbe essere caricata immediatamente con fetchpriority="high".

Usa attributi width e height su tutti i tag img per prevenire il Cumulative Layout Shift (CLS). Quando un browser conosce le dimensioni di un'immagine prima che si carichi, puo riservare la quantita corretta di spazio.

Le pagine listing prodotti (pagine di categoria) mostrano dozzine di miniature di prodotti in una griglia. Ogni miniatura e un'opportunita di ranking in Google Immagini, ma solo se le immagini sono correttamente ottimizzate. Assicurati che ogni miniatura prodotto nella tua griglia abbia un testo alternativo unico che includa il nome del prodotto.

Le dimensioni delle miniature nelle pagine di categoria dovrebbero essere coerenti e compresse in modo appropriato. Non c'e bisogno di caricare immagini a dimensione piena in una griglia dove vengono visualizzate a 200x200 o 300x300 pixel. Genera versioni miniatura dedicate alla dimensione di visualizzazione esatta. Questo da solo puo ridurre il peso delle pagine di categoria del 70-80%.

Crea una sitemap delle immagini o includi tag immagine nella tua sitemap XML esistente. Una sitemap delle immagini dice a Google di tutte le immagini sul tuo sito e fornisce metadati come didascalie. Per i siti e-commerce, la sitemap delle immagini dovrebbe includere ogni immagine prodotto con il suo testo alternativo associato e l'URL della pagina prodotto.

Monitora le tue prestazioni di ricerca immagini in Google Search Console. Il rapporto sulle Prestazioni puo essere filtrato per mostrare solo il traffico da Google Immagini. Usa questi dati per identificare opportunita.

Considera l'implementazione di dati strutturati per le immagini dei prodotti. Lo schema Product supporta la proprieta "image", che dice a Google quali immagini sono associate al prodotto.