Optimisation des images Shopify : Meilleures tailles, formats et compression

Pourquoi l'optimisation des images est importante

Les images représentent généralement 50 à 80 % du poids total de la page sur les boutiques Shopify. Une seule photo de produit non compressée peut faire entre 3 et 8 Mo alors qu’elle devrait faire entre 100 et 300 Ko. Cela impacte directement :

Les images non optimisées ralentissent le chargement de vos pages, nuisent à vos Core Web Vitals (en particulier LCP), augmente les taux de rebond et nuit aux conversions, et gaspillez les données mobiles de vos visiteurs. La bonne nouvelle : l’optimisation des images est l’une des améliorations de vitesse les plus simples et les plus efficaces que vous puissiez apporter. Vous voulez voir où se situe votre magasin ? Testez la vitesse de votre boutique pour savoir à quel point les images vous ralentissent.

La solution facile : optimisation automatique de l'image

Avant de plonger dans les techniques manuelles ci-dessous — Thunder Page Speed Optimizer gère automatiquement l'optimisation des images, ainsi que le report des scripts, l'inline CSS et l'optimisation des polices.

Formats d'image : WebP, AVIF, JPEG, PNG

Le format que vous utilisez a un impact considérable sur la taille du fichier. Voici ce que vous devez savoir :

Compression : comment réduire la taille du fichier

Shopify le fait non compressez vos téléchargements originaux. Si vous téléchargez une image de 5 Mo, ce fichier de 5 Mo est stocké tel quel. Vous devez compresser avant de télécharger :

• Squoosh — L'outil gratuit de Google. Faites glisser, déposez, ajustez le curseur de qualité. Idéal pour les images uniques.
• PetitPNG — Compression par lots. Téléchargez jusqu'à 20 images à la fois (niveau gratuit).
• Cible : Moins de 200 Ko par image de produit, moins de 150 Ko pour les miniatures de collection, moins de 300 Ko pour les images de héros.

Résultats de compression typiques :
Photo originale du produit : 3,2 Mo (4 000 × 4 000 PNG)
Après redimensionnement à 2048px : 1,8 Mo
Après conversion JPEG : 420 Ko
Après qualité 82 % : 180 Ko ← Téléchargez ceci sur Shopify
Shopify sert de WebP : ~130 Ko ← Ce que les visiteurs téléchargent

Dimensionnement : Téléchargez les bonnes dimensions

Le téléchargement d'images surdimensionnées est l'une des erreurs les plus courantes. Une image de 4 000 × 4 000 px qui s'affiche à 800 × 800 px gaspille 96 % de ses pixels. Ceci est particulièrement coûteux pour visiteurs mobiles, qui utilisent souvent des connexions plus lentes et des écrans plus petits.

Chargement paresseux : charger des images à la demande

Le chargement paresseux retarde le chargement des images jusqu'à ce que l'utilisateur les fasse défiler. Cela réduit considérablement le poids initial de la page - un Page de collecte avec 40 produits ne charge que les 4 à 8 premières images à l'avance. Pour une analyse plus approfondie des stratégies de mise en œuvre, consultez notre Guide de chargement paresseux de 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="...">

Règle critique : Ne chargez jamais paresseusement votre image de héros ou vos images de produits au-dessus de la ligne de flottaison. Cela nuit à LCP car le navigateur retarde intentionnellement l'image la plus importante. Thunder gère cette distinction automatiquement.

Images réactives avec srcset

Les images réactives proposent différentes tailles pour différentes tailles d'écran. Un téléphone obtient une image de 400 pixels ; un bureau obtient 1200px. Cela permet d'économiser de la bande passante sur mobile.

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

Les thèmes Shopify les plus modernes incluent Prise en charge srcset Attributs . Vérifiez les sections d'image de votre thème pour vérifier.

Texte alternatif pour le référencement

Le texte alternatif sert à deux fins : l'accessibilité (lecteurs d'écran) et le référencement (Google Image Search). Un bon texte alternatif est descriptif, concis et naturel.

Dans Shopify, définissez le texte alternatif sur chaque image de produit dans l'éditeur de produit. Pour les images de thème, ajoutez du texte alternatif dans les paramètres de la section ou directement dans le modèle Liquid.

CDN d'images intégré de 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:

• Conversion WebP automatique — lorsque vous utilisez le image_url Filtre Filtre à liquide
• Redimensionnement à la volée — demandez des tailles spécifiques avec | image_url : largeur : 800 Filtre
• Mise en cache — les images sont mises en cache aux emplacements périphériques pour une livraison rapide

Vous n'avez pas besoin d'un CDN d'image ou d'un service d'optimisation distinct. Mais le CDN ne compresse pas vos originaux et ne gère pas le chargement paresseux – c'est votre responsabilité (ou celle de Thunder). Pour une présentation complète de chaque levier d'optimisation disponible, lisez notre guide complet d'optimisation de la vitesse Shopify.

Optimisation manuelle de l'image par rapport à Thunder

Foire aux questions