WebP
WebP est le format d'image de Google offrant une compression avec/sans perte réduisant le poids de 25-34% par rapport au JPEG et PNG.
Qu’est-ce que le WebP ?
WebP est un format d’image moderne développé par Google qui prend en charge à la fois la compression avec et sans perte dans un seul type de fichier (.webp). Il gère également la transparence (canal alpha) et les animations, lui permettant de remplacer le JPEG, le PNG et le GIF. À qualité visuelle comparable, les fichiers WebP sont généralement 25 à 34 % plus petits que les fichiers JPEG et environ 26 % plus petits que les fichiers PNG.
Pourquoi le WebP est-il important ?
Les images constituent souvent la majeure partie du poids total d’une page produit, et les images lourdes sont l’une des causes les plus courantes de lenteur de chargement. Des fichiers plus petits se traduisent par des pages plus rapides, de meilleurs Core Web Vitals et une consommation de données réduite sur mobile — autant d’éléments qui affectent directement la conversion et le positionnement dans les moteurs de recherche. WebP offre ce gain sans perte visuelle de qualité, et le format est aujourd’hui pris en charge par tous les navigateurs modernes (Chrome, Firefox, Edge et Safari).
Cas d’utilisation courants
- Photos de produits haute résolution où les fichiers JPEG deviennent trop lourds pour un affichage mobile rapide.
- Graphiques avec transparence qui nécessiteraient autrement des fichiers PNG volumineux (logos, badges, icônes).
- Bannières et images de style de vie (lifestyle) en haut de page qui affectent le LCP et la stabilité de la mise en page (CLS).
- Distribution via CDN, où le format est négocié par navigateur pour économiser de la bande passante.
Perspective Shopify
Vous n’avez pas besoin de convertir vous-même vos images au format WebP dans Shopify. Le CDN d’images de Shopify sert automatiquement du WebP — ou le format encore plus petit AVIF — aux navigateurs qui le prennent en charge, sur la base de l’en-tête Accept, que vous importiez du JPEG ou du PNG. Si vous souhaitez contrôler manuellement le format dans votre thème, vous pouvez transmettre le paramètre format au filtre image_url. En pratique, concentrez-vous sur l’importation d’images sources nettes aux dimensions correctes et remplissez toujours le texte alternatif (alt text), puis laissez le CDN s’occuper du reste.