Shopify WebP et AVIF : Shopify convertit-il automatiquement les images ? (Guide 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 en-tête Accept qui répertorie les formats d’image pris en charge. Un navigateur Chrome récent envoie par exemple : image/avif,image/webp,image/apng,image/*. Le CDN de Shopify lit cet en-tête et fournit 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 de produits — importées depuis l’interface d’administration de Shopify
Images de collections — images mises en avant sur les pages de collection
Ressources du thème — images du dossier assets du thème, diffusées via asset_url
Images de contenu — importées avec l’éditeur de texte enrichi dans les pages et les articles de blog
Images de sections — diaporamas, bannières principales, logos et autres images des sections du thème

Condition essentielle : l’image doit être diffusée par le CDN de Shopify (avec une URL commençant par cdn.shopify.com). Toute image qui passe par la chaîne de traitement d’images de Shopify bénéficie de la conversion automatique du format.

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 :

1. HTML personnalisé avec URL codées en dur

Si votre thème ou une section personnalisée utilise une balise <img> avec une URL complète au lieu des filtres Liquid de Shopify, le CDN ne peut ni intercepter l’image ni convertir son format. Ce cas est fréquent dans les sections codées sur mesure et les constructeurs de pages.

Correction : utilisez les filtres Shopify image_url ou img_tag dans les modèles Liquid. Ils font passer l’image par la chaîne de traitement du CDN de Shopify.

2. Images d’arrière-plan CSS

Les images d’arrière-plan définies avec la propriété CSS background-image: url(...) ne passent pas par le même mécanisme de négociation de contenu. Le CSS ne transmet pas les en-têtes Accept comme le font les balises <img> ; le CDN fournit donc le format d’origine.

Correction : remplacez les arrière-plans CSS par des balises <img> utilisant object-fit: cover. Vous conserverez le même rendu visuel tout en bénéficiant de la conversion de format par le CDN.

3. Images injectées par l'application

De nombreuses applications Shopify chargent leurs propres images : photos d’avis, badges de confiance, visuels de pop-up ou miniatures de recommandations de produits. Ces images proviennent souvent du CDN de l’application plutôt que de celui de Shopify et échappent donc à la conversion de format. Les applications d’avis sont les plus souvent concernées, car elles peuvent charger des dizaines de photos JPEG envoyées par les utilisateurs.

Correction : contactez le développeur de l’application ou utilisez une application qui diffuse ses images via le CDN de Shopify. Thunder peut différer le chargement des images ajoutées par les applications afin qu’elles ne bloquent pas le rendu.

4. Images externes et métachamps

Les images stockées dans des métachamps et utilisées sans le filtre image_url, ainsi que celles hébergées sur des services externes (Cloudinary, Imgix ou votre propre serveur), contournent entièrement le CDN de Shopify.

Correction : Pour les images de champ méta, passez par | image_url dans votre modèle Liquid. Pour les images externes, utilisez la propre conversion WebP/AVIF du service externe.

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

	Taille du fichier (vs JPEG)	Qualité	Prise en charge du navigateur	Transparence	Idéal pour
JPEG	Référence	Bon	100%	❌ Non	Repli universel
PNG	2-5× plus grand	Sans perte	100%	✅ Oui	Logos, icônes, transparence
WebP	25-35% plus petit	Parfait	97%+	✅ Oui	La plupart des photos de produits
AVIF	30 à 50 % plus petit	Meilleur à faible débit	~93%	✅ Oui	Images de héros à haute compression

Pour la plupart des boutiques Shopify, il n’est pas nécessaire de choisir un format. Importez des fichiers source JPEG ou PNG de bonne qualité : le CDN de Shopify sélectionnera le format optimal pour chaque visiteur. Les gains les plus importants viennent d’un dimensionnement adapté — n’envoyez pas une image de 4000 px pour un affichage de 400 px — et de l’optimisation du chargement des images, notamment le chargement différé, le préchargement et les srcsets adaptatifs.

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 :

Ouvrez votre boutique dans Chrome et appuyez sur F12 (ou Cmd+Option+I sur Mac) pour ouvrir DevTools
Cliquez sur l’onglet Network
Rechargez la page (Ctrl+R ou Cmd+R)
Cliquez sur le filtre Img pour n’afficher que les images
Consultez la colonne Type : vous devriez voir webp ou avif plutôt que jpeg ou png
Cliquez sur une image et vérifiez les en-têtes de réponse : recherchez content-type: image/webp ou content-type: 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 :

✅ Faites ceci

Téléchargez l'original JPEG ou PNG — laissez Shopify gérer la conversion. La qualité de la source compte plus que le format de la source.
Dimensionner les images de manière appropriée — images de produits à 2048 × 2048 px maximum (maximum recommandé par Shopify). Images de héros aux dimensions exactes utilisées par votre thème (généralement 1920 × 800 px ou similaire).
Utilisez JPEG pour les photos de produits — fichier source plus petit, meilleur point de départ de la compression.
Utilisez PNG uniquement lorsque vous avez besoin de transparence — logos, icônes, superpositions. Le format PNG pour les photos de produits gaspille de la bande passante.
Compresser avant de télécharger — utilisez TinyPNG ou Squoosh pour supprimer les métadonnées et optimiser le fichier source. Shopify convertit le format, mais commencer par une source propre est utile.

❌ Évitez cela

Ne téléchargez pas de fichiers WebP préconvertis — Shopify peut les compresser deux fois, créant des artefacts et des fichiers potentiellement plus volumineux que la conversion à partir du JPEG original.
Ne téléchargez pas de photos de produits de 6 000 px — Shopify les redimensionne, mais l'original occupe toujours de l'espace de stockage et ralentit les opérations d'administration.
N'utilisez pas de BMP ou TIFF — des fichiers énormes qui ne gagnent rien. Convertissez d'abord en JPEG/PNG.
Ne vous fiez pas uniquement au format — une image WebP de 4 000 px est toujours plus lente qu'un JPEG de 800 px correctement dimensionné. Les dimensions comptent plus que le format.

Contrôle WebP manuel avec Shopify Liquid

Shopify gère automatiquement la conversion de format dans la plupart des cas, mais les développeurs de thèmes ont parfois besoin d’un contrôle manuel. Liquid de Shopify fournit alors le filtre image_url avec le paramètre format :

<!-- 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. Shopify peut ainsi fournir AVIF aux navigateurs compatibles — lorsqu’il est plus léger que WebP — et WebP aux autres. Forcer format: 'webp' empêche l’envoi d’AVIF et peut donc produire des fichiers plus volumineux pour les utilisateurs de Chrome et Firefox.

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 — l'image principale (souvent votre image la plus grande) est généralement l'élément LCP et bénéficie le plus de l'optimisation combinée du format et du chargement.

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:

LCP (la plus grande peinture à contenu)

L’image principale ou la plus grande photo de produit est généralement l’élément LCP. Passer du JPEG au WebP peut réduire son temps de téléchargement de 25 à 35 %. Passer du JPEG à l’AVIF peut le réduire de 30 à 50 %. Sur une connexion mobile 4G, le LCP peut ainsi gagner 200 à 500 ms. Associée au préchargement et aux indications de ressources, l’optimisation du format peut faire passer le LCP sous le seuil de 2,5 s.

CLS (Décalage Cumulatif de Mise en Page)

Le format d’image n’affecte pas directement le CLS de Shopify, mais un chargement plus rapide grâce à WebP ou AVIF réduit le risque qu’une image affichée tardivement provoque un décalage. La correction principale du CLS consiste à définir explicitement les attributs width et height sur les balises <img>. Consultez notre guide de correction du CLS pour plus de détails.

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.

⚡ Thunder + Conversion automatique de Shopify = Vitesse d'image maximale

Shopify gère la conversion de format (WebP/AVIF). Thunder gère tout le reste :

Optimisation	Shopify CDN	Thunder
Conversion WebP/AVIF	✅ Automatique	—
Chargement paresseux des images hors écran	—	✅ Automatique
Préchargement des images Hero/LCP	—	✅ Automatique
Report de script (rendu d'image plus rapide)	—	✅ Automatique
Optimisation CSS (débloquer le rendu)	—	✅ Automatique

Ensemble, la conversion de format de Shopify et l'optimisation du chargement de Thunder s'améliorent généralement scores de vitesse globaux de 27+ points. commencent à 19,99 $/mois avec un essai gratuit.

Foire aux questions

Shopify convertit-il automatiquement les images en WebP ?

Oui. Le CDN de Shopify diffuse automatiquement les images au format WebP lorsque le navigateur du visiteur le prend en charge. Cela se produit via la négociation de contenu : le navigateur envoie un en-tête Accept répertoriant les formats pris en charge, et le CDN de Shopify répond avec WebP s'il est pris en charge. Vous n'avez pas besoin de télécharger les fichiers WebP manuellement. Cependant, cela ne fonctionne que pour les images diffusées via le CDN de Shopify à l'aide du filtre liquide image_url ou des balises d'image de thème standard. Le HTML personnalisé avec des URL d’images codées en dur contourne cette optimisation.

Shopify prend-il en charge les images AVIF ?

Oui. Depuis août 2022, le CDN de Shopify fournit automatiquement les images au format AVIF lorsque le navigateur le prend en charge et lorsque AVIF produit un fichier plus petit que WebP pour cette image spécifique. AVIF atteint généralement des tailles de fichiers 20 à 50 % plus petites que WebP, mais l'encodage est plus lent et toutes les images n'en bénéficient pas de la même manière. Shopify gère cette décision automatiquement : il compare les sorties WebP et AVIF pour chaque image et sert la plus petite des deux.

Dois-je télécharger des images WebP sur Shopify ou les laisser se convertir automatiquement ?

Téléchargez vos fichiers JPEG ou PNG originaux de haute qualité et laissez Shopify les convertir automatiquement. Le téléchargement de fichiers WebP préconvertis peut en fait se retourner contre vous : Shopify peut les recompresser, entraînant des artefacts de double compression et des tailles de fichiers plus grandes que si vous aviez téléchargé l'original. L'exception est si vous avez besoin de transparence : téléchargez PNG pour les besoins de transparence, et Shopify le convertira en WebP avec prise en charge du canal alpha.

Pourquoi mes images Shopify ne sont-elles pas diffusées en tant que WebP ?

Raisons courantes : (1) Les images chargées via du HTML personnalisé ou des URL externes contournent la conversion CDN de Shopify. (2) Les images d'arrière-plan définies en CSS ne passent pas par le pipeline d'images de Shopify. (3) Les images injectées par l'application peuvent utiliser leur propre CDN. (4) Les images Metafield accessibles sans le filtre image_url ne seront pas converties. (5) Le navigateur du visiteur ne supporte pas WebP (rare en 2026 — plus de 97% des navigateurs le supportent). Vérifiez l'onglet Réseau de Chrome DevTools, filtrez par « Img » et regardez la colonne « Type ».

Quelle est la différence entre WebP et AVIF pour les boutiques Shopify ?

WebP réduit la taille du fichier de 25 à 35 % par rapport au JPEG avec une qualité presque identique et prend en charge plus de 97 % du navigateur. AVIF réduit la taille des fichiers de 30 à 50 % par rapport au JPEG avec une qualité légèrement meilleure à faible débit, mais la prise en charge du navigateur est d'environ 93 % (pas d'IE11, limité sur les anciens iOS). Pour les boutiques Shopify, vous n'avez pas besoin de choisir : le CDN de Shopify propose automatiquement le meilleur format pour le navigateur de chaque visiteur. AVIF est servi lorsqu'il est pris en charge et lorsqu'il produit un fichier plus petit que WebP.

Ai-je besoin d'une application d'optimisation d'image si Shopify se convertit automatiquement en WebP ?

La conversion automatique de format de Shopify gère le côté format, mais elle ne gère pas tout. Vous bénéficiez toujours de : (1) un dimensionnement d'image approprié – le téléchargement d'une image de 4 000 px pour un affichage de 400 px gaspille de la bande passante même dans WebP, (2) un chargement paresseux pour les images en dessous de la ligne de flottaison, (3) des attributs srcset réactifs pour différentes tailles d'écran et (4) l'optimisation du texte alternatif pour le référencement. Thunder Page Speed Optimizer gère l'optimisation du chargement des images (chargement paresseux, préchargement des images de héros, images hors écran différées) dans le cadre de son optimisation plus large de la vitesse.

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.

⚡

Optimisation de vitesse experte pour votre boutique

Notre équipe gère tout — optimisation du thème, nettoyage des apps, garantie Core Web Vitals. La plupart des boutiques optimisées en 2 semaines.

Demander un audit de vitesse gratuit →

✅ Garantie Core Web Vitals · ⚡ Livraison en 2 semaines · 🎁 6 mois Thunder offerts

À partir de 1 500 € · En savoir plus

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