Comment accélérer le chargement des images d’un site
Les cinq changements qui allègent les images de n’importe quel site, par ordre d’impact.
Sur la plupart des sites, les images représentent la majeure partie de ce que télécharge un visiteur. Une seule photo de téléphone non optimisée peut peser plus lourd que tout le reste de la page. Corriger les images est généralement l’amélioration de vitesse la plus importante et la moins coûteuse, et une page rapide se positionne mieux, retient davantage les visiteurs et convertit plus.
1. Chargez les images à la taille où elles s’affichent
Une photo sortie d’un téléphone fait 4000 pixels de large ou plus. Une colonne de contenu dépasse rarement 1200 pixels, et une carte ou une vignette bien moins. Chaque pixel en trop est téléchargé puis jeté par le navigateur. Redimensionnez avant d’envoyer : environ 2000 pixels de large pour les bannières pleine largeur (pour rester net sur les écrans haute densité), 1200 à 1600 pour les images de contenu et 600 à 800 pour les cartes. L’outil de redimensionnement traite un dossier entier d’un coup.
2. Compressez
Avec les bonnes dimensions, la compression fait le reste. Une photo enregistrée en qualité 80 est identique à une qualité 100 sur une page web et pèse souvent un tiers. Le compresseur d’images traite des lots et affiche le gain pour chaque fichier.
3. Utilisez le WebP
Le WebP est pris en charge par tous les navigateurs actuels et pèse généralement 25 à 35 pour cent de moins qu’un JPG à qualité visible égale, avec en plus la transparence, ce qui en fait aussi un remplaçant de beaucoup de PNG. Convertissez avec JPG vers WebP ou PNG vers WebP. L’AVIF est encore plus léger, mais plus lent à encoder et moins accepté par les systèmes d’envoi, donc le choix pratique par défaut reste le WebP.
4. Choisissez le bon format selon le contenu
| Contenu | Meilleur format |
|---|---|
| Photos | WebP, ou JPG là où le WebP n’est pas accepté |
| Logos et icônes | SVG si vous l’avez, sinon PNG ou WebP |
| Captures d’écran avec du texte | PNG ou WebP sans perte |
| Animations simples | Une courte vidéo plutôt qu’un GIF |
5. Aidez le navigateur à les charger intelligemment
- Chargement différé. Les images situées sous le premier écran ne devraient se charger que lorsque le visiteur s’en approche en faisant défiler. La plupart des plateformes le font seules ; en HTML simple, ajoutez loading="lazy" aux balises img qui ne sont pas visibles au départ.
- Dimensions. Donnez une largeur et une hauteur à chaque image pour que la page ne saute pas à mesure qu’elles arrivent. Le décalage de mise en page fait partie des Core Web Vitals de Google.
- L’image principale d’abord. La grande image en haut de page, celle qui compte en général comme Largest Contentful Paint, ne doit jamais être en chargement différé. Elle doit se charger le plus tôt possible.
La différence que ça fait
Une page classique avec dix photos sorties d’un téléphone peut peser 30 Mo. Redimensionnée à des largeurs raisonnables et compressée, la même page tombe en général autour de 2 Mo. Convertie en WebP, plutôt 1,4 Mo. En connexion mobile, c’est la différence entre une page qui apparaît en une seconde et une page que beaucoup de visiteurs abandonnent.
Vérifier vos résultats
PageSpeed Insights de Google et le panneau Lighthouse des outils de développement de Chrome listent les images trop grandes, celles qui devraient être en WebP et l’élément du Largest Contentful Paint. Mesurez avant et après, et commencez par les pages qui reçoivent le plus de trafic.