Compression d’images WordPress : bonnes pratiques et limites

Compresser les images, c’est réduire leur poids pour accélérer l’affichage de ton site. Il n’est pas toujours nécessaire d’utiliser un plugin pour passer d’une image brute non optimisée à une image optimisée. Beaucoup de tutoriels mettent en avant des extensions de compression d’images… mais sans toujours mentionner leurs limites : quotas mensuels, coûts cachés, ou fonctionnalités restreintes dans la version gratuite.

Ce billet te guide pas à pas pour :

• comprendre les avantages et les limites réelles des principaux plugins,
• savoir dans quels cas ils sont vraiment utiles,
• découvrir des méthodes alternatives pour optimiser tes images sans plugin ou gratuitement en local, de manière durable et professionnelle.

L’objectif est de t’aider à faire les bons choix techniques selon le contexte (blog personnel, site client, projet pro) et à gagner en autonomie dans la gestion des performances de ton site WordPress.

Pourquoi compresser les images pour le Web ?

La compression des images sur WordPress allège tes pages, améliore leur vitesse d’affichage et renforce à la fois l’expérience utilisateur et le référencement naturel.

• Réduction du poids : temps de chargement + rapide
• Moins de requêtes et bande passante économisée
• Amélioration du SEO et de l’expérience utilisateur
• Réduction des émissions carbone du site

Première précaution : surtout ne pas utiliser l’outil de redimensionnement intégré de WordPress

Bien que WordPress propose un outil de redimensionnement accessible depuis la bibliothèque de médias, son usage n’est pas recommandé pour optimiser les performances.

Une fois l’image téléchargée dans la médiathèque, cliquez dessus pour accéder au mode édition.
En haut de la page, tu trouveras une option « Redimensionner ».
Saisissez les dimensions souhaitées, puis enregistrez les modifications. Cela permet de réduire manuellement la taille d’une image sans avoir recours à des plugins externes.

Les limites des plugins WordPress de compression automatique : quelques manipulations plus tard, il te faudra payer

Des plugins comme Imagify, Smush, EWWW, ou ShortPixel sont populaires mais présentent plusieurs limites :

• Quotas mensuels (ex. : 20 à 200 images/mois en gratuit)
• Compression parfois agressive ou redondante
• Pas ou peu de support pour AVIF ou JPEG XL
• Peu d’options avancées de traitement batch
• En environnement local (LocalWP) : ne fonctionnent souvent pas correctement en mode « localhost » à cause de NGINX ou du mode Router utilisé : l’URL localhost empêche les API distantes de fonctionner.

Le cas des plugins spécifiques pour le format WebP où la version gratuite ne gère pas le format AVIF

Un plugin comme WebP Express peut convertir les images JPEG/PNG en WebP dès qu’un utilisateur les demande (à la volée) ou en avance (pré-conversion en masse).

Le plugin utilise des règles .htaccess (Apache) ou une redirection PHP pour remplacer automatiquement l’image demandée par sa version .webp si le navigateur la supporte.

Sinon, il renvoie le JPEG ou PNG d’origine.

Cela n’a aucun impact sur les contenus :

• Dans les articles, tu continues à insérer des <img src="image.jpg"> mais WebP Express intercepte la requête et délivre image.webp si possible.
• Cela évite de modifier manuellement tes pages ou d’utiliser des balises <picture>.

Par exemple un navigateur moderne comme Chrome demande une ressource :

GET /wp-content/uploads/photo.jpg
Accept: image/webp

WebP Express renvoie

200 OK
Content-Type: image/webp
File: photo.webp

Un navigateur ancien demande :

GET /wp-content/uploads/photo.jpg
Accept: image/jpeg

WebP Express laisse passer l’image originale JPEG.

L’erreur classique du débutant : l’import direct en webp ou avif

Beaucoup de nouveaux utilisateurs, à juste titre séduits par les avantages de compression offerts par les formats WebP ou AVIF, ont tendance à importer directement ces images dans WordPress.

Cependant, cette pratique peut entraîner des problèmes majeurs, notamment au niveau de la génération des vignettes et des déclinaisons de tailles d’image.

