PageSpeed Insights affiche la recommandation «Serve images in next-gen formats», mais les images de votre site sont encore en JPEG. Convertir l’ensemble en WebP est simple. La difficulté est ailleurs: un faible pourcentage de visiteurs utilisant des navigateurs plus anciens verra des images cassées si vous vous contentez de remplacer le format sur le serveur.

La tâche ne consiste donc pas à convertir, mais à effectuer une diffusion sélective: du WebP pour ceux qui le prennent en charge, et l’original pour tous les autres. Dans WordPress, cela se résout de trois manières différentes, chacune adaptée à une pile technique et à un budget spécifiques.

💡 Aperçu rapide:

• Comprendre ce qu’est le WebP et pourquoi il surpasse le JPEG
• Découvrir les deux approches pour servir du WebP
• Choisir l’une des trois méthodes selon votre pile technique et votre budget
• Configurer l’extension et vérifier le résultat dans Chrome DevTools

Qu’est-ce que le WebP et pourquoi vous en avez besoin

WebP est un format d’image développé par Google qui compresse mieux que le JPEG et le PNG à qualité visuelle équivalente. Une image de 100 Ko en WebP pèse entre 55 et 75 Ko. Aucune magie: simplement un algorithme de compression plus efficace.

Le format n’est pas nouveau. La spécification a été publiée par Google en 2010. Depuis, le WebP est passé du statut d’expérimentation à celui de standard: compression avec et sans perte, transparence, animation. Il combine en pratique les capacités du JPEG, du PNG et du GIF dans un seul conteneur.

Comparaison rapide avec les formats traditionnels:

La différence de poids est notable. Pour un site comportant cinquante images par page, passer au WebP réduit le poids total de manière significative. L’impact sur les Core Web Vitals et le classement dans les moteurs de recherche est direct.

Pourquoi vous ne pouvez pas simplement activer le WebP partout

La réponse tient à la compatibilité. Aujourd’hui, le WebP est pris en charge par plus de 96% des navigateurs: Chrome, Firefox, Safari (à partir d’iOS 14), Edge. Mais il subsiste un faible pourcentage d’anciens appareils qui ne comprennent pas ce format.

Si vous remplacez simplement tous les JPEG par du WebP sur le serveur, ces quelques pourcents de visiteurs verront des images cassées. Pour un site commercial ou une boutique en ligne, cette perte d’utilisateurs est inacceptable.

La tâche ne consiste donc pas à «convertir des images», mais à «servir du WebP à ceux qui le prennent en charge, et l’original à tous les autres».

Deux approches de base pour servir du WebP

Avant de passer aux méthodes pour WordPress, il est utile de comprendre comment le navigateur et le serveur négocient le format. Il n’existe que deux mécanismes.

Approche 1: la balise

Le navigateur se voit proposer un choix entre le WebP et l’original directement dans le balisage HTML:

1
<picture>
2
  <source srcset="img.webp" type="image/webp">
3
  <source srcset="img.jpg" type="image/jpeg">
4
  <img src="img.jpg" alt="Image description">
5
</picture>

Un navigateur prenant en charge le WebP utilisera la première balise <source>. Les autres ignoreront la source WebP et chargeront le JPEG depuis <img>.

Avantage: fonctionne sans configuration serveur et avec n’importe quel CDN. Inconvénient: ne fonctionne pas avec les images d’arrière-plan en CSS et modifie la structure HTML. Certaines extensions de cache et de lazy loading trébuchent sur <picture>.

Approche 2: la réponse variée

Dans le HTML, on conserve une balise <img src="img.jpg"> classique, mais le serveur renvoie un contenu différent pour la même URL: un fichier WebP aux navigateurs qui le prennent en charge, l’original à tous les autres.

La clé du mécanisme est l’en-tête HTTP Accept. Le navigateur l’envoie à chaque requête, le serveur ou le CDN décide quoi retourner.

