Pourquoi optimiser les images ?
Les images représentent en moyenne 50 à 70 % du poids total d'une page web. Des images trop lourdes ralentissent le chargement de votre site, dégradent l'expérience utilisateur et nuisent au référencement. Google PageSpeed Insights pénalise les sites qui n'optimisent pas leurs images.
Une bonne optimisation des images permet de :
- Réduire le temps de chargement de 30 à 60 %
- Améliorer les scores Core Web Vitals (LCP notamment)
- Réduire la consommation de bande passante
- Améliorer l'expérience sur les connexions mobiles
Choisir le bon format d'image
Le choix du format est la première décision à prendre avant d'optimiser.
| Format | Usage recommandé |
|---|---|
| WebP | Format moderne, 25-35 % plus léger que JPEG/PNG. À utiliser pour photos et illustrations |
| AVIF | Format encore plus récent et plus efficace que WebP, bon support navigateurs en 2026 |
| JPEG/JPG | Photos et images avec dégradés, si WebP non disponible |
| PNG | Images nécessitant de la transparence ou des bords nets |
| SVG | Logos, icônes et graphiques vectoriels — qualité parfaite à toute taille |
| GIF | À éviter pour les animations — utilisez des vidéos MP4 à la place |
Adoptez WebP en priorité
Le format WebP est aujourd'hui supporté par tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Convertissez vos images JPEG et PNG en WebP pour réduire leur taille sans perte de qualité visible.
Dimensionner les images correctement
Avant d'optimiser le format, assurez-vous que vos images ont les bonnes dimensions. Téléverser une image de 4000×3000 pixels pour l'afficher en 800×600 est un gaspillage de bande passante.
Règle pratique :
- Images pleine largeur sur desktop : maximum 1920px de large
- Images de blog : 1200 à 1600px de large
- Miniatures : selon votre thème, souvent 300 à 600px
- Images pour mobile : pensez aux images responsive avec l'attribut
srcset
Optimiser les images sur WordPress
Avec LiteSpeed Cache
Si vous utilisez LiteSpeed Cache (disponible sur Gaprod), l'optimisation d'images est intégrée.
Accéder à l'optimisation d'images
Dans WordPress, allez dans LiteSpeed Cache → Image Optimize.
Configurer les paramètres
Activez les options suivantes :
- Remplacer les images originales : remplace vos images par des versions optimisées
- Activer WebP : génère des versions WebP de toutes vos images
- Activer le chargement différé : charge les images hors écran uniquement quand l'utilisateur les atteint
Lancer l'optimisation
Cliquez sur Envoyer les images non optimisées pour soumettre vos images existantes à QUIC.cloud pour optimisation. Le traitement est asynchrone — les images sont optimisées progressivement et automatiquement remplacées.
Avec Imagify
Imagify est une extension WordPress dédiée à l'optimisation d'images, avec un plan gratuit généreux.
Installer Imagify
Dans Extensions → Ajouter une extension, recherchez Imagify. Installez et activez l'extension. Créez un compte gratuit sur imagify.io pour obtenir une clé API.
Configurer Imagify
Dans Réglages → Imagify, saisissez votre clé API. Choisissez le niveau de compression :
- Normal : compression légère, qualité maximale préservée
- Aggressif : bon équilibre qualité/poids (recommandé)
- Ultra : compression maximale, légère perte de qualité
Optimiser les images existantes
Dans Médias → Bulk Optimization (ou Optimisation en masse), lancez l'optimisation de toutes vos images existantes.
Optimiser les images avant téléversement
La meilleure approche est d'optimiser les images avant de les téléverser sur votre site.
Outils en ligne gratuits
- Squoosh (squoosh.app) : outil Google pour compresser et convertir en WebP/AVIF directement dans le navigateur
- TinyPNG (tinypng.com) : compression PNG et JPEG, très efficace
- SVGOMG (jakearchibald.github.io/svgomg) : optimisation des fichiers SVG
Outils de bureau
- ImageOptim (macOS, gratuit) : compresse PNG, JPEG, GIF sans perte de qualité visible
- GIMP (multiplateforme, gratuit) : éditeur complet avec export WebP
Implémenter le lazy loading
Le lazy loading (chargement différé) empêche les images situées en bas de page d'être chargées au premier rendu, améliorant significativement le temps de chargement initial.
Pour les sites HTML standards, ajoutez simplement l'attribut loading="lazy" à vos balises <img> :
<img src="photo.webp" alt="Description" loading="lazy" width="800" height="600">
Toujours spécifier width et height
Spécifier les attributs width et height sur les balises <img> permet au navigateur de réserver l'espace avant que l'image soit chargée. Cela évite le "saut de mise en page" (Cumulative Layout Shift) qui pénalise votre score CLS dans les Core Web Vitals.
Utiliser des images responsive avec srcset
Pour servir des images adaptées à la taille de l'écran, utilisez l'attribut srcset :
<img
src="image-800.webp"
srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="Description de l'image"
loading="lazy"
>
WordPress génère automatiquement plusieurs tailles d'images et l'attribut srcset lors de l'insertion dans l'éditeur.
Étapes suivantes
Une fois vos images optimisées :
- Vérifiez vos scores sur PageSpeed Insights
- Analysez vos Core Web Vitals (LCP, CLS) dans Google Search Console
- Envisagez un CDN pour servir vos images depuis des serveurs proches de vos visiteurs