Pourquoi la taille des images compte plus que vous ne le pensez
J'ai un jour audité le site portfolio d'un ami qui mettait 11 secondes à charger. Le coupable n'était ni le code ni l'hébergement — c'étaient six captures d'écran PNG non compressées totalisant 24 Mo. Après les avoir correctement compressées, la même page chargeait en moins de 2 secondes et avait exactement le même aspect. Les images sont presque toujours les plus gros octets d'une page, ce qui fait de la compression le gain de performance le plus rentable pour la plupart des propriétaires de sites.
Le workflow de compression en 3 étapes
1. Choisissez d'abord le bon format. Le choix du format compte plus que n'importe quel curseur de qualité. Les photographies devraient être en WebP ou AVIF. Les graphiques aux couleurs plates et le texte devraient être en PNG (ou SVG s'ils sont vectoriels). N'utilisez jamais BMP ou TIFF sur le web. En cas de doute, convertissez avec notre convertisseur JPG vers WebP et comparez.
2. Redimensionnez avant de compresser. Une photo de 4000 px affichée en 800 px de large transporte 25 fois plus de pixels que nécessaire. Redimensionnez d'abord à la taille d'affichage avec notre redimensionneur d'images — cela seul réduit souvent la taille du fichier de 80 %.
3. Réglez la qualité avec notre compresseur. Ajoutez l'image redimensionnée à notre compresseur d'images, réglez la qualité à 80 et comparez l'avant et l'après. Pour la plupart des photos, la qualité 75–85 est visuellement indiscernable de 100 pour une fraction de la taille.
Jusqu'où pouvez-vous aller ?
Voici ma règle pratique issue de la compression de milliers d'images :
- Photos hero/bannière : WebP à qualité 80 — nettes sur les écrans retina, généralement 100–200 Ko
- Images de contenu de blog : WebP à qualité 75 — environ 50–100 Ko chacune
- Miniatures : WebP à qualité 70 — moins de 30 Ko
- Logos/icônes : SVG si possible, sinon PNG — jamais JPEG pour ceux-ci
Avec perte vs sans perte : ce qui se passe réellement
La compression avec perte (JPEG, WebP à qualité <100) élimine définitivement des données d'image que l'œil humain remarque à peine — les subtils dégradés de couleurs sont simplifiés. Sans perte (PNG, WebP à 100) préserve chaque pixel mais produit des fichiers plus volumineux. Pour le web, avec perte à des réglages de qualité raisonnables gagne à tous les coups. La « perte » est invisible ; le gain de vitesse est très visible dans votre taux de rebond.
Questions fréquentes
- La compression de mes images va-t-elle les rendre floues ?
- Non, si vous le faites bien. À qualité WebP 80, les différences avec l'original sont essentiellement invisibles à l'œil humain. Les problèmes n'apparaissent qu'en dessous de qualité 60 ou quand vous agrandissez une petite image. Conservez toujours vos originaux en sauvegarde.
- Faut-il compresser le PNG ou plutôt convertir en WebP ?
- Convertissez en WebP. Un PNG compressé au maximum reste généralement 2 à 3 fois plus volumineux qu'un WebP à qualité visuelle équivalente. La seule raison de garder le PNG est quand vous avez besoin d'une compatibilité maximale avec des logiciels très anciens.
- La compression d'images affecte-t-elle le SEO ?
- Oui, positivement. Google utilise la vitesse des pages (Core Web Vitals) comme facteur de classement, et les images sont généralement le plus gros contributeur aux chargements lents. Les images compressées réduisent aussi les coûts de bande passante.