L'impact du poids des images sur la vitesse
Chaque image chargée sur une page représente une requête HTTP et un volume de données à transférer. Plus une image est lourde, plus ce transfert prend du temps. Sur mobile avec une connexion 4G, une page avec des images non optimisées peut prendre 6 à 10 secondes à s'afficher complètement.
Or la vitesse de chargement est un critère de classement pour Google, directement mesurée via le LCP (Largest Contentful Paint) des Core Web Vitals.
Les formats recommandés
| Format | Compression | Transparence | Recommandé pour |
|---|---|---|---|
| WebP | Excellente (25-35 % plus léger que JPEG) | Oui | Photos, illustrations, images de fond |
| AVIF | Très bonne (encore meilleure que WebP) | Oui | Photos, images complexes (support en progression) |
| SVG | Très léger pour les graphiques vectoriels | Oui | Logos, icônes, illustrations simples |
| JPEG | Bonne mais moins que WebP | Non | Photos si WebP non supporté (rare) |
| PNG | Sans perte, souvent lourd | Oui | À éviter pour les photos, acceptable pour les captures d'écran |
WebP est supporté par tous les navigateurs modernes depuis 2020. Il n'y a plus de raison valable d'utiliser du JPEG ou du PNG pour les nouvelles images publiées sur un site.
La compression des images
Même en WebP, une image peut rester trop lourde si elle n'est pas compressée. Deux types de compression existent :
- Compression sans perte : réduit la taille du fichier sans dégradation visible. Recommandée pour les logos et illustrations.
- Compression avec perte : réduit davantage la taille mais peut dégrader légèrement la qualité. Acceptable pour les photos à un taux de qualité autour de 75-85 %.
Des outils comme Squoosh (en ligne, gratuit) ou Sharp (bibliothèque Node.js) permettent de compresser les images en WebP simplement.
Dimensionner correctement les images
Une erreur fréquente consiste à uploader une image en 3000 x 2000 pixels alors qu'elle s'affiche en 800 x 500 pixels sur la page. Le navigateur charge quand même l'image en haute résolution et la réduit via CSS. C'est un gaspillage de bande passante.
Il faut toujours exporter les images aux dimensions réelles d'affichage, avec une version double résolution pour les écrans Retina si nécessaire.
Le lazy loading
Le lazy loading est une technique qui consiste à ne charger les images que lorsqu'elles deviennent visibles dans la fenêtre du navigateur, plutôt que de toutes les charger au chargement de la page. Il suffit d'ajouter l'attribut loading="lazy" sur les balises <img>.
Cette technique réduit significativement le temps de chargement initial, en particulier pour les longues pages avec de nombreuses images.