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

FormatMédiaRemarques
JPEGPhotosAvec perte, basé sur la DCT, le format d'image avec perte le plus répandu selon MDN
WebPImagesAvec ou sans perte, fixe et animé
AVIFImagesAvec ou sans perte, pas de rendu progressif, une solution de repli est nécessaire pour les anciens navigateurs
JPEG XLImagesAvec ou sans perte, affichage progressif, solution de repli nécessaire
MP3, AACAudioSuppriment les sons que l'oreille masque ou perçoit à peine
H.264, VP9, AV1VidéoPré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 perteSans perte
ReconstructionApproximativeExacte, bit pour bit
TailleGénéralement bien plus petitePlus grande
Idéal pourPhotos, audio, vidéoTexte, code, données, logos, captures d'écran
ExemplesJPEG, MP3, H.264PNG, FLAC, gzip
RéversibleNonOui

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.

Quelle est la vitesse de votre site web?

Augmentez sa vitesse et son référencement naturel de manière transparente avec notre Test de Vitesse gratuit.

Test gratuit de vitesse du site Web

Analyser la vitesse de chargement de votre site Web et améliorer ses performances avec notre outil gratuit de vérification de la vitesse de la page.