Ottimizzazione Immagini Shopify per Negozi Più Veloci

Ultimo aggiornamento: June 28, 2026

L'ottimizzazione delle immagini di Shopify è per lo più un problema di workflow. I proprietari di negozi caricano foto prodotto grandi, i temi richiedono più pixel di quanti ne abbia bisogno il layout e la vetrina paga il prezzo su mobile. Correggi il file sorgente, la richiesta del tema e l'URL CDN pubblicato in quest'ordine.

Questa guida si concentra sulle pagine prodotto, le griglie di collezione, le immagini hero e le immagini editoriali all'interno di un negozio Shopify. Evita affermazioni di conversione inventate e ti fornisce controlli che puoi eseguire prima di sostituire i media live.

Risposta rapida: come dovresti ottimizzare le immagini Shopify?

Usa l'immagine più piccola che appaia comunque nitida alla dimensione massima che Shopify renderizzerà. Per la maggior parte delle foto prodotto, inizia con un master pulito, ritaglia per il layout del negozio, ridimensiona alla larghezza di visualizzazione reale maggiore e poi esporta un candidato WebP intorno a una qualità 80-85. Ispeziona il risultato su uno smartphone prima di sostituire l'immagine.

Shopify può fornire gli URL delle immagini tramite il suo CDN e i filtri immagine Liquid. La parte importante è chiedere la larghezza giusta nel tema, non caricare un file enorme sperando che il browser lo ridimensioni in modo economico. Il filtro image_url di Shopify supporta parametri di larghezza e altezza in Liquid, che è l'hook che gli sviluppatori dovrebbero utilizzare per il markup di immagini responsive nei temi.

Per un rapido audit del negozio, controlla prima questi quattro punti:

1. Immagine principale della pagina prodotto.
2. Miniature della griglia collezione.
3. Immagine hero o banner della homepage.
4. Immagini blog e guida all'interno dello storefront Shopify.
5. Qualsiasi galleria, recensione o immagine di upselling iniettata da un'app.

Se una di queste immagini è l'elemento Largest Contentful Paint, trattala separatamente. Non fare lazy-load alla prima immagine hero o prodotto visibile; rendila scopribile presto e fornisci le dimensioni corrette.

Quali dimensioni delle immagini dovrebbero usare i negozi Shopify?

Non esiste una singola dimensione immagine Shopify che si adatti a ogni tema. Un'immagine prodotto visualizzata a 720 CSS pixels su un layout desktop a due colonne ha bisogno di un file diverso rispetto a un hero full-width su uno smartphone retina. Parti dallo slot renderizzato, quindi fornisci abbastanza pixel per schermi ad alta densità.

Ho misurato esportazioni WebP locali da un sorgente stile prodotto di 2400 px per stabilire obiettivi pratici per questo articolo. I byte esatti cambieranno con la fotografia di gioielli, abbigliamento, cosmetici, elettronica e cibo, ma lo schema rimane: ridimensionare fa risparmiare più dei piccoli cambiamenti dello slider qualità.

Trattali come punti di partenza, non come regole. Un'immagine T-shirt su sfondo bianco potrebbe apparire pulita a 130 KB. Una foto ingrandita di un orologio con metallo spazzolato, piccole marcature e ombre potrebbe richiedere 300 KB alla stessa larghezza.

Se le tue immagini prodotto sono incoerenti prima della compressione, correggi prima il ritaglio. La guida alle immagini ecommerce copre l'inquadratura del prodotto, la coerenza dello sfondo e i segnali di fiducia visiva. Dopo che il ritaglio è corretto, usa la guida al rapporto di compressione immagine per registrare i byte originali, i byte finali e il risultato della qualità visibile.

Come cambia l'ottimizzazione delle immagini con il CDN di Shopify?

Il CDN di Shopify aiuta la consegna, ma non elimina la necessità di file sorgente sensati e markup del tema. Un upload da 5000 px può comunque creare pagine lente se il tema richiede varianti sovradimensionate o omette scelte responsive srcset.

La documentazione ufficiale Liquid di Shopify per il image_url filter mostra che i temi possono richiedere larghezze e altezze immagine trasformate. Questa è la leva da usare quando una scheda collezione ha bisogno solo di un'immagine da 600 px ma riceve un asset molto più grande.

I documenti di aiuto di Shopify documentano anche i tipi di media prodotto supportati, incluse immagini, video, modelli 3D e video ospitati in product media types. Controlla la documentazione corrente di Shopify prima di costruire un processo di importazione massiva, perché i limiti dei media e i formati accettati possono cambiare.

Usa questo ordine lato tema:

1. Mantieni la foto prodotto originale pulita e non compressa nella tua cartella di lavoro.
2. Carica un master ragionevole su Shopify, non un'esportazione ripetuta da un altro strumento.
3. Nel tema, richiedi la larghezza che ogni layout ha effettivamente bisogno.
4. Aggiungi attributi di larghezza e altezza in modo che il layout non si sposti.
5. Costruisci un srcset con passaggi di larghezza utili per mobile e desktop.
6. Lascia fare lazy-load alle immagini griglia prodotto sotto la piega.
7. Mantieni l'immagine prodotto o hero visibile per prima in modo "eager" se è probabile che guidi LCP.
8. Verifica che l'URL CDN finale restituisca HTTP 200.