En effet, bien que WordPress supporte officiellement le WebP depuis 2021, certaines configurations serveur (en particulier celles utilisant les bibliothèques GD ou Imagick) peuvent rencontrer des difficultés à traiter ces formats pour créer les miniatures nécessaires à l’affichage responsive ou aux fonctionnalités natives comme les blocs « Couverture » ou « Galerie ».

Le risque est alors de voir apparaître des erreurs, des images manquantes ou une incompatibilité avec certains plugins. La bonne approche consiste donc à importer ses images en format classique (JPG ou PNG), puis à utiliser un plugin fiable pour convertir automatiquement les fichiers en WebP ou AVIF après leur upload, tout en conservant une version compatible côté serveur.

D’ailleurs, demain de nouveaux formats vont apparaître, ce qui offrirea encore davantage de performance et d’efficacité. Dans ce contexte, se reposer sur des standards éprouvés comme le JPG (pour les photos) et le PNG (pour les graphismes avec transparence) reste une garantie de stabilité et de compatibilité à long terme. En effet, certains fichiers récupérés au format AVIF ou WebP peuvent parfois ne pas s’ouvrir correctement selon les outils utilisés, les navigateurs, voire même certains CMS ou plugins non mis à jour. Ces formats restent donc dépendants de leur niveau d’adoption générale, tandis que le JPG continue de faire figure de référence universelle dans le traitement d’image.

Recommandation pro : toujours compresser en amont, avant l’import dans WordPress

Les formats WebP, AVIF et XJPEG permettent de réduire le poids d’une image cependant il ne compensent pas une mauvaise préparation en amont.

WordPress peut stocker plusieurs versions d’une même image (JPEG, WebP, AVIF si activé), selon les formats générés.

Lors du chargement d’une page, le navigateur choisit automatiquement le format qu’il supporte, grâce à la balise <picture> ou à des plugins.
C’est pourquoi il est essentiel de préparer l’image source (bonne taille, compression) avant conversion : sinon, tu ne fait que diffuser une image lourde dans un format plus moderne.

Outils logiciels (offline, sans quota) :

• ILove Img « Redimensionner une image » et ensuite Tinyjpg
• Squoosh.app (Google) : rapide, open source, supporte AVIF/WebP, réglages fins
• XnConvert (multi-plateforme) : traitement batch + qualité pro
• ImageOptim (Mac) / RIOT (Windows) : classiques du milieu

Formats modernes :

• WebP : bien supporté par WP depuis 5.8
• AVIF : meilleur taux de compression, mais support partiel
• JPEG XL (JXL) : format prometteur, encore peu pris en charge

Astuce :

Tu peux préparer tes images dans Photoshop ou Illustrator.

Exportation optimale

• SRVB : Le sRGB est l’espace colorimétrique standard utilisé par tous les navigateurs web, écrans et CMS. Cela assure une cohérence des couleurs quel que soit l’appareil ou le navigateur.
• Progressif : Un JPEG progressif se charge en plusieurs passes du flou au net, ce qui améliore la perception de rapidité du chargement.
• Metadonnées sans : Supprime les données inutiles (EXIF : modèle d’appareil photo, date, GPS…). Allège le poids du fichier sans altérer le visuel.
• Qualité 50-60 : À 50-60 %, la perte de qualité est quasi invisible à l’œil nu, le poids diminue drastiquement.

Les risques à importer directement en WebP

Si tu importes directement une image en WebP :

• tu perds parfois l’original haute qualité,
• tu ne peux plus générer les déclinaisons multiples (miniature, medium, retina) avec un bon rendu.

Il vaut mieux importer dans WordPress des images en JPG ou PNG, pas en webp ni en AVIF !

WordPress accepte nativement JPG, PNG, GIF.

Le support natif de WebP est encore partiel (amélioré depuis WP 5.8, mais pas toujours bien géré selon thèmes, plugins, ou éditeurs).

Certains plugins ne prévisualisent pas correctement les WebP.

Les plugins comme CompressX, WebP Express, EWWW Image Optimizer prennent en charge :

• la génération de formats modernes (WebP, AVIF…),
• le fallback automatique vers JPEG/PNG si le navigateur ne les supporte pas.

