WebP, PNG ou JPG : les formats modernes pour le web

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

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 ne coûte aucun téléchargement.

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. 1

   La taille d’abord

   Exportez la photo à la plus grande taille à laquelle elle s’affiche réellement. Un en-tête de site en 1920×1080 n’a jamais besoin d’un original de 6000 pixels.

2. 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. 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. 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.

<picture>
  <source type="image/avif" srcset="hero-1280.avif 1280w, hero-1920.avif 1920w" sizes="100vw">
  <source type="image/webp" srcset="hero-1280.webp 1280w, hero-1920.webp 1920w" sizes="100vw">
  <img src="hero-1920.jpg" alt="Evening light over the harbour" width="1920" height="1080" fetchpriority="high">
</picture>

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.

Là où le PNG et le JPG gagnent encore

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 en PNG ou JPG de 1200×630. Et un WebP envoyé à un client s’ouvre souvent dans la mauvaise application, ou pas du tout.

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.

# 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

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 ; pour l’ancien duo, PNG ou JPG ; et pour la liste complète côté vitesse, optimiser les images pour le web.