Il CDN fa parte della risposta, non tutta la risposta. Se un acquirente apre una pagina prodotto e la prima immagine arriva tardi, il negozio sembra comunque lento anche quando il file proviene da una rapida posizione edge.

Dovresti caricare WebP su Shopify o lasciare che sia il tema a gestirlo?

Se il tuo workflow crea già file WebP puliti, carica WebP quando Shopify lo accetta per il tuo caso d'uso e il tuo tema lo gestisce correttamente. Se il tuo team dipende dalle trasformazioni immagine di Shopify, il lavoro più importante è richiedere la larghezza generata giusta e mantenere l'markup del tema navigabile (crawlable).

Per la maggior parte dei negozi, la decisione pratica è per ruolo dell'immagine:

La documentazione SEO per immagini di Google raccomanda l'uso di formati immagine supportati, alt text descrittivo ed elementi immagine navigabili in Google Images best practices. Questo è importante per i negozi Shopify perché le immagini prodotto sono sia asset di velocità che asset di ricerca.

Se stai decidendo tra formati moderni, confronta la qualità visiva piuttosto che i numeri dello slider. Una qualità WebP di 82 e una qualità AVIF di 55 non sono controlli equivalenti. Il AVIF vs WebP comparison spiega dove vince ogni formato e dove compatibilità o tempo di codifica cambiano la decisione.

Cosa dovresti controllare prima di sostituire le immagini prodotto live?

Non ottimizzare un catalogo intero a caso. Seleziona prima 20 immagini rappresentative: scatti prodotto luminosi, scatti prodotto scuri, dettagli ravvicinati, foto modello, asset con sfondo trasparente e immagini con etichette. Comprimi quelle, rivedile nel tema effettivo, quindi applica le impostazioni al resto del lotto.

Esegui questo controllo visivo prima di sovrascrivere qualsiasi cosa:

1. Apri l'immagine originale e quella ottimizzata alla dimensione che gli acquirenti vedono.
2. Controlla bordi del prodotto, trama del tessuto, tonalità della pelle, ombre ed etichette.
3. Ingrandisci l'immagine prodotto se il tuo tema supporta lo zoom.
4. Conferma che i bordi trasparenti non catturino una frangia.
5. Controlla prima su mobile, specialmente sulla pagina dettaglio prodotto.
6. Leggi l'alt text come se l'immagine fosse fallita nel caricare.
7. Conferma che l'URL immagine sia stabile e restituisca HTTP 200.
8. Mantieni il file master originale fuori da Shopify nel caso in cui tu debba riesportarlo.

Per l'elaborazione batch, ridimensiona prima della compressione. La guida al ridimensionamento batch fornisce un ordine più sicuro per le cartelle di immagini prodotto e la checklist completa ottimizzazione immagine è utile come passaggio finale pre-pubblicazione.

Come influenzano le immagini Shopify Core Web Vitals?

Le immagini spesso influiscono su Largest Contentful Paint perché la prima foto prodotto visibile o l'hero della homepage è solitamente l'elemento visivo più grande sopra la piega. Comprimere quell'immagine aiuta, ma sono importanti anche scoperta e priorità.

La guida web.dev per ottimizzare Largest Contentful Paint raccomanda di rendere il risorsa LCP probabile scopribile presto e di utilizzare suggerimenti di priorità dove appropriato. In termini Shopify, questo significa che la prima immagine prodotto non dovrebbe essere nascosta dietro JavaScript lato client, caricata solo dopo l'inizializzazione di un'app o trattata come una miniatura sotto la piega.

Usa questa tabella Core Web Vitals quando rivedi un tema:

Le app possono complicare questo. Riview widget, slider di raccomandazione e page builder a volte iniettano immagini al di fuori del componente immagine normale del tema. Ispeziona il pannello network dopo che la pagina è caricata, non solo il template Liquid.

Un workflow pratico per le immagini Shopify

Usa la stessa sequenza ogni volta che aggiungi prodotti o aggiorni una collezione. La coerenza conta più che inseguire un numero di qualità perfetto.

1. Salva i master intoccati in una cartella esterna a Shopify.
2. Ritaglia ogni prodotto secondo l'inquadratura concordata dal negozio.
3. Esporta un set di test alla larghezza reale massima dello storefront.
4. Prova WebP q85, q82 e q78 per le foto prodotto.
5. Confronta nelle dimensioni reali PDP e griglia.
6. Scegli la versione più piccola che protegga ancora il dettaglio del prodotto.
7. Carica o collega il workflow immagine ottimizzato.
8. Aggiorna le larghezze image_url del tema se la pagina richiede ancora file sovradimensionati.
9. Controlla LCP, spostamento layout e caricamento della collezione.
10. Registra le impostazioni per il prossimo lotto di prodotti.

Se hai tempo solo per una correzione, inizia con l'immagine della pagina prodotto che appare sopra la piega su mobile. Quell'immagine influenza la prima impressione, la velocità e la fiducia visiva. Dopo, lavora sulle griglie collezione e le immagini editoriali in ordine decrescente di traffico.

Per i negozi con obiettivi di dimensione file rigorosi, usa compress images without losing quality come workflow complementare. La chiave è rendere la compressione un passaggio di pubblicazione ripetibile, non una pulizia occasionale dopo che il negozio è già lento.