Cela préserve la compatibilité multi-navigateur tout en servant des images légères.

Les images au format WebP ne sont pas toujours facilement rééditables

Photoshop n’importe pas toujours les fichiers WebP en double-cliquant dessus depuis l’explorateur.

Il faut parfois utiliser le menu :

• Fichier > Placer un lien incorporé… ou Fichier > Scripts > Image Processor .

Le format WebP gère moins bien les profils ICC , les métadonnées EXIF/IPTC , ou les canaux alpha complexes que le PNG ou le TIFF. Cela peut poser problème dans des environnements de travail exigeant une gestion précise du flux de production.

Par défaut, le WebP utilise souvent une compression avec perte (lossy ), ce qui modifie les pixels de l’image pour réduire sa taille. Si tu ré-édites et ré-enregistres plusieurs fois une image WebP, cela peut entraîner une dégradation progressive de la qualité (phénomène similaire au JPG).

Garde toujours une version source éditable (en JPG, PNG ou PSD) avant d’exporter ton image finale en WebP.
Ainsi, tu prévois les retouches futures, tu restes compatible avec tous les outils, et tu profites pleinement du WebP pour la diffusion web.

La taille de l’image : savoir regénérer les tailles d’images

Lorsque tu changes de format ou de réglage d’image (ex. : passage en WebP, ajout de tailles personnalisées, ou changement de thème), il est souvent nécessaire de régénérer les miniatures pour que le site affiche les bonnes versions.

Plugins recommandés (et complémentaires) :

• Enable Media Replace : permet de remplacer un fichier image déjà présent dans la médiathèque, sans changer son URL.
• Force Regenerated thumbnails : régénère toutes les tailles d’image automatiquement générées par WordPress (miniature, moyenne, grande, tailles définies par le thème ou les plugins).

Utilisés ensemble, ils permettent de mettre à jour une image et de recréer toutes ses déclinaisons. Pratique après une compression ou une retouche !

Bon à savoir :

WordPress crée automatiquement plusieurs versions de chaque image téléversée (ex. : 150×150, 300×300, etc.), selon les réglages du thème.

Les plugins de compression payants comme Imagify consomment des crédits à chaque régénération d’image . Il peut être utile de désactiver la régénération automatique dans ce cas.

Pour les développeurs : régénérer sans plugin avec WP-CLI

wp media regenerate --yes

Retour d’expérience avec les outils WPvivid et CompressX

Certaines extensions comme WPVivid ou CompressX proposent des outils de compression et d’optimisation directement intégrés à WordPress.
Elles peuvent constituer une alternative intéressante aux plugins classiques comme Imagify ou Smush.

WPvivid est avant tout un outil de sauvegarde. Il intègre également une fonction d’optimisation d’images.
Cependant, il est préférable de vérifier régulièrement l’état du plugin, car certaines optimisations peuvent ne pas être conservées ou être écrasées lors des sauvegardes ou restaurations effectuées avec WPvivid.

Le même éditeur a également lancé CompressX, un outil spécialisé dans l’optimisation d’images qui se distingue par sa prise en charge des formats modernes comme AVIF ou X-JPEG, souvent ignorés ou mal pris en charge par les plugins plus anciens.

L’offre pro intègre un support et mise à jour à vie compressx.io/pricing

Il est désormais essentiel de vérifier la compatibilité des plugins d’optimisation d’image avec les formats modernes, en particulier X-JPEG (ou JPEG XL), avant d’investir dans une solution premium.

En attendant une prise en charge plus large de ces formats, des outils comme CompressX ou WPvivid restent de très bonnes options pour des sites riches en médias, offrant un bon compromis entre optimisation, sécurité et contrôle.

Quel redimensionnement utiliser ?

Il est inutile de charger une image de 3000 px si elle n’est affichée qu’en 600 px sur le site ! Tu dois toujours partir de l’usage final pour adapter la largeur.

Voici des largeurs conseillées :

• Image plein écran : 1920px (pour la majorité des utilisateurs) à 2560px selon la taille des écrans (anticiper les écrans futurproof écrans plus haut de gammes : 3400px écrans 4K)
• Image dans le contenu (article, galerie) 1200px sauf pour une lightbox ou image zoomée
• Miniature / vignette : 300 à 600px
• Logo, icône, avatar : 150px à 300px

