Tout savoir sur la compression d'image : lossy vs lossless

Qu'est-ce que la compression d'image ?

La compression d'image est le processus de réduction de la taille d'un fichier image tout en conservant une représentation visuelle acceptable. Sur le web, chaque octet économisé accélère le chargement des pages, améliore l'expérience utilisateur et favorise le référencement naturel (SEO).

Une image non compressée en format bitmap brut peut peser plusieurs mégaoctets. Un algorithme de compression analyse les données de pixels et cherche des redondances ou des informations peu perceptibles par l'œil humain pour les supprimer ou les réduire. Le résultat : un fichier bien plus léger, parfois jusqu'à 90 % plus petit.

Il existe deux grandes familles de compression :

• Lossless (sans perte) : chaque pixel est reconstruit à l'identique lors de la décompression.
• Lossy (avec perte) : certaines données sont définitivement supprimées pour gagner davantage de place.

Compression lossless : sans perte de données

La compression lossless garantit que l'image décompressée est strictement identique pixel par pixel à l'image originale. Aucune donnée n'est perdue : on utilise uniquement des mécanismes mathématiques réversibles.

Principe de fonctionnement

Les algorithmes lossless exploitent les redondances présentes dans les données. Par exemple, si une ligne de pixels contient 200 pixels blancs consécutifs, au lieu de stocker 200 fois la valeur blanche, on stocke "200 × blanc". C'est le principe du Run-Length Encoding (RLE).

D'autres algorithmes comme LZ77, LZ78 ou Huffman coding construisent des dictionnaires de séquences répétitives pour les encoder plus efficacement.

Formats lossless courants

• PNG : utilise le filtre Delta + algorithme DEFLATE (combinaison LZ77 + Huffman). Excellent pour les images avec du texte, des aplats de couleurs ou une transparence.
• GIF : utilise LZW (Lempel-Ziv-Welch), limité à 256 couleurs par image. Historiquement utilisé pour les animations simples.
• WebP lossless : algorithme VP8L, plus efficace que PNG (gains de 26 % en moyenne selon Google).
• AVIF lossless : basé sur AV1, très efficace mais encodage lent.
• TIFF non compressé ou avec LZW : utilisé en photographie professionnelle et en impression.

Limites du lossless

Les fichiers lossless restent significativement plus lourds que leurs équivalents lossy. Une photographie en PNG peut peser 5 à 10 fois plus que le même cliché en JPEG à qualité 80. Pour les photos, le lossless est rarement justifié sur le web.

Compression lossy : avec perte contrôlée

La compression lossy supprime définitivement des informations jugées peu perceptibles par l'œil humain. L'image décompressée n'est jamais identique à l'original, mais la différence peut être imperceptible à l'œil nu selon le niveau de compression choisi.

Comment la perte est-elle "contrôlée" ?

Les algorithmes lossy exploitent les limites de la perception visuelle humaine. L'œil est plus sensible aux variations de luminosité qu'aux variations de couleur. Il perçoit moins bien les détails fins dans les zones de forte texture. Ces observations psychovisuelles permettent de jeter certaines données sans impact visible.

Formats lossy courants

• JPEG : format dominant depuis 30 ans, basé sur la DCT (Discrete Cosine Transform). Excellent pour les photographies.
• WebP lossy : basé sur VP8, offre 25 à 34 % de gain sur JPEG à qualité équivalente.
• AVIF : basé sur AV1, compression supérieure à WebP mais encodage lent. Standard émergent en 2026.
• HEIC/HEIF : utilisé par Apple, basé sur HEVC. Excellent ratio qualité/poids, mais support limité sur le web.

Comment fonctionne la compression JPEG ?

Le format JPEG (Joint Photographic Experts Group) utilise un processus en plusieurs étapes sophistiqué pour atteindre des taux de compression élevés sur les photographies.

1. Conversion de l'espace colorimétrique

L'image RGB est convertie en espace YCbCr : Y représente la luminance (luminosité), Cb et Cr représentent la chrominance (couleur). L'œil humain étant plus sensible à la luminance, les canaux Cb et Cr peuvent être sous-échantillonnés (chroma subsampling 4:2:0) sans perte visuelle notable.

2. Découpage en blocs 8×8

L'image est découpée en blocs de 8×8 pixels. Chaque bloc est traité indépendamment. C'est pourquoi on voit apparaître des "carrés" dans les images JPEG très compressées : ce sont ces blocs qui deviennent visibles (artefacts de blocs).

3. Transformée en cosinus discrète (DCT)

Chaque bloc 8×8 est transformé par la DCT, qui convertit les valeurs de pixels en fréquences spatiales. Les basses fréquences (grandes zones de couleur uniforme) sont séparées des hautes fréquences (détails fins, contours).

4. Quantification

C'est ici que la perte intervient. Les coefficients de fréquence sont divisés par une table de quantification, puis arrondis à l'entier le plus proche. Les hautes fréquences (moins perceptibles) sont fortement quantifiées, ce qui élimine les détails fins. Le niveau de qualité JPEG contrôle directement ces tables de quantification.

5. Encodage entropique

Les coefficients quantifiés sont encodés avec Huffman coding ou arithmétique coding (JPEG lossless progressif). C'est une étape lossless qui réduit encore la taille du fichier.

Les artefacts JPEG

À faible qualité (en dessous de 60), les artefacts JPEG deviennent visibles :

• Artefacts de bloc : les frontières entre blocs 8×8 deviennent visibles
• Ringing : halos autour des contours nets
• Banding : dégradés qui deviennent des bandes de couleur
• Couleurs fausses : zones colorées dans des aplats supposément neutres

Compression WebP : lossy et lossless en un seul format