Avantage: fonctionne partout, y compris pour les images d’arrière-plan en CSS. Le HTML ne change pas. Inconvénient: nécessite une configuration serveur, et tous les CDN ne prennent pas correctement en compte Accept dans la clé de cache.

Comparons:

Voyons maintenant comment ces approches sont appliquées dans WordPress.

Méthode 1: CDN avec conversion WebP à la volée

La voie la plus simple. Vous connectez un CDN qui optimise les images à la volée et sert du WebP aux navigateurs compatibles. Les copies converties ne sont pas stockées sur votre serveur, ce qui économise de l’espace disque.

Plusieurs options fonctionnelles:

• BunnyCDN avec Bunny Optimizer, compresse et convertit les images à la volée, prend en charge le WebP dans la clé de cache. À partir de 0,01 $/Go.
• Cloudflare avec Polish (offre Pro, 20 $/mois), compression et conversion automatiques en WebP.
• Cloudinary, un service spécialisé dans le traitement d’images, WebP inclus par défaut.
• ShortPixel Adaptive Images, une extension WordPress qui s’appuie sur le CDN bunny.net. Convertit et sert les images en WebP automatiquement. Offre gratuite: 500 Mo de trafic par mois.
• WP Compress, un service hybride: optimisation des images et diffusion via leur propre CDN.

Quand choisir la méthode 1: si vous êtes prêt à payer pour un CDN et que vous ne voulez pas vous embêter avec la configuration du serveur. Vous le connectez, vous activez l’optimisation, et ça fonctionne.

Méthode 2: réponse variée + CDN

Une méthode pour ceux qui préfèrent résoudre le problème au niveau du serveur sans modifier le balisage HTML.

Le principe: vous configurez le serveur pour qu’à une même URL il renvoie du WebP ou du JPEG/PNG selon l’en-tête Accept. Toutes les URL des images dans le code restent inchangées.

Mise en place via WebP Express

La façon la plus simple d’implémenter la réponse variée dans WordPress est le plugin WebP Express. Le plugin compte plus de 400 000 installations actives, des mises à jour régulières et un support actif de son auteur. Il fait trois choses:

• Convertit les images téléchargées en WebP.
• Écrit les règles de redirection (.htaccess pour Apache/LiteSpeed ou règles Nginx).
• Lors de la demande d’une image, vérifie l’en-tête Accept et renvoie le format approprié.

Après l’installation, il suffit de cliquer sur «Save settings and force new.htaccess rules». Le plugin configurera lui-même le convertisseur et les règles.

Pour les serveurs Nginx

WebP Express génère des règles pour .htaccess (Apache/LiteSpeed/OpenLiteSpeed). Si vous utilisez Nginx, vous devez écrire manuellement les règles dans la configuration:

1
## --- Nginx rules: try WebP first, fallback to converter
2
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
3
  add_header Vary Accept;
4
  expires 365d;
5
  if ($http_accept !~* "webp") {
6
    break;
7
  }
8
  try_files
9
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
10
    $uri.webp
11
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=$request_filename&wp-content=wp-content
12
    ;
13
}
14
 
15
## --- Route missing .webp requests to the realizer
16
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
17
    try_files
18
      $uri
19
      /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
20
      ;
21
}
22
## --- End WebP Express rules

Ce que font les règles: ajouter l’en-tête Vary: Accept (pour que le CDN ne mette pas en cache le WebP pour tout le monde), essayer de servir le .webp prêt, et s’il n’existe pas, transmettre la demande au convertisseur.

Point critique: choisir le CDN pour la méthode 2

L’erreur qui ruine toute la méthode: le CDN met en cache le WebP et le sert aux navigateurs qui ne prennent pas en charge ce format. Cela se produit lorsque le CDN ne prend pas en compte l’en-tête Accept dans la clé de cache.

Les fournisseurs qui fonctionnent correctement avec Vary: Accept:

