La fotografia di prodotto è un ramo di attività in cui il vecchio detto “L’abbondanza non è mai un male” non necessariamente stabilisce tutte le regole. Più pixel, o una risoluzione più alta, significano direttamente un file più pesante e una sfida per la connessione Internet.
Indice dei contenuti
La fotografia di prodotto è un ramo di attività in cui il vecchio detto “L’abbondanza non è mai un male” non necessariamente stabilisce tutte le regole. Più pixel, o una risoluzione più alta, significano direttamente un file più pesante e una sfida per la connessione Internet. Pensa ai tempi di caricamento di alcune immagini di prodotto quando hai provato a fare acquisti online da un dispositivo mobile dal tuo rifugio vacanziero in montagna. La rete 3G semplicemente non riusciva a trasportarle? O forse il sito web era pensato per la visualizzazione su schermi più grandi?
Nella nostra guida definitiva ti daremo suggerimenti su come ottimizzare le immagini di prodotto per la presenza online, così che non accada mai ai tuoi clienti. Imparerai a eliminare i noiosi tempi di caricamento e le situazioni in cui la foto del prodotto semplicemente non sembra adatta al dispositivo.
Partiamo ponendo la semplice domanda “perché ottimizzare?”, e poi ti guidiamo attraverso i meandri dell’ottimizzazione della risoluzione e della gestione delle dimensioni dei file. Infine, avrai la possibilità di imparare i principi di base dell’ottimizzazione SEO delle immagini, che è parte integrante di un e-shop che funziona senza intoppi.
Un’attività online considererà sempre il tempo e il denaro come risorse. Imparare a gestirli efficacemente fa parte del successo e non va senza snellire i processi di fotografia di prodotto. Vorrai produrre immagini che vendano e immagini che guidino fluidamente il cliente attraverso il sito web invece di creare ostacoli.
Queste immagini di prodotto dovranno essere ottimizzate per visibilità, dimensione di download e posizionamento sui motori di ricerca. Non c’è via di fuga dall’affrontare questi parametri, se punti alla riduzione dei costi e apprezzi l’esperienza dei tuoi utenti.
Considerando l’ottimizzazione delle immagini, otterrai un sito web più rapido e leggero, che contribuirà al risparmio sulle tariffe del server. Otterrai anche una migliore posizione sui motori di ricerca, che genera traffico verso il tuo sito web e aumenta le conversioni.
Il modo più semplice per pensare all’ottimizzazione è considerare l’uso di risoluzioni più piccole, l’introduzione della compressione delle immagini e la corretta etichettatura delle immagini. Questo comporterà la scelta dei formati immagine, una certa post-elaborazione della risoluzione e una certa quantità di lavoro da webmaster.
Ti guideremo attraverso tutto questo.
Per cominciare, diamo una rapida occhiata a che cos’è la risoluzione. In una definizione di base, è il numero di pixel di cui è composta un’immagine. Di solito è espressa tramite i numeri verticale e orizzontale: la larghezza e l’altezza di un’immagine in pixel, ad es. 1920×1080.
Più pixel ha un’immagine, meglio i dettagli possono essere rappresentati per l’osservatore. L’esempio seguente illustra questa situazione.
Alta risoluzione
Bassa risoluzione
Quando si tratta di ottimizzazione della risoluzione, non esiste una soluzione semplice e unica. Per scegliere la risoluzione ottimale per la tua immagine di prodotto prenderai in considerazione le seguenti caratteristiche:
Puntare alla massima risoluzione possibile non sarà una strategia consigliata, anche se potrebbe sembrare che “più pixel significano più dettagli”. Nel caso dei negozi online, questo si tradurrebbe piuttosto in “più tempo di caricamento” e “visualizzazione errata”. Il tuo tecnico web e l’analista SEO lo sanno bene…
I requisiti del sito web sono il primo motivo per cui devi far funzionare insieme in modo armonioso le immagini e il tuo sistema. Le domande a cui il webmaster ti aiuterà a rispondere possono includere:
Conoscere queste risposte ti guiderà nelle prime scelte di risoluzione che farai. Quando pianifichi un negozio online, lavora a stretto contatto con il tuo team web. Le conoscenze che forniranno ti faranno risparmiare tempo nella creazione e nella post-elaborazione delle immagini di prodotto. E soprattutto, sarà il primo passo verso una visualizzazione fluida delle immagini per i tuoi clienti.
Ascolta attentamente i web designer e scegli le risoluzioni che propongono per miniature, primi piani, immagini principali degli elenchi, ecc. Sarà molto più efficace conoscerle in anticipo e poi stabilire standard ottimali per la generazione delle foto nella tua azienda.
La varietà dei dispositivi digitali disponibili avrà un ruolo importante nella definizione delle linee guida di risoluzione per le immagini di prodotto. Per visualizzare i tuoi prodotti, i clienti possono usare smartphone o tablet di dimensioni diverse e anche schermi desktop multistandard. Come adattarli tutti?
Questa grande domanda non ha una sola risposta. Questo perché ci saranno decine di possibili risoluzioni che il tuo utente potrebbe scegliere. Alcune saranno più comuni, altre meno. Puoi misurare le risoluzioni dei tuoi clienti con la maggior parte degli strumenti di base per la gestione del traffico web e trarre conclusioni dalle statistiche. Insieme ai webmaster e ai grafici dovrai decidere di adattarti alla maggioranza piuttosto che alla totalità di questo gruppo.
Per capire il fenomeno degli schermi con risoluzioni diverse, diamo un’occhiata a come si comporta uno schermo quando ne modifichiamo la risoluzione.
A seconda della risoluzione, lo schermo è in grado di mostrare meno o più. Nei laptop o negli schermi desktop, il lato più lungo della risoluzione sarà orizzontale. Negli schermi dei telefoni cellulari, il lato verticale sarà più lungo. Già questa semplice differenza genera requisiti per le immagini nel tuo e-shop – ad es. dovresti inserire più contenuto verticalmente o orizzontalmente?
Vale la pena notare che, nel caso di schermi HiDPI (High Dots Per Inch) o Retina, comuni nei moderni smartphone e laptop, è necessario distinguere tra i cosiddetti pixel CSS usati dalle applicazioni (inclusi i browser web) e i pixel fisici determinati dal produttore del dispositivo. In questo caso, per 1 pixel CSS si possono contare più pixel fisici. Il parametro che lo definisce è DPR – Device Pixel Ratio.
Gli schermi High Dots Per Inch consentono ai web designer di visualizzare immagini in varie risoluzioni a seconda di ciò che è supportato dallo schermo. Normalmente, verranno preparate versioni diverse della stessa immagine, ciascuna in una risoluzione differente. Verranno inserite nel sito web usando l’attributo <img scrset>, che verrà letto dai browser per mostrare l’immagine nel modo più conveniente. Scopri di più sull’argomento da un sito web dedicato alle risoluzioni dello schermo.
Schermi con risoluzioni come 4K e superiori stanno guadagnando popolarità, tuttavia è ancora (2021) la risoluzione fullHD la più comunemente usata, sia su laptop sia su smartphone. La nostra foto, vista con ingrandimento al 100%, si comporterà in modo diverso su schermi verticali e orizzontali:
Con una risoluzione maggiore
Orizzontale e adattata allo schermo
Verticale e non adattata allo schermo
Nota che su uno smartphone i 1920 pixel del fullHD saranno il lato più lungo (verticale) dello schermo. Pertanto, la nostra foto verrà visualizzata più piccola della superficie dello schermo.
Gli esempi sopra illustrano un case study per la risoluzione fullHD. Poiché questa non è l’unica risoluzione utilizzata dai clienti, dovresti prendere in considerazione l’idea di regolare la risoluzione “in modo che si adatti a più schermi”.
Ciò significherebbe introdurre varie risoluzioni di immagine per diverse risoluzioni dello schermo e caricarle in modo responsive. Una soluzione che può essere implementata nella maggior parte dei sistemi di gestione dei siti web.
Assicurati di preparare file separati per le immagini in miniatura dei prodotti, poiché si caricheranno più velocemente di una grande immagine ridotta dal browser web. Richiedono semplicemente meno elaborazione e tempo di download, il che assume importanza quando molte miniature di prodotto vengono caricate su uno schermo in una griglia o in una riga.
Inoltre, la dimensione effettiva della miniatura e la dimensione indicata in HTML nel suo tag <image> possono influenzare i parametri considerati da Google nel posizionamento del tuo sito web. La regola per migliorare le prestazioni del sito web e la SEO è mostrare esattamente la risoluzione del file presente sul server, senza operazioni del browser.
Una risoluzione estremamente bassa significherà una dimensione del file comodamente minima. Il contrario vale per una risoluzione eccezionalmente alta. L’ottimizzatore dovrà trovare una via di mezzo per mantenere una dimensione del file ragionevole, senza perdere livello di dettaglio con la diminuzione della risoluzione. Vedi sotto esempi di dimensioni dei file.
Determinare la dimensione ottimale del file può essere guidato da parametri come il numero di immagini che devono essere caricate simultaneamente su un sito web. Immagina una griglia di prodotti con centinaia di prodotti in cui le immagini vengono caricate a piena risoluzione e poi ridimensionate dal browser. Questo rappresenterebbe un carico serio per la connessione Internet dell’utente finale e renderebbe la navigazione virtualmente impossibile su reti più lente.
Sapendo quanto sia difficile compartimentare la conoscenza dell’ottimizzazione delle immagini e quante facce e approcci presenti, abbiamo deciso di prepararti una breve lista di consigli. Continua a leggere.
1) Scegli il formato giusto per la tua grafica. Per immagini di forme geometriche semplici e gamme tonali poco complesse si raccomanda di sostituire la grafica raster con grafica vettoriale. Così puoi ottenere il miglior rapporto qualità:dimensione e guadagnare un’incredibile scalabilità. La grafica vettoriale (ad es. formato SVG) si visualizza ugualmente bene in alta e bassa risoluzione. È raccomandata per loghi, icone, illustrazioni.
La grafica raster (tipi di file come PNG, JPG) funzionerà per visual complessi e fotografia. Un vantaggio per l’ottimizzazione web può essere ottenuto con il formato WebP – vedi punto 6.
2) Usa il giusto livello di compressione quando crei il file.
Il software di fotoritocco offre la compressione nel momento in cui si salva il file, a seconda del tipo di file. Il cursore può essere impostato per massimizzare la compressione e ottenere un file piccolo oppure per ridurre la compressione e usare file più grandi.
La regola d’oro va trovata personalmente da ogni utente, con il suggerimento generale di mantenere la compressione sopra il 92 percento. Dovresti trovare un punto in cui, senza sacrificare la qualità, la dimensione dell’immagine sia soddisfacente.
3) Usa un compressore di immagini avanzato.
I grandi file immagine possono essere ulteriormente compressi con un minimizzatore di immagini online, che offre algoritmi avanzati per ridurre la dimensione del file e mantenere intatta la sensazione di qualità. Questi strumenti di solito operano con i tipi di file più comuni.
Usarli è facile come trascinare e rilasciare un file e scaricare il risultato. Trasforma i compressori di immagini nei tuoi strumenti per il web. Tra i servizi online che raccomandiamo ci sono Tiny JPG e ImageOptim. Troverai molte classifiche online dei compressori di immagini, poiché questi siti sono davvero popolari.
4) Sostituisci GIF con video quando è rilevante.
I file GIF tendono a essere pesanti, soprattutto se includono sequenze video più lunghe. Potrebbe essere molto più comodo usare diversi tipi di file video compressi per risparmiare tempo di caricamento della pagina e introdurre l’ottimizzazione della visualizzazione.
Potresti persino considerare di usare video YouTube incorporati o altri video cloud, il che impedirà al browser di scaricare le clip video direttamente dal tuo server e tutte in una volta.
5) Servi le immagini in modo responsive.
Abbiamo già toccato questo argomento. Per l’ottimizzazione del sito web, assicurati che il tuo CMS serva varie versioni di immagine per diverse risoluzioni dello schermo e dispositivi.
6) Usa WebP, JPEG2000 e altri.
L’uso del formato WebP, apparso sul mercato già nel 2010, rappresenta una spinta per la SEO del tuo sito web e naturalmente fa risparmiare tempo di caricamento. Questo formato offre una buona qualità dell’immagine e una dimensione ridotta del file. Tuttavia, l’uso di questo tipo di file può essere limitato dalla compatibilità del browser. Esistono anche molti altri formati web, che però non hanno raggiunto tanta popolarità (HEIC, AVIF, JPEG XL). E Google sta già pensando a WebP2!
Vari servizi cloud, come Orbitvu SUN, servono le immagini nel formato WebP in modo condizionale: se il browser non lo supporta, viene usato JPG o PNG al suo posto.
7) Usa il CDN per il caricamento delle immagini.
Le Content Delivery Networks (CDN) possono essere intese come API che definiscono come usare l’immagine caricata sul tuo sito web. Possono essere gestite internamente oppure fornite da un servizio esterno. Il loro uso si applica tramite URL speciali delle immagini che condizionano il modo in cui l’immagine viene mostrata dal browser e può portare a un risparmio del 40-80% sulla dimensione dell’immagine.
Leggi di più sui CDN in un articolo dedicato su web.dev.
8) Metti in cache le immagini che non cambiano.
La cache funziona memorizzando sul disco dell’utente le immagini che non cambiano e caricandole direttamente da lì quando necessario. La cache è solitamente gestita dai browser, ma la costruzione del sito web può incoraggiare questa soluzione e quindi accorciare il tempo di caricamento della pagina per gli utenti di ritorno.
Queste sono le nostre 8 regole. Parti da queste e costruisci il tuo set di consigli basati sull’esperienza. Ci piacerebbe sentirti!
Per la compatibilità dei formati immagine e dei browser web, ti consigliamo di consultare il sito semplice ed efficace: https://caniuse.com/
Un’immagine è codificata in un formato file usando uno di diversi spazi colore. Più frequentemente, sarà sRGB o Adobe RGB.
Il tema degli spazi colore è uno dei più complessi e sviluppati nella fotografia – leggi di più sugli spazi colore RGB nell’ articolo di Wikipedia.
Per l’uso web, avrai poca scelta per quanto riguarda lo spazio colore. Lo standard ampiamente assunto è sRGB e solo questo spazio è gestito dai browser Internet.
Assicurati di preparare le tue immagini fin dall’inizio nello spazio colore sRGB e eviterai perdite dovute alla conversione. Questo può essere impostato nelle impostazioni della fotocamera o gestito in software di editing delle immagini come Adobe Photoshop.
L’ottimizzazione delle immagini per scopi SEO (image SEO) si concentrerà sulla visibilità delle tue immagini nel motore di ricerca Google Graphics e, più in generale, del tuo sito web in qualsiasi risultato di ricerca.
Le immagini possono contribuire seriamente alla tua posizione nei risultati di ricerca di Google e trovarsi elencate favorevolmente in Google Graphics, se alcune regole vengono assimilate e mantenute nel design del sito web.
Per posizionare in alto un’immagine in un motore di ricerca, devi sapere che cosa viene cercato. Pianifica in anticipo le descrizioni delle tue immagini in accordo con la ricerca SEO, che può essere supportata da numerose piattaforme come Semrush, Semstorm o Ahrefs. Fai in modo che le tue immagini vengano trovate dove vengono cercate!
Un consiglio intelligente che puoi usare è aggiungere parole chiave speciali alle descrizioni delle immagini. “Opinione”, “Opinione esperta”, “top 10”, “recensione”, “prezzo”, “confronto”, “classifica”, “test” sono le parole chiave più comuni aggiunte a una categoria o a un prodotto per cercare informazioni. Rispondi a questa esigenza e aggiungile alla tua immagine! Se vendi telefoni, falla apparire così: “Samsung s10 test” o “Classifica rapida degli smartphone”. La regola è semplice.
Proprio come per l’ottimizzazione di risoluzione e dimensione, Google osserva il formato di un’immagine per valutarne l’idoneità a comparire come risultato di ricerca. Il formato definirà molto spesso dimensione e velocità di caricamento, influenzando così la decisione di Google. Il nostro consiglio rapido è: ove possibile usa WebP o i suoi successori.
La buona qualità ripaga con una maggiore visibilità su Google. Non usare molte immagini stock, perché verranno subito classificate più in basso. Cerca di introdurre il maggior numero possibile di immagini ben scattate dei tuoi prodotti, senza pixelazione, senza sfocature, con grande attrattiva. Google ti premierà.
La risoluzione e la dimensione della foto giocano un ruolo importante per Google. Non adottare l’approccio “più grande è meglio” a cui potresti essere tentato. Cerca di mantenere le tue immagini sotto i 5 MB, per consentire un caricamento rapido, migliorare l’esperienza utente e rafforzare la tua posizione nei motori di ricerca. Immagini di prodotto incluse!
Per far posizionare meglio il sito web e far apprezzare di più le sue immagini a Google, puoi usare la tecnica del lazy loading. Carica le immagini gradualmente man mano che l’utente procede nel sito, consentendo così una navigazione più fluida e tempi di caricamento delle pagine più brevi. Migliorerà anche l’esperienza utente, poiché contribuisce a un accesso più rapido ai contenuti.
Caricare una mappa delle immagini del sito web in Google Search Console renderà più facile per il motore di ricerca comprendere l’architettura e il posizionamento delle immagini sul tuo sito web. Più informazioni qui equivale a più credito – aspettati che ciò migliori il tuo ranking.
La chiave di un buon tag alt per immagini (il testo descrittivo che assegni nell’HTML del tuo sito web a un’immagine tramite l’attributo “alt”) è il posizionamento intelligente delle parole chiave. Non sovraccaricare il testo alt con parole chiave popolari; è meglio mantenerlo pertinente al contenuto dell’immagine e inserirne una o due in modo intuitivo. Nei siti multilingue, gestisci i tuoi tag alt per tutte le lingue rilevanti – significa più lavoro di localizzazione, ma ne vale certamente la pena.
È importante che la foto che vuoi far posizionare in alto su Google sia collocata correttamente all’interno del testo del sito web. Mettila vicino al testo che contiene le parole chiave desiderate e che essa illustra. Il motore di ricerca ricaverà informazioni da questa vicinanza. I siti e-commerce fanno bene a costruire una struttura in cui la descrizione del prodotto e l’immagine siano ben vicine tra loro.
Google è un motore di ricerca di contenuti. Assicurati che i tuoi contenuti testuali e visivi siano di alta qualità. Scrivi con intelligenza tenendo presenti i suggerimenti SEO e illustra i tuoi buoni testi con immagini pertinenti. Passo dopo passo, questo ripagherà come strategia generale per un’attività di e-commerce. Questo è image SEO portato un passo oltre!
Per Google è ancora più difficile distillare contenuto e significato dalle immagini. Se intendi trasmettere informazioni importanti ai tuoi clienti/lettori, evita di metterle solo nell’immagine. Per quanto utili siano le infografiche, sarà vantaggioso per la SEO descriverle nel testo.
Non solo tag alt ben progettati, ma anche immagini chiaramente nominate saranno favorite da Google. Usa trattini e nomi descrittivi. Soluzioni come DSC123123_a.jpg non parlano del contenuto dell’immagine né all’utente né al motore di ricerca.
Google designa parti di contenuto per modalità speciali di presentazione che sono più evidenti di un tipico risultato di ricerca. Pensa alle ricette culinarie, alle brevi biografie, alle schede prodotto. Se progetti il tuo sito web per indicare chiaramente quali contenuti meritano di essere trattati come dati strutturati (immagini incluse), puoi trarre vantaggio da una posizione esposta nella lista dei risultati di ricerca. Tienilo a mente soprattutto per i prodotti!
Con le nostre liste di linee guida, ti abbiamo guidato attraverso il tema dell’ottimizzazione delle immagini. Ora è il momento di mettere in pratica le tue conoscenze.
Che tu stia costruendo un nuovo sito web di e-commerce o pensando di migliorare le prestazioni di quello esistente, dovrai ottimizzare le immagini nelle seguenti aree:
Risoluzione
Si tratta di comprendere l’uso prevalente del tuo sito web e di adattare le immagini affinché lavorino in linea con quanto emerso. Anche l’erogazione responsive delle immagini sarà fondamentale. Vuoi che i tuoi utenti possano navigare su dispositivi mobili, tablet e desktop.
Dimensione del file
Trova il formato giusto per le tue immagini, uno che sia compatibile con il browser e acceleri il tempo di caricamento. Non esitare a usare potenti (e gratuiti) minimizzatori di immagini, che possono ridurre la dimensione del file fino al 70%.
Spazio colore
Qui c’è una sola scelta – lo spazio colore sRGB. È ottimizzato per i browser web e ampiamente servito sul Web.
SEO
La nostra lista di consigli fornisce una panoramica di base su come migliorare la SEO delle tue immagini. Cerca le parole chiave, struttura il sito web ed evita di mettere troppe informazioni solo nell’immagine. Pensa a URL corretti e all’indicazione dei dati strutturati. Questo, e altro ancora, dovrebbe portarti abbastanza lontano nell’ottimizzazione SEO delle immagini.
Pronto a iniziare? Ti auguriamo buona fortuna.
Compila il modulo per spiegarci i tuoi progetti e di quale tipo di flusso di lavoro hai bisogno per i tuoi contenuti di prodotto.
14 luglio 2025
Padroneggia la fotografia di prodotto per e-commerce nel 2025 con consigli esperti su illuminazione, impostazioni della fotocamera, studi basati sull’IA e post-produzione. Aumenta le vendite con immagini che costruiscono fiducia e convertono.
11 luglio 2025
Scopri come la fotografia di prodotto automatizzata può migliorare il tuo negozio e-commerce. Impara le tecniche chiave per avere successo e potenzia la tua presenza online. Leggi di più!
25 giugno 2025
Scopri 5 vantaggi chiave dell’automazione della fotografia di prodotto ecommerce: da un time-to-market più rapido a una migliore coerenza, precisione e ROI su larga scala.