WebP, JPEG ou PNG : lequel choisir pour Shopify
La règle tient en une phrase, mais elle a une exception qui compte plus que la règle.
Un format d'image n'est pas une préférence, c'est un compromis entre trois choses : la finesse des dégradés, la gestion de la transparence, et le poids du fichier. Chacun des trois formats sacrifie une de ces dimensions.
| Format | Transparence | Poids relatif | Quand l'utiliser |
|---|---|---|---|
| JPEG | Non | Moyen | Photos sans fond détouré |
| PNG | Oui | Lourd | Logos, captures, aplats de couleur |
| WebP | Oui | Léger | À peu près tout le reste |
La règle
WebP par défaut. À qualité perçue équivalente, il pèse généralement autour de 25 à 35 pour cent de moins qu'un JPEG, et bien davantage face à un PNG photographique. Il gère la transparence, ce que le JPEG ne sait pas faire.
L'exception qui compte
Le PNG reste supérieur pour tout ce qui contient du texte fin, des lignes nettes ou des aplats : un logo, un tableau de tailles, une capture d'écran, un schéma technique.
Sur ce type d'image, la compression avec perte crée un halo autour des contours. Sur un tableau de tailles, ça rend les chiffres difficiles à lire, et c'est exactement l'image que l'acheteur agrandit avant de commander.
Convertir un tableau de tailles en WebP agressif économise quelques dizaines de kilo-octets et coûte une commande.
Ce que Shopify fait tout seul
Le CDN Shopify sert déjà du WebP aux navigateurs qui l'acceptent, par négociation de contenu : le navigateur annonce les formats qu'il sait lire, et la même adresse, même terminée par .jpg, lui renvoie alors un format moderne. Ça se fait sans que vous ayez rien réglé.
Vérifiez-le avant de croire une app qui vous vend la conversion WebP comme sa fonction principale. L'adresse de l'image ne vous le dira pas : elle garde l'extension de votre fichier d'origine. Ouvrez plutôt une fiche produit, appuyez sur F12 (Cmd + Option + I sur Mac), choisissez l'onglet Réseau, rechargez la page et lisez la colonne Type en face de vos photos. Si elle indique webp ou avif, c'est déjà en place, et vous n'avez pas à payer pour ça.
Ce que le CDN ne fait pas
Le CDN ne touche pas au fichier source de votre bibliothèque. Il fabrique des variantes à la volée à partir de votre original, qui reste exactement tel que vous l'avez téléversé.
Ce fichier n'est pas un détail d'archivage. C'est lui qui pèse dans votre administration, dans vos exports, dans une migration de boutique, et c'est de lui que part chaque variante servie. Un master de 9 Mo mal encodé reste un master de 9 Mo mal encodé, et le CDN en tire des variantes qui héritent de ses défauts.
Le CDN part toujours de votre fichier. Il peut le réduire, il ne peut pas le réparer.
Et surtout, il ne prend jamais la décision de format. Il ne sait pas que le tableau de tailles de la section précédente doit rester net alors que la photo d'ambiance à côté peut être compressée franchement. Ce tri-là est le vôtre, et c'est le seul endroit de cette page où un outil change réellement quelque chose.
Mesurez vos propres images
L'audit gratuit lit votre boutique et vous donne le poids réel de vos images produits, sans installation.
À lire ensuite
- Quelle taille donner aux images produits ShopifyShopify redimensionne vos images, mais seulement à partir du fichier téléversé. La dimension à viser, et pourquoi téléverser plus grand ne sert à rien.
- Le nom de vos fichiers images produits ShopifyShopify ne permet pas de renommer une image déjà téléversée, et une image renommée ne reçoit aucune redirection. Ce qui vaut la peine d’être corrigé.
- Texte alternatif (balise alt) : traiter tout un catalogue ShopifyNeuf cents photos, neuf cents textes alternatifs. L'ordre qui rapporte le plus vite, un modèle par type de photo, et les pièges propres aux catalogues.