Attention aux plugins destructifs

Avant d’activer un plugin de compression d’images, assure-toi qu’il propose une option pour conserver les originaux.

En cas de compression destructive, toute tentative de relecture HD ou de réutilisation pour l’impression sera impossible.

Le plugin Converter for Media, bien qu’efficace pour la conversion massive des images en WebP, peut s’avérer trop intrusif dans certains contextes.
En version gratuite, il convertit les fichiers originaux JPEG/PNG en WebP et supprime parfois les originaux, ce qui peut poser problème si :

• tu souhaites conserver les fichiers sources pour d’autres usages (print, redimensionnement, etc.) ;
• tu changes de thème ou de plugin de gestion d’image ;
• tu désactives ultérieurement le plugin, ce qui peut générer des liens brisés si les fichiers originaux ne sont plus présents.

De plus, la conversion AVIF est réservée à la version Pro, ce qui limite les capacités d’optimisation en environnement gratuit.

Il est recommandé de faire une sauvegarde complète avant utilisation, et de préférer une solution réversible ou non destructive si l’objectif est de garder un certain contrôle sur la bibliothèque média.

Les 3 niveaux de compression d’image avancée expliqués

Les outils de compression d’images proposent 3 types de compression :

Niveau de compression	Type	Cas d’utilisation
Lossless (sans perte réduction de poids modeste (5–20 %)	compression réversible, aucune donnée supprimée, l’image reste exactement identique à l’originale.	Idéal pour les logos, pictogrammes, schémas vectoriels ou toute image devant rester pixel-perfect.
Lossy (avec perte poids très réduit (30–90 %)	compression destructive : certaines données visuelles sont supprimées pour réduire le poids.	Parfait pour les photos non critiques, galeries à fort volume, ou visuels en lazy loading où le rendu exact n’est pas prioritaire.
Glossy (équilibre entre qualité et poids)	mélange visuel optimisé proche de Lossless, mais avec une compression plus efficace.	Idéal pour des photographies de blog, pages d’accueil, ou portfolio, où l’on cherche un bon rendu visuel sans trop alourdir le chargement. Attention, des artefacts peuvent apparaître.

Comment vérifier dans les Devtools l’image réellement servie (format, poids)

Pour voir si une image WebP est bien convertie dynamiquement depuis un JPEG, comparez son nom (par ex. image.jpg) et son Content-Type : image/webp.

Utilisez aussi l’onglet « Preview » pour visualiser l’image servie et vérifier sa qualité.

Étapes à suivre :

1. Ouvrez les DevTools :
   • Clic droit sur la page > « Inspecter »
   • ou touche F12
   • ou Ctrl + Shift + I (Windows/Linux) / Cmd + Option + I (Mac)
2. Allez dans l’onglet « Network » (Réseau)
3. Cochez l’option « Img » pour filtrer uniquement les requêtes images
4. Rechargez la page (F5) pour que toutes les images soient listées
5. Repérez votre image dans la liste :
   • Colonne « Name » : nom du fichier ou URL (souvent /uploads/...)
   • Colonne « Type » ou « Mime Type » : indique le format (ex. image/webp, image/avif, image/jpeg)
   • Colonne « Size » ou « Transferred » : indique le poids réel téléchargé par le navigateur (en Ko)
6. Cliquez sur une image → dans le panneau de droite (ou bas), l’onglet « Headers » te donne :
   • Content-Type : le format exact servi
   • Content-Length : taille brute en octets

Comment éviter les pertes visuelles pour les yeux ?

Éviter une compression trop forte (qualité < 60 % sur JPEG)

Toujours comparer avant/après sur des détails fins (yeux, texte, dégradés).

Il est aussi déconseillé d’empiler plusieurs plugins de compression. Cela peut dégrader la qualité de l’image de manière irréversible.

L’optimisation des images intégrées au plugin de cache ou de performance

Certains plugins optimisent le chargement, l’ordre d’affichage, le lazy loading, mais ne compressent pas les images en profondeur.

Les plugins de compression d’images pour leur part optimisent le poids réel des fichiers (JPEG, PNG, WebP…). Ils les convertissent en formats modernes et peuvent réécrire les URLs.

Il est recommandé d’utiliser des combos, des combinaisons de plugins selon votre cas :

Objectif	Plugins recommandés
Gagner en vitesse sans casser le thème	Autoptimize + WebP Express
Optimiser tout (code, images, cache)	WP Rocket + ShortPixel / Imagify
100 % gratuit	Autoptimize + Imsanity + Squoosh / WP-CLI local

Que faire si on veut automatiser en production (sans quotas) en niveau avancé ?

• Installer WP CLI + scripts de compression via ligne de commande
• Coupler WordPress à un CDN (Cloudflare, BunnyCDN) qui convertit automatiquement en AVIF/WebP
• Passer par des outils Node.js ou PHP personnalisés (ImageMagick, Sharp)

Compression avec WP-CLI

Tu dois avoir WP-CLI installé sur ta machine locale (LocalWP ou Wamp/Herd/Valet + PHP/Composer dans le PATH)

Navigue dans ton dossier WordPress (cd /mon-site)

# Lister les images non optimisées
wp media list --format=ids

# Réduire les tailles (utile après changement de thème)
wp media regenerate

# Optionnel : intégrer une compression via des outils externes comme jpegoptim, optipng
find wp-content/uploads -iname "*.jpg" -exec jpegoptim --max=75 {} \;
find wp-content/uploads -iname "*.png" -exec optipng -o5 {} \;

Coupler WordPress avec un CDN intelligent

Dans ce cas tu délégues la conversion en WebP/AVIF au CDN (pas besoin de plugin lourd)

• Cloudflare Images : transforme JPG/PNG → WebP ou AVIF selon navigateur
• BunnyCDN + Bunny Optimizer : très rapide, adapté à WordPress, AVIF/WebP automatique

Étapes :

1. Activer le CDN
2. Ajouter leur CNAME dans ton DNS ou utiliser leur URL CDN
3. Intégrer le CDN dans WordPress via :
   • functions.php pour réécrire les URLs images
   • ou plugin comme CDN Enabler (lien avec BunnyCDN possible)

Le poids des images est réduit sans toucher à tes fichiers originaux.

Utiliser des outils de traitement d’image personnalisés (Node.js ou PHP)

Outils recommandés :

• ImageMagick : outil CLI natif (installé sur la plupart des serveurs PHP)
• Sharp (Node.js) : très rapide, supporte AVIF/WebP/resize

WordPress peut utiliser deux bibliothèques différentes pour gérer les images : GD et Imagick. Ces bibliothèques permettent de redimensionner, compresser, recadrer ou convertir les images au moment de leur envoi ou affichage.

GD (Graphics Draw) : inclus par défaut avec PHP, moins performant pour les grandes images, compatible avec la majorité des plugins WordPress et léger.

Imagick (ou ImageMagick): doit être activée sur le serveur, meilleur qualité pour l’anti aliasing, les dégradés. Supporte plus de formats : TIFF, PSD, AVIF, etc.

Pour savoir quelle bibliothèque PHP est utilisée dans WordPress :

1. Va dans « Outils » > « Santé du site »
2. Onglet « Infos » > « Bibliothèque d’image »
3. Tu verras : ImageMagick ou GD

Exemple avec Sharp

const sharp = require('sharp');

sharp('uploads/image.jpg')
  .resize(1200)
  .webp({ quality: 80 })
  .toFile('uploads/image-optimized.webp');

Tu peux créer un script Node qui parcourt tout wp-content/uploads et génère automatiquement des WebP ou AVIF, à appeler après chaque upload en local.

Une image adaptée à chaque type d’écran (quand c’est nécessaire)

De la même manière qu’il est recommandé d’afficher une image aux dimensions réelles qu’elle occupe sur le site, il est aussi pertinent de prévoir plusieurs tailles selon les types d’appareils.

Une image affichée en 1600 px de large sur desktop mais seulement en 450 px sur mobile ne devrait pas être la même image servie dans les deux cas.

Utilisez les balises HTML suivantes :

• <picture> : pour gérer plusieurs formats / tailles conditionnelles
• srcset : pour proposer plusieurs versions d’une même image selon la largeur d’écran
• sizes : pour indiquer au navigateur la largeur d’affichage prévue

<img 
  src="uploads/photo-800x600.jpg" 
  srcset="uploads/photo-300x225.jpg 300w, 
          uploads/photo-600x450.jpg 600w, 
          uploads/photo-800x600.jpg 800w" 
  sizes="(max-width: 768px) 100vw, 800px"
  alt="Image insérée depuis la médiathèque">

Le navigateur choisira automatiquement la version la plus adaptée selon la taille de l’écran et sa densité (retina, etc.).

Depuis la version 4.4, WordPress gère automatiquement srcset pour les images insérées via :

• la médiathèque
• l’éditeur Gutenberg
• le champ the_post_thumbnail()
• ou encore wp_get_attachment_image() en PHP

WordPress génère des versions plus petites à partir d’un original suffisamment grand. Si l’image source est trop petite, il n’y aura pas de srcset utile.

Dans certains thèmes ou plugins, les tailles « medium », « large », etc. sont désactivées ce qui bloque la génération de srcset.

Dans le code source ou les DevTools, tu dois voir l’attribut srcset généré automatiquement par WordPress.

Tu peux aussi utiliser des fonctions comme :

• add_image_size() pour définir tes propres tailles personnalisées
• wp_calculate_image_srcset() pour récupérer manuellement un srcset

Comment charger les images de façon asynchrone ?

Pour améliorer le temps d’affichage des pages web, il est essentiel de ne charger les images qu’au moment où elles deviennent visibles à l’écran.

Cette technique, appelée lazy loading (chargement paresseux), permet de réduire le poids initial de la page et d’optimiser les performances, notamment sur mobile.

Depuis WordPress 5.5, toutes les images insérées via l’éditeur de blocs ou l’éditeur classique sont automatiquement dotées de l’attribut loading="lazy".

<img src="image.jpg" alt="..." loading="lazy">

Tu n’as rien à faire, sauf si :

• tu utilises un constructeur de page (Elementor, etc.) qui désactive cette option.
• Ton thème personnalisé surcharge le comportement des balises <img>.

Pour ajouter manuellement ce comportement dans un template d’un thème classique :

<img src="<?php echo esc_url($image_url); ?>" alt="<?php echo esc_attr($alt_text); ?>" loading="lazy">

Pour des fonctionnalités plus avancées (chargement différé des images de fond, iframes, vidéos…), tu peux installer un plugin comme :

• a3 Lazy Load – simple et efficace.
• Flying Images – inclut lazy loading + conversion WebP + CDN.

Utiliser le bon format au bon moment

Chaque format d’image a ses points forts. Pour optimiser les performances d’un site, il est essentiel de choisir le format adapté à l’usage prévu.

Cas	Format conseillé
Icônes, illustrations vectorielles	SVG
Photos ou images complexes	JPEG, WebP, AVIF
Illustrations avec texture ou flou	PNG ou WebP
Animation vidéo ou illustration animée riche	Lottie (JSON), WebM ou GIF optimisé

Bonnes pratiques SVG

Vérifie que le fichier est propre sans métadonnées inutiles — tu peux l’optimiser avec SVGOMG

Ne jamais uploader un SVG sans filtre si les uploads SVG sont désactivés par WordPress (à cause des risques XSS).

Configurer LocalWP pour utiliser la compression d’images

Voici des plugins qui fonctionnent en local sans serveur distant obligatoire :

• CompressX (gratuit)
• ShortPixel Image Optimizer
  Nécessite une clé API gratuite (100 images/mois).
• EWWW Image Optimizer
  Fonctionne 100 % en local si exec() est disponible sur ton système.
• Converter for Media
  Compatible en local (WebP), mais attention : risque de suppression des JPG originaux si mal configuré.

AVIF : nécessite souvent une version Pro et ne fonctionne pas toujours en local sans configuration serveur.

En local, certaines règles .htaccess ou Nginx ne sont pas actives, donc il se peut que WebP soit généré mais non servi automatiquement.

Configurer LocalWP pour simuler un environnement HTTPS (pour les tests Lighthouse)

• Dans LocalWP, clique sur ton site → Enable SSL.
• Visite le site via l’URL HTTPS fournie.
• Cela permet à Lighthouse et aux plugins d’être plus précis sur les optimisations possibles.

Apache te permet de servir automatiquement les WebP générées, à condition que :

• les règles .htaccess soient en place,
• mod_rewrite et mod_headers soient activés.

# BEGIN WordPress
# Les directives (lignes) entre « BEGIN WordPress » et « END WordPress » sont générées
# dynamiquement, et doivent être modifiées uniquement via les filtres WordPress.
# Toute modification des directives situées entre ces marqueurs sera surchargée.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress


<IfModule mod_rewrite.c>
  RewriteEngine On

  # Rediriger vers AVIF si le navigateur le supporte et que le fichier existe
  RewriteCond %{HTTP_ACCEPT} image/avif
  RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}.avif -f
  RewriteRule ^(.*)\.(jpe?g|png)$ $1.$2.avif [T=image/avif,E=accept:1]

  # Sinon, rediriger vers WebP si le navigateur le supporte et que le fichier existe
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule ^(.*)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,E=accept:1]
</IfModule>

