Images Shopify WebP et AVIF : Shopify convertit-il Automatiquement ? (2026)

Optimisez le chargement des images Shopify en 60 secondes

Exécutez un test de vitesse gratuit sur votre boutique — si les images font baisser votre score, vous verrez des avertissements tels que « Dimensionner correctement les images » ou « Servir les images dans des formats de nouvelle génération » dans les diagnostics. Alors que Shopify gère la conversion de format, Thunder Page Speed Optimizer aborde l'autre moitié des performances de l'image :

• Chargement paresseux des images hors écran afin qu'elles ne bloquent pas le rendu initial de la page
• Précharge votre image héros/LCP pour un rendu plus rapide au-dessus de la ligne de flottaison
• Diffère les images d'applications tierces et les scripts qui ralentissent le chargement des images
• Optimise l'ordre de chargement des ressources afin que les images apparaissent plus rapidement

Conversion de format + optimisation du chargement = vitesse maximale de l'image. Thunder gère le côté chargement en un seul clic.

Fonctionnement de la conversion automatique WebP et AVIF de Shopify

Lorsqu'une personne visite votre boutique Shopify, son navigateur envoie une requête HTTP avec un Accepter En-tête répertoriant les formats d'image qu'il prend en charge. Un navigateur Chrome moderne envoie quelque chose comme : image/avif,image/webp,image/apng,image/*. Le CDN de Shopify lit cet en-tête et propose le meilleur format disponible.

L'ordre de priorité est : AVIF → WebP → format original. Si le navigateur prend en charge AVIF et la version AVIF est plus petite que la version WebP pour cette image spécifique, Shopify sert AVIF. Sinon, cela revient à WebP. Si le navigateur ne prend en charge ni l'un ni l'autre (extrêmement rare en 2026), il sert le JPEG ou le PNG d'origine.

Cela se produit au niveau CDN — aucune modification du code de thème n'est nécessaire. Shopify annoncé Prise en charge automatique d'AVIF en août 2022, s'appuyant sur la prise en charge de WebP disponible depuis 2020. La conversion est effectuée côté serveur, elle fonctionne donc pour toute image servie via le pipeline d'images de Shopify.

Ce qui est automatiquement converti

• Images du produit — téléchargé via l'administrateur Shopify
• Images de collection — images en vedette sur les pages de collection
• Actifs du thème — images dans le dossier actifs/de votre thème, servies via URL_actif
• Images de contenu — téléchargé via l'éditeur de texte enrichi dans les pages/articles de blog Images de coupe
• — diaporama, bannière de héros, logo et autres images de la section thématique

L'exigence clé : l'image doit être servie à travers CDN de Shopify (URL commençant par cdn.shopify.com). Toute image qui passe par le pipeline d'images de Shopify obtient une conversion de format automatique.

Lorsque la conversion d'image de Shopify ne fonctionne pas

La conversion automatique couvre la plupart des images, mais plusieurs scénarios courants contournent complètement le CDN de Shopify. Si votre affiche toujours "Servir les images dans des formats de nouvelle génération", l'un de ces éléments en est probablement la cause :

WebP vs AVIF vs JPEG vs PNG : comparaison des formats d'image Shopify

Comprendre les différences vous aide à prendre de meilleures décisions concernant les téléchargements de sources et à résoudre les problèmes de format. Voici les performances de chaque format pour une photographie de produit Shopify typique : Format

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 optimisation du chargement des images — chargement paresseux, préchargement et srcsets réactifs.

Comment vérifier si votre boutique Shopify sert WebP et AVIF

Vous souhaitez vérifier que vos images sont en cours de conversion ? Voici une vérification rapide à l'aide de Chrome DevTools :

1. Ouvrez votre boutique dans Chrome et appuyez sur F12 (ou Cmd+Option+I sur Mac) pour ouvrir DevTools
2. Cliquez sur le Onglet
3. Recharger la page (Ctrl+R / Cmd+R) Filtre
4. Cliquez sur le Onglet Img pour afficher uniquement les images
5. Regardez le Colonne — vous devriez voir page Web ou avif au lieu de jpeg ou png
6. Cliquez sur n'importe quelle image et vérifiez la En-têtes de réponse — chercher type de contenu : image/webp ou type de contenu : image/avif

Si vous voyez jpeg ou png pour les images sur le CDN de Shopify (cdn.shopify.com), quelque chose empêche la conversion. Vérifiez si la balise d'image dans votre code de thème utilise les filtres d'image Liquid de Shopify.

Pour une vision plus large des performances au-delà des seuls formats d'image, notre Guide d'audit de vitesse Shopify parcourt le processus de diagnostic complet.

Meilleures pratiques de téléchargement d'images pour Shopify WebP et AVIF

La conversion automatique de Shopify fonctionne mieux lorsque vous téléchargez des fichiers sources correctement préparés. Voici les règles qui garantissent une qualité maximale pour une taille de fichier minimale :

Contrôle WebP manuel avec Shopify Liquid

Bien que Shopify gère automatiquement la conversion de format dans la plupart des cas, les développeurs de thèmes ont parfois besoin d'un contrôle manuel. Shopify's Liquid fournit le Filtre image_url Filtre avec un Format Paramètre :

<!-- 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"
/>

Dans la plupart des cas, il est préférable d'omettre le paramètre de format. Cela permet à Shopify de diffuser AVIF aux navigateurs qui le prennent en charge (plus petit que WebP) et WebP au reste. Forcer Format : 'webp' empêche la livraison AVIF, ce qui signifie des fichiers plus volumineux pour les utilisateurs de Chrome et Firefox qui pourraient recevoir AVIF.

Pour en savoir plus sur la manière dont le chargement d'image interagit avec l'optimisation CSS et JavaScript, consultez notre Guide d'optimisation du LCP — the hero image (often your largest image) is typically the LCP element and benefits most from format + loading optimization combined.

Comment WebP et AVIF affectent les éléments essentiels du Web de Shopify

Le format d'image impacte directement deux métriques Core Web Vitals qui affectent votre Classements SEO:

Pour une image complète de Core Web Vitals, notre Guide Shopify Core Web Vitals couvre les trois métriques et la manière dont elles interagissent.

Foire aux questions

Chargez vos images Shopify à la vitesse maximale

La conversion automatique WebP et AVIF de Shopify constitue une base solide : elle gère l'optimisation du format pour la plupart des images sans aucun travail de votre part. Les lacunes (HTML personnalisé, arrière-plans CSS, images d'application) peuvent être corrigées grâce à une utilisation appropriée de Liquid et au développement de thèmes intelligents.

Mais le format ne représente que la moitié de l'équation de la vitesse de l'image. Comment les images Chargement compte tout autant que la façon dont ils sont codé. Le chargement paresseux, le préchargement de l'image LCP et le report des ressources bloquant le rendu contribuent tous à un rendu d'image plus rapide. Thunder Page Speed Optimizer gère automatiquement le côté chargement.

Testez dès maintenant les performances d'image de votre boutique — et vérifiez les diagnostics pour connaître les opportunités d'optimisation d'image restantes. Pour le manuel d'optimisation complet, consultez notre guide complet d'optimisation de la vitesse Shopify.