WebP est un format développé par Google, introduit en 2010 et basé sur le codec vidéo VP8. Il supporte nativement les modes lossy et lossless, la transparence et l'animation.

WebP lossy

Le mode lossy de WebP utilise une prédiction de blocs (similaire à la compression vidéo) : chaque bloc est prédit à partir des blocs voisins déjà encodés, et seule la différence (résidu) est stockée. Cette approche est plus efficace que la DCT du JPEG.

Résultat : à qualité visuelle équivalente, un WebP lossy est 25 à 34 % plus léger qu'un JPEG selon les études de Google.

WebP lossless

Le mode lossless (VP8L) utilise plusieurs techniques combinées : prédiction spatiale, transformation de couleur, soustraction de valeur verte, encodage par cache de couleurs et encodage Huffman. Il est en moyenne 26 % plus léger qu'un PNG de même qualité.

Support navigateur en 2026

WebP bénéficie d'un support universel en 2026 (99 %+ des navigateurs). Il est supporté depuis Safari 14 (2020), Chrome depuis 2011, Firefox depuis 2019. Il n'y a plus aucune raison de ne pas utiliser WebP comme format principal sur le web.

Trouver le bon équilibre qualité/poids

Il n'existe pas de réglage universel. L'équilibre optimal dépend du type d'image, de son usage et du contexte d'affichage.

Niveaux de qualité recommandés

• JPEG qualité 75-85 % : excellent compromis pour les photographies web. En dessous de 75, les artefacts deviennent perceptibles sur certaines images.
• WebP qualité 75-85 % : même règle que JPEG, avec un fichier plus léger à même réglage.
• AVIF qualité 60-75 % : AVIF étant plus efficace, un niveau plus bas donne une qualité visuelle similaire.
• PNG : la compression est toujours lossless, on ajuste uniquement le niveau de compression (0-9) qui n'affecte pas la qualité mais la vitesse d'encodage/décodage.

La méthode du seuil de perception

La bonne pratique est de réduire le niveau de qualité jusqu'au seuil où la dégradation devient perceptible, puis de remonter légèrement. Cette évaluation est subjective et dépend du contenu : une photo de paysage tolère plus de compression qu'un portrait ou une image de produit e-commerce.

Métriques objectives

Des métriques automatisées permettent de mesurer la qualité :

• SSIM (Structural Similarity Index) : mesure la similarité structurelle. Un SSIM > 0.95 est généralement imperceptible.
• PSNR (Peak Signal-to-Noise Ratio) : mesure le rapport signal/bruit. > 40 dB est excellent.
• DSSIM : variante du SSIM, plus corrélée à la perception humaine.

Outils de compression : en ligne vs local

Outils en ligne

Les outils en ligne sont idéaux pour un usage ponctuel ou sans installation :

• imgpact.com : compression JPEG, PNG, WebP, conversion de formats, sans limite de qualité
• Squoosh (Google) : interface comparative côte à côte, nombreux codecs
• TinyPNG / TinyJPG : simple et efficace, limité à 20 images gratuites

Outils en ligne de commande

Pour les workflows automatisés et le traitement en masse :

• cwebp : encodeur WebP officiel de Google. cwebp -q 80 input.jpg -o output.webp
• avifenc : encodeur AVIF. avifenc --quality 60 input.png output.avif
• imagemagick : couteau suisse, supporte tous les formats. convert -quality 80 input.jpg output.jpg
• mozjpeg : encodeur JPEG optimisé par Mozilla, 10-15 % de gain sur JPEG standard
• oxipng : optimiseur PNG lossless très efficace

Intégration dans un pipeline de build

Pour les projets web, intégrez la compression dans votre pipeline :

• webpack : plugins image-webpack-loader ou imagemin-webpack-plugin
• Vite : plugin vite-plugin-imagemin
• Next.js : optimisation automatique via le composant <Image>
• CDN : Cloudflare, Fastly et Cloudinary peuvent optimiser à la volée

Comparatif des algorithmes : JPEG vs WebP vs AVIF vs PNG

Voici un tableau comparatif des principaux formats en 2026 :

Performances réelles sur des cas typiques

Pour une photographie couleur 1920×1080 à qualité perceptuelle équivalente :

• JPEG à 80 % : ~180 KB (référence)
• WebP à 80 % : ~120 KB (−33 %)
• AVIF à 65 % : ~90 KB (−50 %)
• PNG : ~2,5 MB (non adapté pour les photos)

Cas pratiques : quand utiliser lossy, quand utiliser lossless

Utilisez lossless (PNG, WebP lossless) quand :

• L'image contient du texte ou des éléments graphiques nets (logos, icônes, diagrammes)
• La transparence est requise et doit être précise (pas de halo)
• L'image sera réutilisée et re-exportée (workflow de production)
• Il s'agit d'une capture d'écran d'interface utilisateur
• Les couleurs sont en aplat sans dégradé complexe

Utilisez lossy (JPEG, WebP lossy, AVIF) quand :

• L'image est une photographie avec des dégradés naturels
• Le poids du fichier est prioritaire (e-commerce, mobile, email)
• L'image ne sera pas modifiée et réexportée
• Il s'agit d'une image de fond ou décorative (moins critique visuellement)

Exemples concrets

• Photo produit e-commerce : WebP lossy 80 % → excellent compromis qualité/poids
• Logo SVG ou PNG : PNG lossless ou SVG → aucun artefact sur les contours
• Image hero d'accueil : AVIF ou WebP lossy → priorité au poids pour LCP
• Illustration vectorielle bitmap : PNG lossless → préserver les aplats nets
• Miniature YouTube/OG : JPEG 75 % ou WebP → taille petite, qualité suffisante
• Screenshot documentation : PNG lossless → texte parfaitement lisible
• Animation simple : WebP animé ou MP4 → bien plus léger que GIF