# Déclaration des types MIME
AddType image/webp .webp
AddType image/avif .avif

Même si CompressX (ou tout autre plugin) génère correctement des images WebP, le serveur local (Apache ou Nginx via LocalWP) n’est pas toujours configuré pour :

1. rediriger automatiquement les fichiers .jpg vers leur version .webp,
2. envoyer le bon header Accept: image/webp,
3. gérer le rewrite conditionnel dans .htaccess (dans le cas d’Apache).

Tester le fonctionnement de la réécriture

Si tu vois toujours l’URL affichée finit en .jpg, ce comportement est normal et correspond exactement à ce que font les systèmes de réécriture côté serveur.

WordPress n’a pas réécrit le HTML : il affiche encore l’URL d’origine (.jpg).

Le serveur Apache redirige silencieusement vers le .avif grâce à la règle .htaccess, en fonction du header Accept envoyé par le navigateur (Accept: image/avif,...).

Le fichier physiquement servi est bien le .avif, et c’est ce qui compte pour les performances.

À retenir

• Toujours préparer les images en amont
• Ne pas se fier uniquement aux plugins WordPress
• En local avec LocalWP, désactiver les optimisations automatiques
• Préférer des formats modernes : WebP, AVIF (JPEG XL = en veille)
• Vérifier toujours le format et le poids final avec DevTools ou GTmetrix

