Comment compresser des images pour un site web

Selon le Web Almanac 2025 de HTTP Archive, la page d’accueil médiane pesait 2,56 MB sur mobile, dont 911 KB d’images. Sur ordinateur, la page médiane contenait 1 058 KB d’images. Les images sont aussi ce que les visiteurs attendent : le plus grand élément affiché à l’écran pendant le chargement, le Largest Contentful Paint (LCP), était une image sur 76 % des pages mobiles.

Des images plus légères se chargent plus vite sur une connexion lente, consomment moins de données mobiles chez vos visiteurs et vous coûtent moins de bande passante. Le LCP fait partie des Core Web Vitals (Signaux Web essentiels), les mesures qu’utilise Google pour évaluer l’expérience sur une page : des images trop lourdes peuvent donc coûter plus que quelques secondes de patience.

La compression ne peut pas sauver une image bien plus grande que l’espace qu’elle occupe. Une photo d’appareil de 4000 pixels de large, affichée dans une colonne de 800 pixels, contient 25 fois plus de pixels que la page ne peut en utiliser. web.dev indique qu’envoyer aux téléphones des images prévues pour ordinateur peut consommer 2 à 4 fois plus de données que nécessaire.

• Bannières pleine largeur : environ 1600 à 2000 pixels de large suffisent pour la plupart des mises en page.
• Images dans la colonne d’un article : environ deux fois la largeur de la colonne, pour qu’elles restent nettes sur les écrans haute densité (par exemple 1400 pixels pour une colonne de 700 pixels).
• Miniatures et avatars : deux fois leur taille d’affichage, souvent 200 à 400 pixels.

Le format détermine l’efficacité avec laquelle une image peut être stockée. En bref : les photos conviennent au JPG ou au WebP ; les logos, les captures d’écran et tout ce qui comporte de la transparence conviennent au PNG ou au WebP. Notre comparatif JPG, PNG et WebP explique dans quels cas chacun l’emporte.

Environ 97 % des navigateurs utilisés affichent le WebP, et il est souvent nettement plus léger. Pour l’essayer, convertissez avec JPG en WebP ou PNG en WebP et comparez le résultat avec l’original : un fichier converti n’est pas toujours plus petit, surtout pour les graphismes simples.

La compression supprime des données que l’œil a peu de chances de remarquer. Sur le compresseur d’images Bitinz, vous pouvez déposer un lot de fichiers JPG, PNG ou WebP et choisir l’un des trois niveaux :

• Rapide : la vitesse avant tout, pour les gros lots.
• Équilibré : le niveau par défaut, adapté à la plupart des images d’un site web.
• Maximal : un peu plus long, pour des fichiers plus légers ; idéal pour les images présentes sur toutes les pages, comme les bannières et les arrière-plans.

Quand vous conservez le format, Bitinz ne vous rend jamais un fichier plus lourd que celui que vous avez envoyé. Comparez le résultat avec l’original en taille réelle, en particulier pour les images contenant du texte fin ou des dégradés doux, puis téléchargez celles qui vous conviennent.

Une image bien compressée peut encore ralentir une page si elle se charge au mauvais moment ou à la mauvaise taille. Quelques attributs HTML font l’essentiel du travail :

• Indiquez width et height sur chaque image, pour que le navigateur réserve l’espace et que la mise en page ne saute pas pendant le chargement.
• Ajoutez loading="lazy" aux images situées plus bas dans la page, pour qu’elles ne se chargent que lorsque le visiteur fait défiler la page jusqu’à elles.
• Ne différez jamais le chargement de l’image principale en haut de la page. Pour cette image, web.dev recommande plutôt fetchpriority="high", sur une ou deux images au maximum.
• Utilisez srcset et sizes pour proposer plusieurs largeurs d’une même image, afin que les téléphones téléchargent un fichier plus léger que les grands écrans.
• Servez les images avec une longue durée de cache, via un CDN si vous en avez un, pour que les visiteurs qui reviennent n’aient pas à les télécharger de nouveau.

Analysez la page avec PageSpeed Insights ou le panneau Lighthouse de Chrome. Depuis Lighthouse 13, les vérifications liées aux images sont regroupées dans un seul insight, « Improve image delivery », qui liste les images pouvant être davantage compressées, servies dans un format moderne ou réduites. Les images qui feraient gagner moins de 4 KiB ne sont pas listées : une liste courte est donc bon signe.

Regardez ensuite la page vous-même sur un téléphone. Les contours nets, le texte dans les images et les tons de peau sont les premiers endroits où les défauts de compression apparaissent.

Si votre site ajoute des images chaque jour, par exemple via un système de gestion de contenu ou une boutique en ligne, compressez-les au moment de l’envoi ou de la publication plutôt qu’à la main. L’API développeurs de Bitinz reçoit une image en HTTP et renvoie un lien vers le fichier compressé : elle peut donc tourner depuis un script ou une chaîne de build. Chaque compte dispose d’un quota mensuel gratuit.

1. 01Redimensionnez chaque image à environ deux fois sa taille d’affichage.
2. 02Utilisez le JPG ou le WebP pour les photos, et le PNG ou le WebP pour les graphismes et la transparence.
3. 03Compressez au niveau Équilibré, et essayez Maximal pour les plus grandes images.
4. 04Comparez le résultat avec l’original avant de le remplacer.
5. 05Indiquez la largeur et la hauteur, différez le chargement des images situées sous la ligne de flottaison, mais jamais celui de l’image principale.
6. 06Vérifiez à nouveau la page dans PageSpeed Insights.

Vous mettez des images en ligne ailleurs que sur votre propre site ? Chaque plateforme a ses propres règles : consultez les tailles d’image requises pour l’e-mail et les boutiques en ligne.