Immagini Shopify WebP e AVIF: Shopify converte Automaticamente? (2026)

Ottimizza il caricamento delle immagini Shopify in 60 secondi

Esegui uno speed test gratuito sul tuo negozio : se le immagini trascinano verso il basso il tuo punteggio, vedrai avvisi come "Ridimensiona correttamente le immagini" o "Pubblica immagini in formati di nuova generazione" nella diagnostica. Mentre Shopify gestisce la conversione del formato, Thunder Page Speed Optimizer affronta l'altra metà della prestazione dell'immagine:

• Lazy carica le immagini fuori schermo in modo che non blocchino il rendering della pagina iniziale
• Precarica l'immagine del tuo eroe/LCP per un rendering Above-the-fold più veloce
• Rinvia immagini e script di app di terze parti che rallentano il caricamento delle immagini
• Ottimizza l'ordine di caricamento delle risorse in modo che le immagini vengano visualizzate più velocemente

Conversione del formato + ottimizzazione del caricamento = velocità massima dell'immagine. Thunder gestisce il lato di caricamento con un clic.

Come funziona la conversione automatica WebP e AVIF di Shopify

Quando qualcuno visita il tuo negozio Shopify, il suo browser invia una richiesta HTTP con un Accetta Intestazione che elenca i formati di immagine supportati. Un moderno browser Chrome invia qualcosa del tipo: immagine/avif,immagine/webp,immagine/apng,immagine/*. Il CDN di Shopify legge questa intestazione e fornisce il miglior formato disponibile.

L'ordine di priorità è: AVIF → WebP → formato originale. Se il browser supporta AVIF e la versione AVIF è più piccola della versione WebP per quella specifica immagine, Shopify serve AVIF. Altrimenti si torna a WebP. Se il browser non supporta nessuno dei due (cosa estremamente rara nel 2026), fornisce il JPEG o PNG originale.

Ciò avviene a livello CDN: non sono necessarie modifiche al codice del tema. Annunciato Shopify supporto AVIF automatico nell'agosto 2022, basato sul supporto WebP disponibile dal 2020. La conversione viene eseguita lato server, quindi funziona per qualsiasi immagine fornita tramite la pipeline di immagini di Shopify.

Cosa viene convertito automaticamente

• Immagini del prodotto : caricato tramite il pannello di controllo Shopify
• Immagini della raccolta : immagini in primo piano nelle pagine delle collezioni
• Risorse tematiche — immagini nelle risorse/cartella del tuo tema, servite tramite asset_url
• Immagini dei contenuti — caricato tramite l'editor RTF in pagine/post del blog
• Immagini della sezione : presentazione, banner dell'eroe, logo e altre immagini della sezione tematica

Il requisito fondamentale: l'immagine deve essere servita CDN di Shopify (URL che iniziano con cdn.shopify.com). Qualsiasi immagine che passa attraverso la pipeline di immagini di Shopify ottiene la conversione automatica del formato.

Quando la conversione delle immagini di Shopify non funziona

La conversione automatica copre la maggior parte delle immagini, ma diversi scenari comuni ignorano completamente la CDN di Shopify. Se il tuo Risultati del test di velocità mostra ancora "Pubblica immagini in formati di nuova generazione", una di queste è probabilmente la causa:

WebP vs AVIF vs JPEG vs PNG: confronto dei formati immagine di Shopify

Comprendere le differenze ti aiuta a prendere decisioni migliori sui caricamenti di origine e a risolvere i problemi di formato. Ecco come si comporta ciascun formato per la tipica fotografia di prodotto Shopify:

For most Shopify stores, you don't need to choose. Upload high-quality JPEG or PNG source files, and Shopify's CDN picks the optimal format per visitor. The real performance gains come from proper sizing (don't upload 4000px images for 400px displays) and ottimizzando il caricamento delle immagini : caricamento lento, precaricamento e srcset reattivi.

Come verificare se il tuo negozio Shopify supporta WebP e AVIF

Vuoi verificare che le tue immagini vengano convertite? Ecco un rapido controllo utilizzando Chrome DevTools:

1. Apri il tuo negozio in Chrome e premi F12 (o Cmd+Opzione+I su Mac) per aprire DevTools
2. Fare clic su Scheda Rete
3. Ricarica la pagina (Ctrl+R / Cmd+R) Filtro
4. Fare clic su Scheda Imm per mostrare solo le immagini
5. Guarda il Colonna Tipo : dovresti vedere webp o avif invece di jpeg o png
6. Fai clic su qualsiasi immagine e controlla Intestazioni di risposta — cerca tipo di contenuto: immagine/webp o tipo di contenuto: immagine/avif

Se vedi jpeg o png per le immagini sul CDN di Shopify (cdn.shopify.com), qualcosa impedisce la conversione. Controlla se il tag immagine nel codice del tema utilizza i filtri immagine Liquid di Shopify.

Per un quadro prestazionale più ampio oltre i semplici formati di immagine, il ns Guida al controllo della velocità di Shopify illustra l'intero processo diagnostico.

Best practice per il caricamento di immagini per Shopify WebP e AVIF

La conversione automatica di Shopify funziona meglio quando carichi file sorgente adeguatamente preparati. Ecco le regole che garantiscono la massima qualità con la dimensione minima del file:

Controllo WebP manuale con Shopify Liquid

Sebbene Shopify gestisca automaticamente la conversione del formato nella maggior parte dei casi, gli sviluppatori di temi a volte necessitano del controllo manuale. Liquid di Shopify fornisce il Filtro url_immagine Filtro con a Formato Parametro :

<!-- Force WebP format -->
{{ product.featured_image | image_url: width: 800, format: 'webp' }}

<!-- Let Shopify auto-negotiate (recommended) -->
{{ product.featured_image | image_url: width: 800 }}

<!-- Responsive with srcset (auto-format per browser) -->
<img
  src="{{ product.featured_image | image_url: width: 800 }}"
  srcset="
    {{ product.featured_image | image_url: width: 400 }} 400w,
    {{ product.featured_image | image_url: width: 800 }} 800w,
    {{ product.featured_image | image_url: width: 1200 }} 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="{{ product.featured_image.alt | escape }}"
  loading="lazy"
  width="800"
  height="800"
/>

Nella maggior parte dei casi, omettere il parametro formato è meglio. Ciò consente a Shopify di servire AVIF ai browser che lo supportano (più piccoli di WebP) e WebP al resto. Forzare Formato : 'webp' impedisce la consegna di AVIF, il che significa file più grandi per gli utenti di Chrome e Firefox che potrebbero ricevere AVIF.

Per ulteriori informazioni su come il caricamento delle immagini interagisce con l'ottimizzazione CSS e JavaScript, vedere il nostro Guida all'ottimizzazione LCP — the hero image (often your largest image) is typically the LCP element and benefits most from format + loading optimization combined.

In che modo WebP e AVIF influiscono sui Core Web Vitals di Shopify

Il formato dell'immagine influisce direttamente su due parametri Core Web Vitals che influiscono sul tuo Classifiche SEO:

Per il quadro completo sui Core Web Vitals, il ns Guida Shopify Core Web Vitals copre tutte e tre le metriche e il modo in cui interagiscono.

Domande frequenti

Carica le tue immagini Shopify alla massima velocità

La conversione automatica WebP e AVIF di Shopify è una solida base: gestisce l'ottimizzazione del formato per la maggior parte delle immagini senza alcun intervento da parte tua. Le lacune (HTML personalizzato, sfondi CSS, immagini delle app) sono risolvibili con il corretto utilizzo di Liquid e lo sviluppo intelligente del tema.

Ma il formato è solo metà dell'equazione della velocità dell'immagine. Come immagini carico conta tanto quanto come sono codificato. Il caricamento lento, il precarico dell'immagine LCP e il differimento delle risorse di blocco del rendering contribuiscono tutti a un rendering dell'immagine più rapido. Thunder Page Speed Optimizer gestisce automaticamente il lato di carico.

Metti alla prova la performance dell'immagine del tuo negozio adesso - e controlla la diagnostica per eventuali opportunità rimanenti di ottimizzazione dell'immagine. Per il playbook completo sull'ottimizzazione, consulta il nostro guida completa all'ottimizzazione della velocità di Shopify.