Comment optimiser les images d'un site web
Les images sont souvent la partie la plus lourde d'une page web. Les optimiser est le moyen le plus rapide de charger plus vite, de mieux se classer et de garder vos visiteurs.
Pourquoi c'est important
Les moteurs de recherche mesurent la vitesse de chargement avec les Core Web Vitals. Le Largest Contentful Paint, souvent une grande image en haut de page, devrait s'afficher en moins de 2,5 secondes. Les images lourdes le ralentissent, surtout sur les réseaux mobiles, et les visiteurs quittent les pages lentes.
1. Servez les bonnes dimensions
N'envoyez jamais une photo de 4000 px pour l'afficher à 800 px. Redimensionnez à environ deux fois la largeur affichée pour rester net sur les écrans haute densité : 1600 px pour une image pleine largeur, 800 px pour une vignette. Le traitement par lots redimensionne tout un dossier en une fois.
2. Utilisez le WebP ou l'AVIF
Le WebP est lu par tous les navigateurs récents et fait gagner 25 à 35 % par rapport au JPG ; l'AVIF encore davantage. Convertissez avec Convertir en WebP ou Convertir en AVIF. Avec l'élément HTML picture, vous pouvez servir l'AVIF avec un JPG de secours.
3. Compressez raisonnablement
Une qualité de 75 à 82 % convient à la plupart des photos web. Vérifiez le résultat avec la comparaison avant/après, et gardez une qualité plus élevée pour les images de produits que les visiteurs agrandissent.
4. Aidez le navigateur
- Indiquez toujours les attributs
widthetheightpour que la page ne saute pas pendant le chargement des images. - Ajoutez
loading="lazy"aux images situées plus bas dans la page, mais pas à l'image principale en haut. - Utilisez
srcsetpour proposer plusieurs tailles et laisser le navigateur choisir. - Rédigez un texte
altparlant : il aide l'accessibilité et la recherche d'images.
5. Nettoyez avant de publier
Retirez les données EXIF des photos que vous publiez : elles alourdissent les fichiers et peuvent révéler des lieux. Tous les outils de ce site le font automatiquement.