Foto per e-commerce: come prepararle pronte al caricamento
Per preparare foto per un e-commerce, fornisci 3-5 varianti per immagine in WebP o AVIF con fallback JPEG, nomina i file in modo descrittivo e non lazy-loadare l’immagine LCP. Aggiungi testo ALT contestuale, dichiara sempre larghezza e altezza per evitare scatti di layout e verifica il risultato su schermi normali e HiDPI prima di caricare tutto sul sito.
In breve:
- È fondamentale usare AVIF o WebP come formato principale per le foto di prodotto, mantenendo JPEG come fallback per la compatibilità browser.
- Si devono preparare almeno 3-5 varianti di larghezza e usare attributi srcset e sizes per ottimizzare il caricamento a seconda del dispositivo.
- Il nome del file e il testo ALT devono essere descrittivi, coerenti e senza caratteri speciali, per migliorare l’indicizzazione nelle ricerche di immagini.
- È vietato lazy-loadare l’immagine principale (LCP) e si devono dichiarare dimensioni o aspect-ratio per evitare scatti del layout durante il caricamento.
- Per ottimizzare grandi cataloghi, si consiglia di automatizzare la compressione e il ridimensionamento con strumenti come Sharp o ImageMagick, impostando regole di qualità predefinite.
Indice
- Formati, risoluzioni e qualità: cosa scegliere per ogni tipo di immagine prodotto
- Immagini responsive e markup: come servire la versione giusta al dispositivo giusto
- Nome file e testo ALT: le basi per la visibilità nelle ricerche per immagini
- Accessibilità e performance pratiche: evitare gli errori più comuni
- Workflow e strumenti per l’ottimizzazione delle immagini in batch
- Checklist rapida prima dell’upload e impostazioni utili per WooCommerce
- Come inserire l’ottimizzazione delle immagini nella consegna di un sito
- Come Aureon prepara e-commerce pronti con immagini ottimizzate
- Fonti
- Domande frequenti
Formati, risoluzioni e qualità: cosa scegliere per ogni tipo di immagine prodotto
Per le fotografie di prodotto, AVIF e WebP sono la prima scelta: comprimono meglio di JPEG e PNG mantenendo dettagli puliti su tessuti, superfici e colori. AVIF garantisce file più leggeri, ma non tutti i browser lo supportano ancora bene, quindi serve sempre un fallback in JPEG o WebP. Per loghi, icone e grafica vettoriale usa SVG, che resta nitido a qualsiasi dimensione senza appesantire la pagina; PNG va bene solo quando serve trasparenza su immagini non fotografiche.
Per la dimensione fisica, punta a una dimensione adeguata sul lato lungo per la maggior parte delle schede prodotto e prepara una variante doppia per gli schermi retina o HiDPI, così l’immagine resta nitida anche su display ad alta densità di pixel.
Sulla qualità di compressione non esiste un valore universale: bisogna testare caso per caso confrontando peso e resa visiva sul proprio catalogo, come raccomandano le linee guida sulla compressione delle immagini. Un buon punto di partenza per JPEG è una qualità tra 70 e 85, poi si affina osservando il risultato.
- Usa AVIF o WebP come formato principale per le foto prodotto.
- Mantieni JPEG come fallback per la compatibilità con browser meno recenti.
- Riserva PNG e SVG a grafica, loghi e icone.
- Rimuovi i metadati EXIF superflui prima del caricamento per alleggerire ogni file.
L’ottimizzazione delle immagini richiede test mirati su formato, qualità e dimensione per ogni contesto, secondo web.dev: non basta applicare una regola fissa a tutto il catalogo.
Immagini responsive e markup: come servire la versione giusta al dispositivo giusto
Un browser non deve scaricare un’immagine da 2000 pixel se lo schermo del cliente ne mostra solo 400. Per evitarlo, prepara 3-5 varianti di larghezza per ogni foto prodotto (ad esempio 480w, 800w, 1200w) e le indichi nell’attributo srcset con i relativi width descriptor.
L’attributo sizes dice al browser quanto spazio occuperà l’immagine nel layout della pagina, così il browser sceglie automaticamente il file più adatto senza scaricare più dati del necessario. Quando serve gestire anche il formato, non solo la larghezza, l’elemento picture permette di offrire AVIF o WebP come prima scelta e JPEG come fallback tramite il tag source con l’attributo type.
- Fornisci sempre 3-5 varianti di larghezza per ogni immagine prodotto.
- Imposta sizes in coerenza con il layout reale della pagina.
- Usa picture con più source per offrire AVIF/WebP con fallback JPEG.
- Applica eager o fetchpriority solo all’immagine LCP, lazy-loading a tutte le altre.
Un consiglio: controlla sempre quale immagine il browser considera LCP (di solito la prima foto prodotto visibile) e verifica che non abbia l’attributo loading=“lazy”.
Nome file e testo ALT: le basi per la visibilità nelle ricerche per immagini
Il nome del file conta più di quanto sembri. Un pattern come categoria-prodotto-colore-taglia.jpg, breve e senza caratteri speciali, aiuta sia l’organizzazione interna sia la comprensione da parte dei motori di ricerca. Google stesso raccomanda markup standard e filename descrittivi per migliorare l’indicizzazione delle immagini su Google Images.
Il testo ALT deve descrivere il contenuto in poche parole di contesto reale, evitando frasi come “immagine di” o la ripetizione forzata di parole chiave. Quando è possibile, aggiungere dati strutturati di tipo Product alla scheda prodotto rafforza la comprensione semantica dell’insieme testo più immagine da parte dei motori di ricerca.
- Usa un pattern di naming coerente: categoria-prodotto-colore-taglia.
- Scrivi un ALT descrittivo e specifico, senza ripetizioni superflue.
- Aggiungi structured data Product dove il tuo catalogo lo permette.
- Posiziona didascalie e testo descrittivo vicino all’immagine, non lontano nella pagina.
Accessibilità e performance pratiche: evitare gli errori più comuni
Due errori ricorrono più spesso di altri: lazy-loadare l’immagine principale e lasciare che le immagini causino scatti di layout mentre la pagina carica. La raccomandazione tecnica è netta: non applicare mai il lazy-loading all’immagine LCP, perché ritarda proprio la metrica che misura quanto velocemente il contenuto principale diventa visibile.
Dichiarare sempre width e height, oppure impostare aspect-ratio nel CSS, è ormai una prassi consolidata per prevenire scatti improvvisi del layout durante il caricamento, come indicano le linee guida MDN sulle immagini.
Sul fronte accessibilità, tre controlli minimi bastano per la maggior parte dei siti: alt text su ogni immagine informativa, alt vuoto sulle immagini puramente decorative e nessun testo scritto sopra la foto stesso, perché chi usa lettori di schermo non lo percepisce.
- Applica loading=“eager” alle prime immagini visibili, mai lazy alla LCP.
- Dichiara width e height o usa aspect-ratio per prevenire layout shift.
- Scrivi alt vuoto sulle immagini decorative, descrittivo su quelle informative.
- Evita testo sovrapposto alle foto: comprometterebbe l’accessibilità.
Le raccomandazioni italiane sui contenuti digitali indicate da Designers Italia insistono su testo alternativo descrittivo e assenza di testo sovrimposto alle immagini per garantire un accesso equo ai contenuti.
Workflow e strumenti per l’ottimizzazione delle immagini in batch
Ottimizzare foto una per una diventa impossibile con un catalogo che cresce. Automatizzare la generazione delle varianti e la compressione, come raccomanda web.dev, riduce sia il tempo di lavoro sia gli errori di distrazione.
- Usa Sharp (per chi lavora in Node.js) o ImageMagick da riga di comando per ridimensionare e convertire in batch.
- Costruisci una pipeline con Gulp o uno strumento equivalente per generare automaticamente tutte le varianti a ogni nuovo caricamento.
- Valuta un servizio o una CDN che ottimizzi le immagini on-the-fly, così eviti di generare manualmente ogni formato e dimensione.
- Definisci cartelle di input e output fisse e una convenzione di naming condivisa con chi gestisce il catalogo o il CMS.
- Aggiungi controlli automatici, come un lint sugli attributi sizes o un confronto visivo prima della pubblicazione.
Un consiglio: impostare regole di qualità predefinite per tutto il catalogo, invece di decidere immagine per immagine, fa risparmiare ore già dal secondo mese di lavoro.
Checklist rapida prima dell’upload e impostazioni utili per WooCommerce
Prima di caricare qualsiasi immagine su un negozio online, verifica in ordine questi punti.
- Formato corretto (AVIF/WebP con fallback JPEG) e peso file ragionevole.
- Nome file descrittivo e testo ALT scritto, non lasciato vuoto per errore.
- Varianti 2x pronte per gli schermi HiDPI, dove il prodotto lo richiede.
- Dimensioni dichiarate nel markup per evitare scatti di layout.
Chi lavora su WooCommerce deve controllare in particolare tre dimensioni predefinite, che se lasciate di default danno spesso foto sfocate nelle schede prodotto.
| Impostazione WooCommerce | A cosa serve |
|---|---|
| woocommerce_single | immagine principale nella pagina prodotto |
| woocommerce_gallery_thumbnail | miniature della galleria sotto o accanto alla foto principale |
| woocommerce_thumbnail | miniatura mostrata negli elenchi e nelle categorie |
Dopo aver modificato queste dimensioni, rigenera sempre le miniature: senza questo passaggio le foto vecchie restano sfocate anche con immagini nuove caricate correttamente.
Come inserire l’ottimizzazione delle immagini nella consegna di un sito
Vedere una demo del proprio negozio online prima di pagare permette di controllare subito se le foto rendono bene nel layout reale, non solo su un foglio di lavoro. Fornire al cliente un template di upload chiaro, con formati e dimensioni già indicati, mantiene la qualità coerente anche dopo il lancio. Misurare l’LCP e osservare le conversioni dopo l’ottimizzazione conferma se il lavoro fatto sulle immagini ha davvero pagato.
— Alessandro
Come Aureon prepara e-commerce pronti con immagini ottimizzate
Con Aureon vedi una demo realistica del tuo negozio online entro 12 ore, senza pagamento anticipato: puoi controllare da subito come rendono le tue foto prodotto nel layout reale, prima di decidere. Il pacchetto Sito E-commerce offre funzionalità per la gestione del catalogo tramite un’area amministrativa, hosting e supporto tecnico per alcuni mesi.
- Ricevi una demo gratuita del tuo e-commerce entro 12 ore.
- Gestisci cataloghi, ordini e immagini in autonomia dall’area admin.
- Hai supporto tecnico incluso per tre mesi dopo il lancio.
Guarda alcuni esempi di demo già realizzate o scopri i dettagli dei pacchetti nella pagina prodotti per capire quale soluzione si adatta al tuo negozio.
Fonti
Per chi vuole approfondire: guide MDN sui formati immagine, web.dev su compressione e automazione, Google Developers su Google Images, documentazione WooCommerce e Designers Italia sull’accessibilità.
Domande frequenti
Quale formato immagine è meglio per un e-commerce?
AVIF e WebP offrono la compressione migliore per le foto prodotto, ma serve sempre un fallback in JPEG per i browser che non li supportano ancora bene, come indicato dalla guida MDN sui formati immagine. Per loghi e grafica vettoriale, invece, SVG resta la scelta più efficiente.
Che dimensione devono avere le foto prodotto?
Una larghezza tra 800 e 1200 pixel sul lato lungo va bene per la maggior parte delle schede prodotto, con una variante doppia per gli schermi HiDPI quando il dettaglio del prodotto lo richiede. La dimensione esatta va sempre verificata rispetto al layout reale della pagina.
Perché non devo lazy-loadare tutte le immagini?
L’immagine LCP, di solito la prima foto prodotto visibile, non va mai lazy-loadata perché ne ritarderebbe il caricamento e peggiorerebbe la metrica LCP della pagina, come spiegano le indicazioni su come non lazy-loadare l’immagine LCP. Le immagini successive, fuori dallo schermo iniziale, possono restare in lazy-loading senza problemi.
Come scrivo un buon testo ALT per le immagini prodotto?
Un buon ALT descrive il contenuto reale dell’immagine in poche parole di contesto, evitando frasi come “immagine di” o la ripetizione forzata di parole chiave. Google raccomanda testo alternativo informativo insieme a un markup standard per migliorare la comprensione delle immagini nelle linee guida su Google Images.