Introduction
Selon HTTP Archive, les images representent en moyenne 50 % du poids total d'une page web en 2025. Sur mobile, ou la bande passante est souvent limitee, des images mal optimisees peuvent transformer une experience fluide en attente frustrante.
L'optimisation des images est le levier de performance le plus accessible : quelques bonnes pratiques suffisent pour reduire le poids de vos pages de 40 a 70 %, sans perte de qualite perceptible.
Les formats d'image modernes
JPEG : le veteran
Le JPEG (Joint Photographic Experts Group, 1992) reste le format le plus utilise pour les photographies. Il offre une bonne compression avec pertes, mais ne supporte pas la transparence.
Utilisation ideale : photographies, images avec beaucoup de couleurs et de degrades.
PNG : la transparence
Le PNG (Portable Network Graphics, 1996) offre une compression sans perte et supporte la transparence (canal alpha). En contrepartie, les fichiers sont plus lourds que les JPEG.
Utilisation ideale : logos, icones, illustrations avec zones transparentes, captures d'ecran.
WebP : le successeur
Developpe par Google et publie en 2010, le WebP combine le meilleur des deux mondes :
- Compression avec pertes superieure au JPEG (25 a 34 % plus legere pour une qualite equivalente, selon Google)
- Compression sans perte superieure au PNG (26 % plus legere en moyenne)
- Support de la transparence et de l'animation
Le WebP est supporte par 97 % des navigateurs en 2026 (source : Can I Use). Seuls quelques navigateurs tres anciens ne le gerent pas.
AVIF : la nouvelle generation
Le format AVIF (AV1 Image File Format), base sur le codec video AV1, offre une compression encore superieure au WebP :
- 50 % plus leger que le JPEG pour une qualite equivalente (Netflix, 2020)
- Support de la transparence, du HDR et des images animees
- Supporte par Chrome, Firefox, Safari (depuis la version 16.1) et Edge
Inconvenient : l'encodage est plus lent que pour le WebP, ce qui peut poser probleme pour le traitement en temps reel.
SVG : le vectoriel
Le SVG (Scalable Vector Graphics) est un format vectoriel base sur XML. Les images SVG sont indefiniment redimensionnables sans perte de qualite et generalement tres legeres.
Utilisation ideale : icones, logos, illustrations geometriques, graphiques.
Le responsive images en HTML
L'attribut srcset
L'attribut srcset permet au navigateur de choisir l'image la plus adaptee a la taille de l'ecran :
<img
src="photo-800.webp"
srcset="
photo-400.webp 400w,
photo-800.webp 800w,
photo-1200.webp 1200w
"
sizes="(max-width: 600px) 100vw, 800px"
alt="Description de la photo"
loading="lazy"
decoding="async"
>Le navigateur telecharge uniquement l'image adaptee a la largeur de l'ecran. Un utilisateur mobile avec un ecran de 375 px de large ne telechargera que l'image de 400 px, au lieu de la version 1200 px.
La balise picture pour les formats modernes
La balise <picture> permet de servir differents formats selon le support du navigateur :
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Description" loading="lazy">
</picture>Le navigateur utilise le premier format qu'il supporte : AVIF en priorite, WebP en repli, JPEG en dernier recours.
Les techniques d'optimisation
1. La compression
Reduire la qualite JPEG de 100 % a 80 % diminue le poids de 60 % avec une difference visuelle imperceptible. Pour le WebP, une qualite de 75-80 % est generalement optimale.
2. Le redimensionnement
Ne servez jamais une image plus grande que necessaire. Si votre conteneur fait 800 px de large, une image de 1600 px est inutile (sauf pour les ecrans Retina — dans ce cas, prevoyez une image 2x).
3. Le lazy loading
L'attribut loading="lazy" empeche le chargement des images hors de la zone visible. C'est un attribut HTML natif, aucun JavaScript n'est necessaire :
<img src="photo.webp" alt="Description" loading="lazy">Important : ne mettez pas loading="lazy" sur les images visibles au premier chargement (au-dessus de la ligne de flottaison), car cela retarderait leur affichage.
4. Le dimensionnement explicite
Specifiez toujours width et height sur vos images pour eviter le Cumulative Layout Shift (CLS), un indicateur Core Web Vitals :
<img src="photo.webp" width="800" height="600" alt="Description">Les outils d'optimisation
En ligne de commande
- Sharp (Node.js) : la reference pour le traitement d'images serveur. Conversion WebP/AVIF, redimensionnement, compression
- ImageMagick : outil polyvalent en ligne de commande
- cwebp (Google) : convertisseur WebP officiel
- avifenc : encodeur AVIF reference
Les services en ligne
- Squoosh (squoosh.app) : outil Google de compression visuelle, comparaison avant/apres
- TinyPNG : compression PNG et JPEG en ligne (gratuit jusqu'a 20 images)
- ImageOptim (macOS) : application de bureau pour l'optimisation par lot
Les plugins de build
Pour les projets avec un bundler (Vite, Webpack) :
// vite.config.js avec vite-plugin-image-optimizer
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
export default {
plugins: [
ViteImageOptimizer({
png: { quality: 80 },
jpeg: { quality: 80 },
webp: { quality: 80 },
avif: { quality: 65 },
}),
],
};Conclusion
L'optimisation des images est le moyen le plus rapide d'ameliorer les performances de votre site. Adoptez le WebP comme format par defaut, proposez l'AVIF en priorite avec la balise <picture>, activez le lazy loading et dimensionnez vos images correctement. Ces actions simples peuvent reduire le poids de vos pages de moitie.