Optimisation des Images
Formats, compression, lazy loading
1) Pourquoi les images sont critiques ?
Les images représentent souvent 50 à 70% du poids total d'une page web. Elles ont un impact direct sur le LCP puisque le plus grand élément visible est souvent une image (hero, bannière).
La bonne nouvelle, c'est que les gains sont rapides et faciles à obtenir. Tu n'as pas besoin de savoir coder pour optimiser tes images, et le retour sur investissement est immédiat.
2) Les formats d'image
Chaque format a ses avantages selon ton usage. Voici un récapitulatif :
| Format | Usage | Transparence | Animation |
|---|---|---|---|
| JPEG | Photos, images complexes | Non | Non |
| PNG | Logos, captures d'écran | Oui | Non |
| GIF | Animations simples | Oui | Oui |
| WebP | Remplace JPEG/PNG (-25-35%) | Oui | Oui |
| AVIF | Encore plus léger (-50%) | Oui | Oui |
| SVG | Icônes, logos vectoriels | Oui | Non |
Les formats modernes (WebP et AVIF) offrent de bien meilleurs résultats en termes de compression, tout en supportant transparence et animation.
3) Techniques d'optimisation
Redimensionner est la première étape : ne sers jamais une image de 4000px pour l'afficher en 400px. Adapte toujours la taille à l'affichage réel. Ensuite, compresser en réduisant la qualité à 80-85% permet de gagner beaucoup de poids sans différence visible à l'œil nu.
Le lazy loading (chargement différé) est essentiel : ajoute loading="lazy" sur tes balises img pour que les images hors écran ne se chargent que quand l'utilisateur scrolle vers elles.
Enfin, définis toujours les dimensions explicites (width et height) dans le HTML. Cela permet au navigateur de réserver l'espace et évite le CLS (décalage de mise en page).
4) Outils de compression
Squoosh.app est l'outil de référence créé par Google. Entièrement gratuit et en ligne, il permet de comparer visuellement le avant/après et de convertir entre formats. C'est parfait pour optimiser une image à la fois avec un contrôle précis.
TinyPNG / TinyJPG est idéal pour traiter plusieurs images en batch. L'interface est ultra simple : tu glisses tes fichiers et ils sont compressés automatiquement.
Pour WordPress, des plugins comme ShortPixel, Imagify ou Smush automatisent la compression à l'upload. Tu n'as plus à y penser.
5) Exercice pratique
Prends une image lourde (2-3 Mo) et compresse-la avec Squoosh. Convertis-la en WebP et compare le poids avant/après ainsi que la qualité visuelle. Tu seras surpris des gains possibles !
Quel format d'image moderne est recommande pour remplacer JPEG/PNG ?
WebP offre une compression 25-35% meilleure que JPEG/PNG tout en supportant transparence et animation.