Pour une optimisation maximale, il est recommandé de compresser les images et vidéos en amont, avant leur importation dans WordPress, à l’aide d’outils externes comme Squoosh, XnConvert ou HandBrake.
L’idéal est de mettre en place une automatisation de ces compressions afin de garantir des médias légers et performants sur l’ensemble du site.

Lorsqu’on travaille en local avec LocalWP (anciennement Local by Flywheel), il est tout à fait possible d’activer la génération automatique d’images compressées en WebP et AVIF , mais cela nécessite une configuration préalable du serveur local pour éviter les erreurs, notamment lors des changements entre Nginx et Apache. LocalWP propose de choisir entre Apache et Nginx comme serveur web. Si tu changes de serveur après avoir configuré certaines règles , cela peut entraîner : des erreurs 500 ou 403, des échecs dans la génération ou l’affichage des fichiers WebP / AVIF. Prépare ton environnement LocalWP dès le départ avec les bons réglages serveur et PHP , surtout si tu comptes utiliser des fonctionnalités avancées comme la conversion automatique en WebP ou AVIF. Cela t’évitera de perdre du temps à corriger des erreurs liées au serveur ou aux permissions.

Choisis des plugins qui génèrent les versions WebP/AVIF en plus des JPG/PNG , sans altérer les sources originales.

Les algorithmes de compression tels que XJPEG, AVIF ou WebP viennent en complément des optimisations classiques.
Toutefois, leurs performances varient selon les cas d’usage, les navigateurs et les types d’images.
Ils nécessitent donc des tests approfondis avant déploiement : rien n’est acquis, chaque format ayant ses avantages, limites et niveaux de compatibilité.