Les images representent plus de 50% du poids moyen d'une page web. Des photos et visuels non optimises ralentissent le chargement, degradent les Core Web Vitals et font fuir les visiteurs. Pourtant, la plupart des images peuvent etre compressees de 50 a 80% sans perte de qualite visible.
Dans ce guide, vous apprendrez comment fonctionne la compression d'images, quels formats choisir et comment appliquer les bons reglages selon votre usage. Que vous geriez un blog personnel ou un catalogue e-commerce, ces techniques s'appliquent partout.
→ Acceder directement a l'outil : Compresser vos images avec Morphix
Pourquoi la compression d'images est importante
La vitesse de chargement est un facteur de classement pour Google. Elle impacte aussi directement les taux de conversion : Amazon a montre que chaque 100ms de latence supplementaire coute 1% de chiffre d'affaires. Les images sont le levier le plus efficace.
Au-dela du SEO et des conversions, des images plus legeres reduisent vos couts de bande passante et la consommation de donnees de vos visiteurs. Les utilisateurs mobiles sur des connexions lentes apprecieront particulierement la difference.
Core Web Vitals et images
Le Largest Contentful Paint (LCP) est souvent determine par l'image hero. Un JPEG de 2Mo qui met 4 secondes a charger en 4G peut etre compresse a 300Ko en WebP et charger en moins d'une seconde. Cela seul peut faire passer votre LCP de "mauvais" a "bon".
Compression avec ou sans perte
Il existe deux familles de compression :
- Avec perte (lossy) : supprime les donnees que l'oeil humain ne percoit pas. JPEG, WebP lossy et AVIF sont des formats lossy. Vous controlez le compromis avec un curseur de qualite (75-85 est generalement ideal).
- Sans perte (lossless) : reduit la taille sans supprimer de donnees. PNG et WebP lossless en sont des exemples. Les gains sont plus faibles (10-40%) mais le resultat est identique au pixel pres.
Regle generale : utilisez la compression lossy pour les photos et images complexes, lossless pour les captures d'ecran, logos et graphiques avec du texte ou des bords nets.
Choisir le bon format
| Format | Ideal pour | Support navigateur | Gain typique vs JPEG |
|---|---|---|---|
| WebP | Photos, visuels, transparence | Tous navigateurs modernes | 25-35% |
| AVIF | Photos, contenu HDR | Chrome, Firefox, Safari 16+ | 40-50% |
| JPEG | Compatibilite universelle | Partout | Reference |
| PNG | Sans perte, transparence, captures | Partout | N/A (usage different) |
Si votre audience utilise des navigateurs modernes, WebP est le choix le plus sur par defaut. Pour une compression maximale avec un support legerement plus restreint, optez pour AVIF.
Workflow de compression etape par etape
1. Auditez vos images actuelles
Utilisez l'onglet Reseau des DevTools de votre navigateur et triez par taille. Identifiez les images les plus lourdes. Des outils comme Lighthouse ou PageSpeed Insights signalent les images specifiques a optimiser.
2. Redimensionnez avant de compresser
La compression seule ne suffit pas si votre image source fait 4000px de large mais s'affiche a 800px. Redimensionnez toujours aux dimensions d'affichage reelles d'abord, puis compressez. Cela seul peut economiser plus de 70%.
3. Choisissez le bon niveau de qualite
Pour la plupart des photographies, la qualite 80 offre le meilleur rapport taille/qualite. En dessous de 70, vous commencerez a voir des artefacts. Au-dessus de 90, la taille augmente rapidement pour un gain visuel negligeable.
4. Convertissez vers un format moderne
Passez du JPEG au WebP ou AVIF. Meme a qualite percue equivalente, les codecs modernes produisent des fichiers significativement plus legers grace a un meilleur codage entropique et de meilleurs modeles de prediction.
5. Automatisez pour la production
Pour les sites avec des mises en ligne frequentes, integrez la compression dans votre pipeline de build ou utilisez une API. Morphix propose une API REST pour convertir et compresser vos images par programmation.
Erreurs courantes a eviter
- Sur-compression : regler la qualite en dessous de 60 sur les photos introduit des artefacts visibles, surtout dans les degrades et les tons chair.
- Ignorer les dimensions : compresser une image de 5000px pour l'afficher a 300px gaspille de la bande passante. Redimensionnez d'abord.
- Oublier le responsive : utilisez
srcsetet<picture>pour servir des tailles differentes selon le viewport. - Ne pas supprimer les metadonnees : les donnees EXIF (GPS, modele d'appareil, horodatage) peuvent ajouter plus de 50Ko par fichier. Supprimez-les sauf raison specifique.
FAQ
Quel reglage de qualite utiliser pour les images web ?
Pour les photographies, la qualite 80 est le point ideal. Elle reduit la taille de 60-80% par rapport a la qualite 100 sans difference visible a l'ecran. Pour les images avec du texte ou des bords nets, utilisez la qualite 90 ou passez au PNG.
Le WebP est-il meilleur que le JPEG pour le web ?
Oui, dans la plupart des cas. Le WebP produit des fichiers 25-35% plus legers que le JPEG a qualite visuelle equivalente. Il supporte aussi la transparence (comme le PNG) et l'animation (comme le GIF). Tous les navigateurs modernes supportent le WebP depuis 2020.
De combien peut-on reduire la taille sans perte de qualite ?
Avec le bon format et les bons reglages, vous pouvez generalement reduire la taille de 50-80% sans aucune perte de qualite perceptible. Les gains exacts dependent de l'image source, de son contenu et du format cible.
Faut-il utiliser AVIF plutot que WebP ?
AVIF offre une meilleure compression (40-50% plus leger que JPEG) mais le support navigateur est plus restreint : Safari n'a ajoute le support complet qu'en version 16. Utilisez AVIF avec un fallback WebP ou JPEG pour un gain maximal avec une compatibilite universelle.
Faut-il compresser les images si on utilise un CDN ?
Oui. Un CDN accelere la distribution mais ne reduit pas la taille du fichier. Compresser les images avant de les charger sur un CDN vous donne les deux avantages : des fichiers plus legers distribues plus rapidement depuis les serveurs edge.