Comment compresser ses images pour le web sans perte de qualité
Les images représentent près de la moitié du poids total d'une page web moyenne. Une seule image hero non optimisée peut ajouter 2 à 5 Mo à votre page, poussant les temps de chargement au-delà du seuil où les utilisateurs quittent le site. La solution est la compression, mais mal la faire signifie des photos floues et des artefacts visibles.
Ce guide explique comment compresser efficacement vos images, quels réglages de qualité utiliser pour chaque format, et comment vérifier vos résultats.
Pourquoi la compression d'images est importante
Le poids d'une page impacte directement trois éléments clés pour tout site web :
La vitesse. Une page de 3 Mo se charge en environ 2,4 secondes sur une connexion mobile 4G. Réduisez les images de 50% et ce temps tombe à 1,5 seconde. Les utilisateurs perçoivent la différence, et Google la mesure via le Largest Contentful Paint (LCP).
Les coûts de bande passante. Chaque octet que vous servez a un coût, que ce soit via votre hébergeur, votre CDN ou le forfait data de vos utilisateurs. Pour un site servant 100 000 pages vues par mois avec 2 Mo d'images par page, une réduction de 40% économise environ 80 Go de transfert par mois.
Les Core Web Vitals. La métrique LCP de Google est directement liée à la vitesse de chargement des images. Les pages avec un LCP inférieur à 2,5 secondes sont notées "bonnes" et bénéficient d'un avantage de classement. Les images sont l'élément LCP sur environ 70% des pages web.
Avec ou sans perte | Aperçu rapide
Il existe deux types fondamentaux de compression d'image :
La compression avec perte supprime définitivement des informations visuelles pour réduire la taille du fichier. Les données supprimées sont choisies pour minimiser l'impact perceptible, typiquement des détails haute fréquence auxquels l'oeil humain est moins sensible. Le JPG et le WebP lossy utilisent cette approche. Le compromis est contrôlé par un paramètre de qualité : une qualité plus basse produit des fichiers plus petits mais une dégradation plus visible.
La compression sans perte réduit la taille du fichier en encodant les données plus efficacement sans supprimer aucune information. L'image décompressée est identique pixel par pixel à l'original. Le PNG et le WebP lossless utilisent cette approche. Le compromis est que les fichiers sont significativement plus volumineux qu'en compression avec perte.
Pour les images web, la compression avec perte est presque toujours le bon choix. Les économies de taille sont considérables (50 à 80% par rapport à l'original non compressé), et aux réglages de qualité appropriés, la différence visuelle est invisible à l'oeil nu.
Quel niveau de qualité viser ?
Les réglages de qualité vont de 1 (compression maximale, pire qualité) à 100 (compression minimale, meilleure qualité). Le bon réglage dépend du type d'image et de son rôle sur la page.
Pour le contenu photographique (JPG et WebP avec perte) :
| Qualité | Économies typiques | Impact visuel | Adapté pour |
|---|---|---|---|
| 85-95 | 20-40% | Aucun | Images hero, portfolios |
| 75-84 | 40-55% | Aucun à distance normale | Images web standard |
| 60-74 | 55-70% | Mineur en examinant de près | Miniatures, fonds |
| Moins de 60 | 70%+ | Artefacts visibles | Non recommandé pour la plupart des usages |
La qualité 80 est le réglage par défaut recommandé. Elle offre une réduction de taille substantielle sans différence de qualité visible pour du contenu photographique aux tailles d'affichage web habituelles.
Pour l'AVIF :
L'AVIF est plus efficace que le JPG et le WebP, vous pouvez donc utiliser des valeurs de qualité plus basses pour un résultat équivalent. Un AVIF à qualité 65-70 égale visuellement un JPG à qualité 85, pour environ la moitié de la taille.
Pour le PNG (sans perte) :
Le PNG n'a pas de paramètre de qualité au sens traditionnel. La compression PNG est toujours sans perte, mais vous pouvez contrôler l'effort de compression (l'intensité du travail de l'encodeur pour trouver la représentation la plus compacte). Un effort plus élevé signifie un encodage plus lent mais des fichiers plus petits, sans différence de qualité.
Compression par format | JPG, PNG, WebP, AVIF
Voici les performances de chaque format sur une photographie typique de 1200x800 :
| Format | Réglage | Taille | vs JPG Q100 original |
|---|---|---|---|
| JPG Q100 | Qualité maximale | 850 Ko | Référence |
| JPG Q85 | Standard web | 350 Ko | -59% |
| JPG Q75 | Agressif | 250 Ko | -71% |
| WebP Q80 | Standard web | 240 Ko | -72% |
| WebP Q70 | Agressif | 180 Ko | -79% |
| AVIF Q70 | Standard web | 170 Ko | -80% |
| AVIF Q55 | Agressif | 120 Ko | -86% |
Le résultat : passer de JPG Q85 à WebP Q80 économise environ 30%. Passer à AVIF Q70 économise environ 50%. Combiner le changement de format avec l'optimisation de la qualité donne les gains les plus importants.
Pour les graphiques, icônes et captures d'écran :
| Format | Mode | Taille |
|---|---|---|
| PNG (non optimisé) | Sans perte | 120 Ko |
| PNG (optimisé) | Sans perte | 85 Ko |
| WebP sans perte | Sans perte | 65 Ko |
| WebP Q90 | Avec perte | 25 Ko |
Pour les graphiques à bords nets où la précision pixel compte, utilisez le WebP sans perte. Pour les graphiques où de légers artefacts de compression sont acceptables, le WebP avec perte à Q90 produit des fichiers nettement plus légers.
Comment compresser ses images en ligne
La façon la plus rapide de compresser des images est d'utiliser un outil en ligne. Aucune installation, aucune ligne de commande.
Avec Morphix :
- Rendez-vous sur la page de compression pour votre format : Compresser JPG, Compresser PNG, ou Compresser WebP.
- Déposez votre fichier image dans la zone d'upload.
- Ajustez le curseur de qualité au niveau souhaité.
- Cliquez sur Compresser.
- Téléchargez le fichier optimisé.
Vous pouvez aussi convertir et compresser en une seule étape en utilisant les outils de conversion (JPG vers WebP, JPG vers AVIF). Le réglage de qualité s'applique pendant la conversion, vous obtenez donc à la fois l'optimisation de format et la compression en une seule opération.
Mesurer les résultats de la compression
La compression n'est utile que si le résultat a un bon rendu. Voici comment vérifier vos résultats :
Inspection visuelle. Ouvrez l'image originale et l'image compressée côte à côte à 100% de zoom. Vérifiez les zones avec des textures fines (cheveux, tissu, feuillage), les bords nets (texte, logos) et les dégradés lisses (ciel, arrière-plans). Si vous ne voyez pas la différence, la compression est suffisante.
Comparaison de taille. Comparez les tailles de fichier original et compressé. Pour les images web, visez au moins 30% de réduction. Si vous obtenez moins de 20%, votre image source est probablement déjà bien compressée.
Lighthouse et PageSpeed Insights. Ces outils analysent vos pages et signalent les images qui pourraient être davantage compressées. Ils estiment aussi les économies potentielles en kilo-octets et en temps de chargement.
SSIM (Structural Similarity Index). Pour une validation technique, le SSIM compare la similarité structurelle entre deux images. Un score supérieur à 0,95 signifie que l'image compressée est virtuellement indiscernable de l'original. La plupart des images web bien compressées obtiennent un score entre 0,93 et 0,98.
Compressez vos images
Morphix compresse vos images JPG, PNG et WebP directement dans le navigateur. Aucune inscription requise avec l'offre gratuite.