Compresser les images de votre site web

Les images sont souvent les fichiers les plus lourds qu’une page charge, et les pages lourdes paraissent lentes, surtout sur mobile. La solution est généralement simple : cessez de servir une photo de 4000 px dans un emplacement de 800 px. Voici une routine rapide qui le fait dans votre navigateur, sans rien envoyer en ligne.

Ouvrir le compresseur d’images

1. Adaptez la taille de l’image à son emplacement

Repérez la plus grande largeur à laquelle l’image est affichée, par exemple une colonne d’article de 800 px ou une bannière pleine largeur. Réglez le champ « Largeur/hauteur max (px) » sur cette largeur environ, ou jusqu’au double si vous voulez un rendu net sur les écrans haute densité. Le plus grand côté est réduit, les proportions sont conservées et les images ne sont jamais agrandies. Retirer les pixels que vous n’afficherez jamais est la plus grosse économie possible.

Par exemple, une photo de smartphone de 4000 px de large affichée dans une colonne de 800 px peut être ramenée à 1600 px et rester nette sur un écran haute densité, tout en contenant bien moins de pixels que l’original. Consultez la mise en page de votre site ou l’inspecteur de votre navigateur si vous hésitez sur la largeur réelle d’un emplacement.

2. Réglez la qualité

Pour les photos en JPG ou en WebP, commencez à 75 % et comparez les poids avant et après. La plupart des photos paraissent presque identiques à 70–80 % et à 100 %, pour une fraction du poids. Baissez d’un cran à la fois ; chaque passage repart de votre original, vous pouvez donc réessayer sans rien perdre. Le PNG ignore le curseur car il est sans perte : le redimensionnement est son seul levier.

3. Choisissez le format

Photos : le WebP est généralement plus léger que le JPG à qualité comparable, et tous les principaux navigateurs actuels le prennent en charge. Le JPG est la solution de repli sûre.
Captures d’écran, texte et logos : le PNG garde les contours nets et gère la transparence ; le WebP prend aussi en charge la transparence.
Images d’en-tête et bannières : l’offre gratuite produit des images jusqu’à 2000 px sur le plus grand côté, ce qui suffit pour la plupart des mises en page.

La conversion entre formats et le traitement de lots illimités font partie de Pro. L’offre gratuite traite jusqu’à 5 images à la fois, avec une qualité allant jusqu’à 80 %.

4. Terminez dans le code de votre page

Ajoutez les attributs width et height à chaque balise <img> pour que la mise en page ne saute pas pendant le chargement.
Ajoutez loading="lazy" aux images situées sous la ligne de flottaison, mais pas à l’image principale en haut de page.
Utilisez des noms de fichier descriptifs et un texte alt.

Rechargez ensuite la page et regardez-la dans une fenêtre de la taille d’un téléphone. Si elle paraît encore lourde, ce sont les plus grosses images restantes qu’il faut réduire davantage.

Compresser les images de votre site