Bunny CDN, la prise en charge de la réponse variée s’active dans les paramètres de la zone.

• KeyCDN, prend également en charge le WebP dans la clé de cache. S’active dans les paramètres de la zone, section Cache.

• Google CDN, prend en compte Vary: Accept par défaut.

Sur l’offre gratuite de Cloudflare, la prise en compte complète de Accept dans la clé de cache n’est pas disponible. Résultat: le WebP peut être servi là où il n’est pas supporté. Deux solutions: passer à l’offre Pro (20 $/mois) ou utiliser un CDN capable de gérer Vary: Accept nativement (BunnyCDN ou KeyCDN).

Combinaison WebP Express + CDN chez les hébergeurs courants

Le schéma est le même pour tous: installez WebP Express, puis agissez en fonction de l’environnement serveur:

• Kinsta / WP Engine, contactez le support. Les ingénieurs ajouteront la configuration Nginx pour WebP Express et activeront la bonne clé de cache WebP dans leur CDN (KeyCDN chez Kinsta).
• Cloudways, un hybride Apache+Nginx. WebP Express avec la sauvegarde du .htaccess suffit généralement. Les règles sont reprises automatiquement.
• SiteGround, demandez au support d’ajouter les règles Nginx et utilisez un CDN compatible.
• LiteSpeed / OpenLiteSpeed / Apache, seulement WebP Express et les règles .htaccess. Choisissez un CDN avec prise en charge de Vary: Accept.
• VPS propre avec Nginx (LEMP), ajoutez manuellement les règles Nginx ci-dessus et connectez un CDN avec prise en charge de Vary: Accept.

Quand choisir la méthode 2: si vous ne voulez fondamentalement pas modifier le balisage HTML, que vous avez des images d’arrière-plan en CSS et que vous êtes prêt à configurer le serveur une fois pour toutes.

Méthode 3: via la balise

Une option de repli quand les deux premières ne conviennent pas. Ne nécessite pas de configuration serveur, fonctionne avec n’importe quel CDN. Le plugin remplace les balises <img> standard par une construction <picture>, et le navigateur choisit lui-même le format.

Inconvénients de la méthode:

• Ne fonctionne pas avec les images d’arrière-plan.
• Peut entrer en conflit avec les thèmes et les plugins de cache qui modifient la sortie des <img>.
• Modifie la structure HTML, ce qui peut casser certains plugins de lazy loading.

Mise en place via WebP Express

Le même WebP Express peut fonctionner en mode <picture>. Dans les paramètres, sélectionnez le mode «CDN friendly» et activez l’option «Alter HTML». Le plugin enveloppera à la volée toutes les balises <img> dans une balise <picture> avec une source WebP.

Quand choisir la méthode 3: si vous n’avez pas accès à la configuration du serveur et que le CDN ne prend pas en charge Vary: Accept. Par exemple, un hébergement économique avec des limitations strictes ou Cloudflare en version gratuite.

Vidéo: le WebP dans WordPress en 10 minutes

Si vous préférez regarder plutôt que lire, voici un tutoriel visuel sur la mise en place du WebP via WebP Express:

La vidéo montre l’intégralité de la configuration de WebP Express, de l’installation à la vérification dans Chrome DevTools. La conversion vers AVIF est également abordée, comme étape suivante après le WebP.

⁉️🤔 Foire aux questions

Le WebP réduit-il toujours la taille?

Pas toujours, mais dans la plupart des cas. Pour les photos et les captures d’écran, le gain est de 25 à 50%, selon les développeurs de Google. Pour les images contenant du texte ou des aplats de couleur, le WebP peut même s’avérer plus lourd que le PNG-8. Pour les images de contenu, le WebP apporte presque toujours un avantage. Pour les icônes et les graphiques simples, le SVG ou un PNG optimisé restent plus pertinents. Des plugins comme WebP Express convertissent tout, le résultat dépend du format source.

