Nouveaux formats d’image sur WordPress : un guide sans risque

Vous avez vu l’alerte PageSpeed Insights : « Diffuser vos images dans des formats de nouvelle génération ». C’est plus qu’une suggestion, mais une exigence essentielle pour un site rapide.

Les conseils s’arrêtent souvent là. Quels sont ces formats ? Comment les mettre en œuvre sur un site WordPress en production sans provoquer d’images cassées ?

C’est ce que propose notre petit guide. Nous ne nous attarderons pas sur la théorie et détaillerons trois méthodes pratiques, de la plus simple à la plus efficace.

Les formats AVIF & WebP expliqués simplement

Oubliez les spécifications techniques. Voici ce que vous devez savoir :

  • WebP : Créé par Google. Pris en charge universellement par tous les navigateurs modernes. Offre des tailles de fichier bien inférieures au JPEG et PNG, avec une qualité égale ou supérieure. Votre premier choix, sûr et puissant.
  • AVIF : Le format plus récent et plus efficace. Il peut produire des fichiers encore plus petits que le WebP. La prise en charge par les navigateurs progresse rapidement (Chrome, Firefox, Edge), mais n’est pas encore tout à fait universelle.

La stratégie la plus intelligente ? Proposer les deux. Livrez l’AVIF aux navigateurs qui le supportent, et basculez automatiquement vers le WebP ou l’image originale pour les autres. Voici comment y parvenir.

Méthode 1 : La solution par extension (la plus simple)

C’est le meilleur point de départ pour 95 % des sites. Une extension dédiée gère automatiquement la conversion, la diffusion et fournit une solution de rechange en cas de non-compatibilité.

Notre choix : ShortPixel Image Optimizer

Un plugin robuste et fiable qui fait le travail sans complications.

Configuration étape par étape :

  1. Installez & Activez : Depuis votre tableau de bord WordPress, allez dans Extensions > Ajouter. Recherchez « ShortPixel Image Optimizer », installez-le et activez-le.
  2. Obtenez une clé API : Il vous sera demandé de saisir une clé API. Ils proposent 100 crédits gratuits par mois (pour ~1000 images). Cliquez sur le lien pour obtenir votre clé gratuite, copiez-la et collez-la.
  3. Configurez les paramètres critiques : Allez dans Réglages > ShortPixel. Sous « Général », choisissez votre méthode d’optimisation :
    • Glossy : Pour une qualité parfaite. (Recommandé pour photographes, portfolios).
    • Lossy : Pour une excellente qualité et des fichiers plus petits. (Le meilleur équilibre pour la plupart des sites).
    • Ultra Lossy : Pour une compression maximale. Testez cette option avec soin.
  4. Activez les formats nouvelle génération : C’est la clé. Dans l’onglet « Avancé », trouvez l’option « Create WebP versions of the images ». Cochez-la. Pour l’AVIF, cochez « Also create AVIF versions of the images ».
  5. Optimisez toute votre bibliothèque : Allez dans Médias > ShortPixel Bulk Optimization. Cliquez sur « Start Optimizing ». Cela convertira toute votre bibliothèque existante. Laissez-le tourner en arrière-plan.

Comment ça marche : L’extension génère des copies WebP/AVIF de vos images. En utilisant des règles .htaccess intelligentes (pour les serveurs Apache) ou des scripts de diffusion, elle détecte automatiquement le navigateur du visiteur et sert le meilleur format qu’il peut supporter. Si un navigateur ne supporte ni l’un ni l’autre, il voit l’image JPEG/PNG originale. Transparent.

Idéal pour : Presque tout le monde. Blogueurs, sites de petites entreprises, agences gérant des sites clients.

Méthode 2 : La solution CDN (à configurer une fois et oublier)

Si vous utilisez un Réseau de Diffusion de Contenu (CDN) comme Cloudflare, Bunny.net ou KeyCDN, ils intègrent souvent l’optimisation d’images. Cela décharge le travail de conversion de votre serveur.

Exemple : Cloudflare Polish + Mirage

  1. Connectez-vous à votre tableau de bord Cloudflare et sélectionnez votre site.
  2. Allez dans la section Speed > Optimization.
  3. Trouvez « Polish ». Réglez-le sur « Lossy » ou « Lossless ». C’est la conversion WebP de base.
  4. Pour une prise en charge complète nouvelle génération, vous avez besoin de « Mirage » ou du nouveau service « Image Resizing » (qui peut être un module payant). Ils permettent la conversion et la diffusion à la volée en AVIF/WebP en fonction de l’appareil connecté.

Avantages : Charge serveur nulle. Diffusion mondiale. Souvent très simple à activer.
Inconvénients : Moins de contrôle. Les fonctions avancées peuvent être payantes. Vous dépendez d’un service tiers.

Idéal pour : Les sites déjà sur un CDN performant, ou ceux avec un trafic élevé et mondial.

Méthode 3 : La méthode au niveau serveur (contrôle maximal)

C’est pour les personnes techniquement à l’aise qui veulent la performance absolue sans middleware d’extension. Cela implique une configuration directe du serveur.

Le concept : Vous configurez votre serveur web (comme Nginx ou Apache) pour vérifier si une version WebP/AVIF d’une image existe et, si le navigateur l’accepte, sert celle-ci au lieu de l’original.

Un exemple Nginx simplifié :
Vous ajouteriez un bloc de code à la configuration de votre site, généralement dans le bloc server. Il recherche une requête d’image (comme photo.jpg) et vérifie d’abord si photo.jpg.avif ou photo.jpg.webp existe dans le même dossier. Si c’est le cas et que le navigateur le supporte, il le sert.

Pourquoi c’est puissant : C’est extrêmement rapide. Pas de PHP, pas de surcharge liée à une extension.
Le bémol majeur : Vous devez générer vous-même les fichiers WebP/AVIF et les téléverser aux côtés de vos originaux. Une extension comme Converter for Media peut créer les fichiers, que vous synchronisez ensuite via FTP. C’est manuel et nécessite d’être à l’aise avec les configurations serveur.

Idéal pour : Les développeurs obsédés par la performance, avec des environnements de staging pour les tests.

Votre plan d’action et liste de contrôle critique

  1. Sauvegardez votre site. Avant de commencer. Toujours. Utilisez l’outil de sauvegarde de votre hébergeur ou une extension comme UpdraftPlus.
  2. Commencez par la Méthode 1 (ShortPixel). C’est le point d’entrée le plus sûr et le plus complet. Lancez l’optimisation globale.
  3. Vérifiez que ça fonctionne. Ouvrez votre site dans Chrome. Faites un clic droit sur une image et sélectionnez « Ouvrir l’image dans un nouvel onglet ». Regardez l’URL dans le nouvel onglet. Se termine-t-elle par .webp ou .avif ? Vous avez réussi.
  4. Effectuez un test sur WebPageTest.org. Téléversez un rapport avant/après pour voir l’impact réel sur votre temps de chargement.

Dépannage – La grande inquiétude :

Et si une image se casse ?

Avec les méthodes par extension et CDN, le repli est automatique. Le serveur vérifie la compatibilité du navigateur. Si cela échoue, il sert simplement le JPG/PNG original que vous avez téléversé. Votre site ne cassera pas. C’est la beauté d’une mise en œuvre correcte.

L’objectif n’est pas seulement une coche verte dans un outil de performance. C’est un site réellement plus rapide pour vos visiteurs, sans travail supplémentaire pour eux – ni pour vous après cette configuration unique. Choisissez votre méthode, suivez les étapes et profitez du gain de vitesse.

Ce billet vous a été utile?
Offrez-nous un café!
Tags: