Comment compresser des images pour le web sans perdre en qualité

Les images représentent 50 à 60 % de la taille totale moyenne d'une page web. Les compresser avant de les téléverser est l'une des optimisations à plus fort impact que vous puissiez apporter à la vitesse de votre site — et par extension, à votre classement SEO et à l'expérience utilisateur.

Pourquoi la compression d'images compte pour le SEO

Les Core Web Vitals de Google — en particulier le Largest Contentful Paint (LCP) — mesurent la vitesse à laquelle le contenu principal de votre page se charge. Les images non optimisées sont la cause la plus fréquente de mauvais scores LCP. La vitesse de page est un facteur de classement confirmé, et l'outil PageSpeed Insights de Google signale explicitement les images non optimisées comme des « opportunités » d'amélioration de votre score.

Quel réglage de qualité devriez-vous utiliser ?

Le réglage de qualité contrôle l'agressivité de la compression de l'image :

• 90–100 % : Quasi sans perte. Les fichiers restent volumineux. À utiliser uniquement pour des ressources de qualité impression.
• 80–85 % : Le point optimal pour la plupart des images web. Les fichiers sont 50 à 70 % plus légers que l'original sans différence visible à l'écran.
• 70–75 % : Compression agressive. Fonctionne bien pour les petites miniatures et images d'arrière-plan. Peut présenter de légers artefacts en observant de près.
• En dessous de 60 % : Perte de qualité visible. À utiliser uniquement pour de très petites prévisualisations ou espaces réservés.

Pour la plupart des images de site web, 80 % de qualité est le meilleur point de départ.

Le bon format fait plus de différence que le niveau de compression

Choisir le bon format a plus d'impact que d'ajuster le curseur de qualité :

• Photos : Utilisez le WebP (25 à 35 % plus léger que le JPG à qualité égale) ou le JPG à 80 %.
• Logos et icônes : Utilisez le SVG si possible. Pour les formats raster, utilisez le WebP ou le PNG.
• Illustrations avec des couleurs unies : PNG ou WebP sans perte.
• Images animées : Animation WebP ou formats vidéo (beaucoup plus légers que le GIF).

Étape par étape : compresser des images pour votre site web

1. Redimensionnez d'abord — Ne téléversez pas une photo de 4000px de large si votre site l'affiche seulement à 800px. Utilisez notre Redimensionneur d'images pour l'ajuster d'abord à la taille d'affichage réelle.
2. Choisissez le bon format — Convertissez le JPG en WebP ou le PNG en WebP pour les meilleurs résultats sur le web.
3. Compressez — Utilisez notre Compresseur d'images avec une qualité de 75 à 80 %.
4. Définissez les bonnes dimensions — Utilisez les attributs width et height sur vos balises <img> pour éviter les décalages de mise en page.
5. Utilisez le chargement différé — Ajoutez loading="lazy" aux images sous la ligne de flottaison pour qu'elles ne se chargent que lorsqu'elles sont visibles.

Utilisateurs de WordPress : compression automatique

Si vous utilisez WordPress, installez Smush ou ShortPixel pour compresser automatiquement les images lors du téléversement. Les deux proposent des formules gratuites qui conviennent à la plupart des petits sites. Ils servent également automatiquement le WebP pour les navigateurs compatibles.

Combien pouvez-vous économiser ?

Exemple concret : un article de blog avec 5 photos non optimisées de 2 Mo chacune = 10 Mo de poids de page. Après redimensionnement à 1200px de large et compression en WebP à 80 % :

• Chaque image : ~80–120 Ko
• Total : ~500 Ko
• Économie : plus de 95 %

C'est la différence entre une page qui se charge en 8 secondes sur une connexion mobile et une page qui se charge en moins d'une seconde.