Peut-on utiliser le WebP sans plugin sur WordPress?

À partir de WordPress 5.8, oui. Le cœur accepte les fichiers .webp lors du téléversement dans la médiathèque. En revanche, il n’y a ni conversion automatique des anciennes images, ni substitution de format pour le navigateur. Si vous ne téléversez que de nouvelles images en WebP et que l’absence de solution de repli pour un faible pourcentage de vieux navigateurs vous convient, les plugins ne sont pas obligatoires. Pour une mise en œuvre complète sur un site existant, vous ne pouvez pas vous passer d’un plugin: vous avez besoin d’une conversion par lots et d’un mécanisme de substitution de format.

Comment vérifier que le WebP est bien servi?

Ouvrez le site dans Chrome, appuyez sur F12, onglet Réseau, filtrez par Img. Dans la colonne Type, vous devez voir webp. Autre possibilité: dans la réponse du serveur, cherchez l’en-tête X-WebP-Express (si vous utilisez WebP Express) ou content-type: image/webp. Les outils de développement de Chrome restent le moyen le plus fiable: filtrez par images et regardez la colonne Type. Si elle indique webp, tout fonctionne.

Que faire si le CDN met en cache le WebP de manière incorrecte?

Symptôme: certains utilisateurs voient des images cassées, alors que tout est activé dans les paramètres. Solution: assurez-vous que le CDN prend en compte les en-têtes Accept et Vary dans la clé de cache. Dans les panneaux de configuration de BunnyCDN et KeyCDN, des options explicites existent pour cela. Si l’en-tête Accept est absent de la clé de cache, la première requête provenant de Chrome crée une copie WebP, et tous les utilisateurs suivants, y compris ceux sous Safari sans prise en charge du WebP, reçoivent exactement cette copie. Sur Cloudflare, il n’existe pas de solution gratuite, c’est soit l’offre Pro, soit changer de CDN.

WebP ou AVIF, que choisir en 2026?

L’AVIF offre une compression encore meilleure (20 à 30% plus léger que le WebP à qualité égale), mais la prise en charge par les navigateurs reste à la traîne: environ 92% contre 96% pour le WebP. En 2026, le WebP demeure le standard de fait pour le web. L’AVIF rattrape son retard, mais l’écart de prise en charge par les navigateurs reste critique pour les projets commerciaux. Une stratégie pragmatique: le WebP maintenant, l’AVIF quand la prise en charge dépassera les 95%.

Quelle méthode choisir pour votre besoin: le récapitulatif final

Le choix de la méthode ne dépend pas de celle qui est «meilleure dans l’absolu», mais de votre stack spécifique et de votre disposition à investir du temps ou de l’argent:

• Vous êtes prêt à payer pour un CDN et à ne pas toucher au serveur, méthode 1 avec BunnyCDN (à partir de 0,01 $/Go) ou Cloudflare Pro (20 $/mois). Configurez-la en cinq minutes et oubliez-la.
• Vous avez accès au serveur et souhaitez régler le problème une fois pour toutes, méthode 2 avec WebP Express et un CDN prenant en charge Vary: Accept. Fonctionne avec les images d’arrière-plan, ne modifie pas le HTML.
• Vous n’avez pas accès au serveur et votre budget est limité, méthode 3 avec WebP Express en mode <picture>. Pas idéal, mais mieux que pas de WebP du tout.

Testez la méthode choisie sur un environnement de préproduction. Vérifiez les en-têtes de réponse et la colonne Type dans les outils de développement de Chrome. Assurez-vous que les vieux navigateurs reçoivent bien du JPEG, et non des liens brisés. Et seulement ensuite, déployez en production.

Essayez WebP Express, ce plugin couvre les deux méthodes côté serveur sans configuration supplémentaire et il est gratuit. Indiquez dans les commentaires quelle approche vous avez choisie et les difficultés que vous avez rencontrées.