Perché l'ottimizzazione delle immagini è importante
Le immagini in genere rappresentano 50–80% del peso totale della pagina nei negozi Shopify. Una singola foto di prodotto non compressa può pesare tra 3 e 8 MB mentre dovrebbe essere tra 100 e 300 KB. Ciò ha un impatto diretto:
40–70%
of page weight comes from images
LCP
L'immagine dell'eroe è solitamente l'elemento LCP
SEO
La ricerca di immagini genera un traffico e-commerce significativo
Le immagini non ottimizzate rallentano il caricamento della pagina, danneggiano i Core Web Vitals (in particolare LCP), aumenta la frequenza di rimbalzo e danneggia le conversionie sprecare i dati mobili dei tuoi visitatori. La buona notizia: l'ottimizzazione delle immagini è uno dei miglioramenti della velocità più semplici e di maggior impatto che puoi apportare. Vuoi vedere dove si trova il tuo negozio? Metti alla prova la velocità del tuo negozio per scoprire quanto le immagini ti rallentano.
La soluzione semplice: ottimizzazione automatica delle immagini
Prima di immergerci nelle tecniche manuali di seguito — Thunder Page Speed Optimizer gestisce automaticamente l'ottimizzazione delle immagini, insieme al differimento degli script, all'incorporamento CSS e all'ottimizzazione dei caratteri.
Cosa gestisce automaticamente Thunder:
Caricamento lento intelligente
Lazy carica le immagini sotto la piega, mantiene le immagini degli eroi desiderose di un LCP veloce
WebP/Dimensionamento reattivo
Garantisce che le immagini vengano fornite in formato e dimensioni ottimali
Differimento dello script
Rinvia gli script di blocco del rendering in modo che le immagini vengano caricate prima
CSS critico + ottimizzazione dei caratteri
Ottimizzazione completa della velocità delle pagine, non solo delle immagini
Miglioramento medio: +27 punti PageSpeed
Thunder ottimizza le immagini come parte di una soluzione completa per la velocità. Configurazione in 30 secondi, nessuna modifica al codice, funziona con tutti i temi.
Piano gratuito disponibile · Non è richiesta la carta di credito · Configurazione in 30 secondi · Funziona con tutti i temi
Formati immagine: WebP, AVIF, JPEG, PNG
Il formato che utilizzi ha un impatto enorme sulla dimensione del file. Ecco cosa devi sapere:
WebP: la migliore scelta complessiva
25–35% più piccolo di JPEG con qualità equivalente. Supportato dal 97%+ dei browser. Il CDN di Shopify si converte automaticamente in WebP quando utilizzi url_immagine
Filtro Filtro liquido.
AVIF — Il più efficiente (emergente)
50% più piccolo di JPEG. Codifica più lenta e supporto del browser leggermente inferiore (~93%). Ideale per i negozi che necessitano della massima compressione. Shopify non si converte ancora automaticamente in AVIF.
JPEG: lo standard
Ideale per le fotografie. Carica JPEG di alta qualità e lascia che sia la CDN di Shopify a gestire la conversione WebP. Usa qualità 80–85% per il miglior equilibrio dimensioni/qualità.
PNG: solo per trasparenza
Usa PNG solo quando hai bisogno di trasparenza (loghi, icone). I PNG sono 3–10 volte più grandi dei JPEG per le fotografie. Non utilizzare mai PNG per le foto dei prodotti.
Compressione: come ridurre le dimensioni del file
⚡ Salta questo passaggio: Thunder ottimizza automaticamente la consegna delle immagini. Ma comprimere prima del caricamento è comunque una buona pratica per ottenere i migliori risultati.
Shopify lo fa no comprimi i tuoi caricamenti originali. Se carichi un'immagine da 5 MB, il file da 5 MB viene archiviato così com'è. È necessario comprimere prima del caricamento:
- Squoosh — Lo strumento gratuito di Google. Trascina, rilascia e regola il cursore della qualità. Ideale per immagini una tantum.
- TinyPNG : compressione batch. Carica fino a 20 immagini contemporaneamente (livello gratuito).
- Obiettivo: Meno di 200 KB per immagine di prodotto, meno di 150 KB per le miniature delle collezioni, meno di 300 KB per le immagini hero.
Risultati tipici della compressione:
Foto originale del prodotto: 3,2 MB (4000×4000 PNG)
Dopo il ridimensionamento a 2048px: 1,8 MB
Dopo la conversione JPEG: 420 KB
Dopo qualità 82%: 180 KB ← Caricalo su Shopify
Shopify funge da WebP: ~130 KB ← Cosa scaricano i visitatoriDimensionamento: carica le dimensioni giuste
Caricare immagini di grandi dimensioni è uno degli errori più comuni. Un'immagine da 4000×4000px visualizzata a 800×800px spreca il 96% dei suoi pixel. Ciò è particolarmente costoso per visitatori mobili, che spesso utilizzano connessioni più lente e schermi più piccoli.
| Tipo di immagine | Misura consigliata | Dimensione file di destinazione |
|---|---|---|
| Immagini del prodotto | 2048×2048px (quadrato) | 100–200KB |
| Miniature della raccolta | 800×800px | 50–100KB |
| Immagini di eroi/banner | Larghezza 1600–2000 px | 150–300KB |
| Immagini dei post del blog | Larghezza 1200px | 100–200KB |
| Loghi/icone | Secondo necessità (preferibilmente SVG) | Meno di 20KB |
Caricamento lento: carica immagini su richiesta
Il caricamento lento ritarda il caricamento delle immagini finché l'utente non scorre vicino ad esse. Ciò riduce drasticamente il peso iniziale della pagina: a Pagina di raccolta con 40 prodotti carica solo le prime 4–8 immagini in anticipo. Per un approfondimento sulle strategie di implementazione, consulta la nostra sezione dedicata Guida al caricamento lento di Shopify.
<!-- ✅ Below-fold images: lazy load -->
<img src="product.jpg" loading="lazy" alt="...">
<!-- ✅ Hero/LCP image: load eagerly -->
<img src="hero.jpg" loading="eager" fetchpriority="high" alt="...">
<!-- ❌ Don't lazy-load your hero image -->
<img src="hero.jpg" loading="lazy" alt="...">Regola critica: Non caricare mai in modo pigro l'immagine hero o le immagini dei prodotti Above-the-fold. Ciò danneggia LCP perché il browser ritarda intenzionalmente l'immagine più importante. Thunder gestisce questa distinzione automaticamente.
Immagini reattive con srcset
Le immagini reattive offrono dimensioni diverse per dimensioni dello schermo diverse. Un telefono riceve un'immagine da 400 px; un desktop ottiene 1200px. Ciò consente di risparmiare larghezza di banda sui dispositivi mobili.
<img
src="{{ image | image_url: width: 800 }}"
srcset="
{{ image | image_url: width: 400 }} 400w,
{{ image | image_url: width: 800 }} 800w,
{{ image | image_url: width: 1200 }} 1200w
"
sizes="(max-width: 768px) 100vw, 50vw"
width="800" height="800"
alt="{{ image.alt }}"
loading="lazy"
>
I temi Shopify più moderni includono
Supporto srcset
Attributi . Controlla le sezioni delle immagini del tuo tema per verificare.
Testo alternativo per SEO
Il testo alternativo ha due scopi: accessibilità (screen reader) e SEO (ricerca immagini di Google). Un buon testo alternativo è descrittivo, conciso e naturale.
alt="IMG_4523" — senza significato
alt="borsa borsa in pelle borsa a tracolla borsa da donna" — riempimento di parole chiave
alt="Borsa a tracolla in pelle rossa con hardware dorato" — descrittivo e naturale
In Shopify, imposta il testo alternativo su ciascuna immagine del prodotto nell'editor del prodotto. Per le immagini del tema, aggiungi il testo alternativo nelle impostazioni della sezione o direttamente nel modello Liquid.
CDN di immagini integrato di Shopify
Shopify automatically serves your images through a CDN (via Cloudflare), meaning they're delivered from servers close to your visitors worldwide. The CDN also handles:
- Conversione WebP automatica — quando usi il file
url_immagine FiltroFiltro liquido - Ridimensionamento al volo — richiedere dimensioni specifiche con
| url_immagine: larghezza: 800 Filtro - Memorizzazione nella cache : le immagini vengono memorizzate nella cache nelle edge location per una consegna rapida
Non è necessario un CDN di immagini separato o un servizio di ottimizzazione. Ma il CDN non comprime i tuoi originali né gestisce il caricamento lento: questa è la tua responsabilità (o quella di Thunder). Per una panoramica completa di ogni leva di ottimizzazione disponibile, leggi la nostra guida completa all'ottimizzazione della velocità di Shopify.
Ottimizzazione manuale dell'immagine rispetto a Thunder
📸 Aggiornamento 2026: novità nell'ottimizzazione delle immagini Shopify
- → Il supporto AVIF è in crescita. Sebbene WebP rimanga l'impostazione predefinita sicura (supporto del browser oltre il 97%), AVIF offre file più piccoli del 20–30% rispetto a WebP. La CDN di Shopify non offre ancora AVIF in automatico, ma è in arrivo. Per ora, WebP è la soluzione migliore.
- → LCP è il Core Web Vital n. 1 per le immagini. L'immagine del tuo eroe è quasi sempre l'elemento LCP. NON deve essere caricato pigro: usalo
fetchpriority="alta"invece. Vedi il nostro Guida all'ottimizzazione LCP. - → I negozi ricchi di immagini registrano i maggiori incrementi di velocità. I negozi con più di 50 prodotti in genere hanno il 40-70% del peso della pagina nelle immagini. Una corretta ottimizzazione può aumenta le conversioni dell'8–15% solo dai miglioramenti della velocità.
- → Le pagine di raccolta sono i peggiori trasgressori. Una raccolta con 48 prodotti che caricano tutte le immagini contemporaneamente può aggiungere 5–15 MB al peso della pagina. Ottimizzazione specifica della collezione è essenziale.
Controlla la performance dell'immagine del tuo negozio: Esegui un test di velocità gratuito →
Domande frequenti
Qual è il miglior formato immagine per Shopify?
WebP è il miglior formato complessivo per Shopify nel 2026: è supportato da oltre il 97% dei browser e fornisce file più piccoli del 25-35% rispetto a JPEG con qualità equivalente. La CDN di Shopify serve automaticamente WebP quando utilizzi il filtro image_url Liquid. Thunder garantisce inoltre che tutte le immagini vengano pubblicate automaticamente in formati ottimali.
Che dimensioni dovrebbero avere le immagini dei prodotti Shopify?
Carica le immagini dei prodotti a una risoluzione massima di 2048×2048 px: ciò fornisce una qualità nitida sui display Retina mantenendo le dimensioni dei file gestibili. La CDN di Shopify offre dimensioni diverse in base al dispositivo di visualizzazione. Per le miniature delle raccolte, 800×800px sono sufficienti. Le immagini hero/banner devono avere una larghezza compresa tra 1600 e 2000 px.
Shopify ottimizza automaticamente le immagini?
Parzialmente. La CDN di Shopify serve automaticamente il formato WebP e fornisce un dimensionamento reattivo attraverso il filtro image_url Liquid. Tuttavia, Shopify NON comprime i tuoi caricamenti originali: se carichi un'immagine da 5 MB, il file da 5 MB viene archiviato così com'è. È necessario comprimere le immagini prima del caricamento oppure utilizzare Thunder che gestisce automaticamente l'ottimizzazione delle immagini.
Dovrei utilizzare un'app di ottimizzazione delle immagini su Shopify?
Per i negozi con più di una manciata di prodotti, sì. La compressione manuale di ogni immagine richiede molto tempo ed è facile da dimenticare. Thunder gestisce l'ottimizzazione delle immagini come parte della sua completa ottimizzazione della velocità: caricamento lento, dimensionamento reattivo e conversione del formato insieme al differimento degli script e all'incorporamento CSS. Questo approccio completo in genere produce un miglioramento di +27 punti PageSpeed.
Come posso scrivere un buon testo alternativo per le immagini dei prodotti Shopify?
Un buon testo alternativo è descrittivo, conciso e naturale. Descrivi il contenuto dell'immagine: "Borsa a tracolla in pelle rossa con finiture dorate" è meglio di "borsa" o "IMG_4523". Includi il nome del tuo prodotto in modo naturale. Mantienilo sotto i 125 caratteri. Non inserire parole chiave: scrivi per una persona che non può vedere l'immagine.
L'ottimizzazione delle immagini influisce sulla SEO di Shopify?
Sì, in diversi modi. Le immagini ottimizzate migliorano la velocità della pagina (Core Web Vitals), che è un segnale diretto di posizionamento di Google. Il testo alternativo descrittivo aiuta a posizionarsi nella ricerca di immagini di Google. Le immagini di dimensioni adeguate impediscono lo spostamento del layout (CLS), un altro Core Web Vital. Thunder ottimizza automaticamente tutti questi aspetti.
Come posso ottimizzare le immagini su Shopify senza un'app?
Prima del caricamento: comprimi le immagini con TinyPNG o Squoosh fino a meno di 200 KB, salva come WebP o JPEG (non PNG per le foto) e ridimensiona fino a un massimo di 2048 px. Nei modelli Liquid, utilizza il filtro image_url con parametri di larghezza per il dimensionamento reattivo. Aggiungi load='lazy' alle immagini lower-fold e fetchpriority='high' alla tua immagine hero. Aggiungi un testo alternativo descrittivo a ogni immagine nel pannello di controllo Shopify.
Qual è la dimensione massima del file immagine per Shopify?
Shopify consente immagini fino a 20 MB e 4472×4472 pixel. Tuttavia, non dovresti mai caricare immagini così grandi: punta a meno di 200 KB per immagine dopo la compressione. I file di grandi dimensioni rallentano notevolmente il tempo di caricamento del tuo negozio, anche con la CDN di Shopify. Per le immagini dei prodotti, 100-150KB compressi a 2048×2048px offrono il miglior equilibrio tra qualità e velocità.