# WebP, PNG ou JPG : les formats modernes pour le web [Canonical HTML page](https://gradiently.design/fr/guide/webp-images) Votre site n’a pas à servir les mêmes fichiers que ceux que vous publiez sur Instagram. Le WebP et l’AVIF font le même travail que le PNG et le JPG en moins d’octets, à condition de bien les configurer. ## The short version - Le WebP est un format d’image qui peut être avec perte comme le JPG ou sans perte comme le PNG, et qui gère la transparence et l’animation. - À qualité visuelle comparable, les fichiers WebP sont en général nettement plus légers que leurs équivalents JPG et PNG. - Toutes les versions actuelles de Chrome, Safari, Firefox et Edge prennent en charge le WebP, donc une solution de repli n’est utile que pour de très vieux navigateurs. - L’AVIF compresse davantage que le WebP et est désormais largement pris en charge, mais son encodage est plus lent. - Gardez le PNG et le JPG pour les envois sur les réseaux sociaux et les fichiers que vous transmettez ; utilisez le WebP ou l’AVIF sur votre propre site. Dans le match **WebP ou PNG** et JPG, le WebP l’emporte sur votre propre site : il compresse comme un JPG ou sans perte comme un PNG, gère la transparence et produit des fichiers plus légers à qualité visuelle égale. Tous les navigateurs actuels le prennent en charge. Là où le PNG et le JPG gagnent encore, c’est partout ailleurs : envois sur Instagram et LinkedIn, pièces jointes, fichiers pour les clients et les imprimeurs. La règle pratique est donc simple. Créez et gardez vos originaux en PNG, servez du WebP (ou de l’AVIF) aux visiteurs. ## Qu’est-ce que le WebP Le WebP est un format d’image développé par Google et documenté sur [web.dev](https://web.dev/articles/serve-images-webp). Un seul format couvre ce qui en demandait trois : les photos avec perte comme le JPG, les graphismes sans perte avec transparence comme le PNG, et les courtes animations comme le GIF. Le gain vient d’une compression plus intelligente, qui prédit chaque bloc de pixels à partir de ses voisins et ne stocke que la différence. | Caractéristique | JPG | PNG | WebP | AVIF | | --- | --- | --- | --- | --- | | Avec perte | Oui | Non | Oui | Oui | | Sans perte | Non | Oui | Oui | Oui | | Transparence | Non | Oui | Oui | Oui | | Animation | Non | Limitée (APNG) | Oui | Oui | | Prise en charge navigateurs | Universelle | Universelle | Tous les navigateurs actuels | Tous les navigateurs actuels | | Accepté par les réseaux sociaux | Oui | Oui | De façon inégale | Rarement | Vérifiez la prise en charge actuelle sur [caniuse.com](https://caniuse.com/webp) si votre public utilise d’anciens appareils. ## WebP ou PNG pour les graphismes et la transparence Pour les logos, les images d’interface et les détourages, le WebP sans perte garde chaque pixel comme le PNG et pèse en général moins. Le WebP avec perte et transparence est le gain le plus important : un détourage de produit qui a besoin d’un bord doux et translucide peut ne peser qu’une fraction du PNG, sans différence visible. Les dégradés sont l’exception qui demande de l’attention. Un fondu sombre et lisse peut présenter des bandes en WebP avec perte, exactement comme en JPG. Si votre image d’en-tête est surtout un dégradé, comparez le mode avec perte à haute qualité au mode sans perte, et demandez-vous si ce doit être une image : un [dégradé CSS](https://gradiently.design/fr/guide/css-linear-gradient) ne coûte aucun téléchargement. - Marine sombre : tester sans perte: `linear-gradient(160deg, #0c1222 0%, #13294b 50%, #1e3a8a 100%)` - Rose pâle : avec perte, haute qualité: `radial-gradient(circle at 70% 30%, #f9a8d4 0%, #fbcfe8 35%, #fdf2f8 80%)` - Vif à trois arrêts : avec perte suffit: `linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%)` Les fondus sombres et subtils montrent la compression en premier ; les dégradés vifs et chargés la masquent. Choisissez les réglages WebP selon le contenu, pas par habitude. ## WebP ou JPG pour les photos Pour les photographies, un WebP avec perte à une qualité d’environ 75 à 80 équivaut en général à un JPG à 85 tout en étant plus léger. La différence s’additionne sur les pages riches en images : grilles de produits, portfolios, blogs. Sur une seule photo d’en-tête, le gain est réel mais moins spectaculaire, et les bonnes dimensions en pixels comptent davantage que le format. 1. **La taille d’abord** Exportez la photo à la plus grande taille à laquelle elle s’affiche réellement. Un [en-tête de site](https://gradiently.design/fr/guide/website-hero-background) en 1920×1080 n’a jamais besoin d’un original de 6000 pixels. 2. **Choisissez une qualité** Commencez en WebP avec perte à 80. Regardez la peau, les ciels et les coins sombres à 100 %, puis descendez jusqu’à ce que quelque chose change, et remontez d’un cran. 3. **Faites des versions plus petites** Exportez en 640, 1280 et 1920 pixels de large pour que les téléphones téléchargent la petite. 4. **Servez avec srcset** Laissez le navigateur choisir la bonne largeur avec `srcset` et `sizes`, comme dans le code ci-dessous. ## AVIF ou WebP L’AVIF est plus récent et compresse en général davantage que le WebP, surtout sur les photos et les tons lisses. Il est pris en charge par tous les grands navigateurs actuels. Ses inconvénients : un encodage plus lent, ce qui compte si vous convertissez les images à la volée, et moins d’outils capables de l’ouvrir. Beaucoup de sites servent l’AVIF d’abord, le WebP ensuite et le JPG en dernier, et laissent le navigateur prendre le premier qu’il comprend. ```html Evening light over the harbour ``` Le navigateur utilise la première `source` qu’il prend en charge et se rabat sur l’`img`. La largeur et la hauteur empêchent la mise en page de sauter pendant le chargement. Si vous utilisez un framework ou un CDN d’images, il fait peut-être tout cela automatiquement à partir d’un seul original importé. Vérifiez ce qu’il produit avant de convertir quoi que ce soit à la main. > **WebP animé et GIF** Le WebP animé est bien plus léger que le GIF et garde toutes les couleurs, il convient donc aux petits visuels en boucle sur une page. Pour tout ce qui dure plus de quelques secondes, une vidéo MP4 ou WebM muette est encore plus légère. [GIF ou MP4](https://gradiently.design/fr/guide/gif-vs-mp4) les compare en détail. ## Là où le PNG et le JPG gagnent encore ### Utiliser WebP ou AVIF - Les images de votre propre site - Les grilles de produits et les galeries - Les images de blog et d’articles - Les détourages transparents sur le web ### Utiliser PNG ou JPG - Les envois sur Instagram, LinkedIn, X et Facebook - Les images d’aperçu de lien Open Graph - Les fichiers envoyés par e-mail ou aux clients - Les originaux que vous retravaillerez Les réseaux sociaux convertissent eux-mêmes les fichiers importés, et certains refusent ou gèrent mal le WebP. Les robots d’aperçu de lien varient aussi, alors gardez votre [image Open Graph](https://gradiently.design/fr/guide/open-graph-image-size) en PNG ou JPG de 1200×630. Et un WebP envoyé à un client s’ouvre souvent dans la mauvaise application, ou pas du tout. Une image d’aperçu de lien large annonçant une collection de printemps sur un fond en dégradé Un aperçu de lien en 1200×630. Gardez celui-ci en PNG pour que le robot de chaque plateforme puisse le lire. ## Comment convertir un PNG en WebP L’outil gratuit en ligne de commande `cwebp` de Google convertit un fichier ou un dossier entier, et la plupart des éditeurs d’images et outils de création exportent désormais directement en WebP. ```bash # lossy, good for photos cwebp -q 80 photo.png -o photo.webp # lossless, good for logos and interface graphics cwebp -lossless logo.png -o logo.webp # a whole folder for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done ``` Gardez les originaux PNG. Reconvertir un WebP en PNG ne restaure pas les détails perdus à la compression avec perte. Vos fichiers de création originaux peuvent rester en PNG : Gradiently exporte les créations en PNG et JPG, qui sont les bonnes entrées pour cette étape et les bons fichiers pour chaque envoi sur les réseaux. Pour comprendre les réglages de qualité, lisez [compresser des images sans abîmer les dégradés](https://gradiently.design/fr/guide/image-compression) ; pour l’ancien duo, [PNG ou JPG](https://gradiently.design/fr/guide/png-vs-jpeg) ; et pour la liste complète côté vitesse, [optimiser les images pour le web](https://gradiently.design/fr/guide/lighthouse-image-performance). ## FAQ ### Le WebP est-il meilleur que le PNG ? Sur un site web, en général oui : le WebP sans perte garde les mêmes pixels dans un fichier plus léger et gère la transparence. Pour les envois sur les réseaux et les fichiers que vous transmettez, le PNG est plus sûr car il s’ouvre partout. ### Tous les navigateurs prennent-ils en charge le WebP ? Toutes les versions actuelles de Chrome, Safari, Firefox et Edge prennent en charge le WebP. Utilisez une balise `picture` avec un repli en JPG ou PNG si vous devez toucher de très vieux navigateurs. ### Faut-il utiliser l’AVIF ou le WebP ? L’AVIF est en général plus léger, le WebP s’encode plus vite et est pris en charge par plus d’outils. Servir l’AVIF d’abord avec un repli en WebP donne à la plupart des visiteurs le fichier le plus léger. ### Puis-je publier un WebP sur Instagram ? La prise en charge est inégale, alors publiez plutôt un PNG ou un JPG à la taille exacte, comme 1080×1350 pour une publication portrait. ### Le WebP gère-t-il la transparence ? Oui, en mode avec perte comme sans perte, ce qui en fait un bon remplaçant des PNG transparents sur le web.