Compression avec perte
La compression avec perte réduit les fichiers en supprimant des détails peu visibles. Fonctionnement de JPEG, WebP et AVIF et choix de la qualité.
Qu'est-ce que la compression avec perte ?
La compression avec perte réduit la taille d'un fichier en supprimant définitivement des informations que l'œil ou l'oreille remarquent difficilement. Impossible de retrouver l'original : le décodage produit une approximation. En échange, les fichiers sont bien plus petits qu'avec la compression sans perte, c'est pourquoi JPEG, MP3 et la plupart des vidéos l'utilisent. Le réglage de qualité décide de ce qui est supprimé.
Comment fonctionne la compression avec perte
Les codecs avec perte suivent les mêmes trois étapes, avec des mathématiques différentes :
- Transformer. Les données sont converties sous une forme où le détail peut être classé par importance. JPEG, par exemple, repose sur la DCT et travaille sur des blocs d'image.
- Quantifier. Les détails les moins importants sont arrondis ou supprimés, d'après un modèle de la perception humaine (les différences de couleur très fines et les fréquences très élevées disparaissent en premier). C'est la seule étape avec perte, et le réglage de qualité la pilote.
- Codage entropique. Ce qui reste est empaqueté par un passage sans perte, selon le même principe que les compresseurs sans perte.
Comme les données supprimées sont perdues, réenregistrer avec perte un fichier déjà compressé avec perte en retire un peu plus à chaque fois. Modifiez toujours à partir de l'original et exportez une seule fois.
Formats avec perte courants
| Format | Média | Remarques |
|---|---|---|
| JPEG | Photos | Avec perte, basé sur la DCT, le format d'image avec perte le plus répandu selon MDN |
| WebP | Images | Avec ou sans perte, fixe et animé |
| AVIF | Images | Avec ou sans perte, pas de rendu progressif, une solution de repli est nécessaire pour les anciens navigateurs |
| JPEG XL | Images | Avec ou sans perte, affichage progressif, solution de repli nécessaire |
| MP3, AAC | Audio | Suppriment les sons que l'oreille masque ou perçoit à peine |
| H.264, VP9, AV1 | Vidéo | Prédisent les images à partir des précédentes et quantifient la différence |
Le guide des images de MDN donne ces comparaisons de taille à qualité visuelle similaire : le WebP avec perte est en moyenne 25 à 35 % plus léger que le JPEG, et l'AVIF avec perte environ 50 % plus léger que le JPEG. Ce sont des valeurs typiques, pas des garanties : le résultat dépend de l'image et des réglages de l'encodeur.
Avec perte ou sans perte
| Avec perte | Sans perte | |
|---|---|---|
| Reconstruction | Approximative | Exacte, bit pour bit |
| Taille | Généralement bien plus petite | Plus grande |
| Idéal pour | Photos, audio, vidéo | Texte, code, données, logos, captures d'écran |
| Exemples | JPEG, MP3, H.264 | PNG, FLAC, gzip |
| Réversible | Non | Oui |
Règle pratique de MDN : pour les captures d'écran, schémas, logos et dessins au trait, préférez le sans perte, car le flou et les franges de couleur autour du texte et des bords nets se voient très bien. Les photographies et autres images à tons continus supportent en général la compression avec perte, car le détail supprimé est plus difficile à repérer.
Compression avec perte et performance web
Les images sont souvent les fichiers les plus lourds d'une page : le format et le réglage de qualité influencent donc directement le temps de téléchargement et des métriques comme le Largest Contentful Paint, l'une des Core Web Vitals. Servez les photos en WebP ou AVIF avec perte, avec un repli JPEG via <picture>, dimensionnez-les à l'espace qu'elles occupent (voir la taille d'image) et chargez celles qui sont hors écran avec le chargement différé.
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" width="1200" height="800" alt="Produit posé sur un bureau">
</picture>Notez que la compression avec perte s'applique à l'image elle-même. Les ressources textuelles comme HTML, CSS, JavaScript et JSON ne doivent jamais être compressées avec perte : elles sont compressées pendant le transfert avec un encodage sans perte. Pour un guide pratique, voir améliorer les images de votre site (en anglais).
Erreurs courantes
- Utiliser la compression avec perte pour des captures d'écran, logos et textes. Les bords bavent. Utilisez PNG, WebP sans perte ou SVG.
- Recompresser un JPEG encore et encore. Chaque enregistrement avec perte retire davantage. Gardez l'original et exportez à partir de lui.
- Une seule valeur de qualité pour toutes les images. Vérifiez à l'œil les images les plus détaillées. Un réglage invisible sur un paysage peut faire apparaître des blocs sur un dégradé.
- Oublier le repli. AVIF et JPEG XL ont besoin d'un repli pour les navigateurs qui ne les gèrent pas.
- Optimiser uniquement selon la taille du fichier. Un fichier minuscule mais laid coûte des conversions. Visez le plus petit fichier qui reste beau.
Vérifier le poids des images avec LoadFocus
Les choix de compression ne comptent que si vous les mesurez. Le suivi de la vitesse de page LoadFocus lance des audits Google Lighthouse sur ordinateur et mobile depuis 25 régions cloud et suit les Core Web Vitals dans le temps : vous voyez si un nouveau format améliore votre LCP. Pour une vérification ponctuelle, utilisez le vérificateur gratuit de Core Web Vitals. MDN propose un aperçu complet des types de fichiers image (en anglais).
Questions fréquentes : compression avec perte
JPEG est-il avec ou sans perte ?
JPEG est avec perte. PNG et GIF sont sans perte, et WebP, AVIF et JPEG XL peuvent être l'un ou l'autre.
Peut-on annuler une compression avec perte ?
Non. Les données supprimées sont perdues. Gardez le fichier original et exportez-en une copie compressée.
Quel réglage de qualité utiliser pour un JPEG ?
Il n'existe pas de valeur unique. Commencez au milieu ou dans la moitié haute de l'échelle de votre outil, comparez avec l'original à la taille d'affichage, baissez la valeur jusqu'à voir à peine une différence, puis remontez d'un cran.
Le WebP avec perte est-il meilleur que le JPEG ?
En général plus léger à qualité visuelle similaire : selon MDN, le WebP avec perte est en moyenne 25 à 35 % plus léger que le JPEG. Vérifiez la prise en charge par les navigateurs de votre public et gardez un repli JPEG via <picture> si besoin.
La compression avec perte nuit-elle au SEO ?
Pas en soi. Des images plus légères améliorent la vitesse de chargement, qui compte pour le référencement et l'expérience utilisateur, mais des images floues ou en blocs nuisent aux utilisateurs. Cherchez l'équilibre entre poids et qualité visible.
Pourquoi mon image compressée est-elle plus lourde ?
Vous avez peut-être réencodé un fichier déjà optimisé avec une qualité supérieure, ou converti un graphique plat vers un format photo. Comparez les tailles et essayez un format sans perte pour les graphiques.
Termes associés
- Que sont les connexions réseau dans la vitesse de page ?
- Qu'est-ce que la supervision réseau ?
- Qu'est-ce que l'observabilité ?
- Qu'est-ce que PageSpeed Insights (PSI) ?
- Prefetch de ressources : preload, preconnect
- Qu'est-ce que le préchargement des ressources (preload) ?
- Qu'est-ce que le regression testing ?
- Qu'est-ce que l'ingénierie de la fiabilité ?
Outils LoadFocus connexes
Mettez ce concept en pratique avec LoadFocus, la plateforme même qui propulse tout ce que vous venez de lire.