Comment fonctionne la compression d’image : JPEG, PNG, WebP et AVIF expliqués

La réponse pratique

La compression d’image n’est pas un concours où un format gagne à chaque fois. C’est un ensemble d’arbitrages : quels détails vous pouvez jeter, quels détails doivent rester exacts, combien de CPU vous pouvez dépenser et où le fichier devra fonctionner après export.

Utilisez ceci comme point de départ pratique :

• Utilisez JPEG pour les photos qui exigent une compatibilité maximale, surtout en mail, téléchargements, applications anciennes, portails d’impression et formulaires d’envoi stricts.
• Utilisez PNG pour les captures d’écran, captures d’interface, schémas, logos et graphiques transparents quand les pixels doivent rester exacts.
• Utilisez WebP comme format web moderne au quotidien quand vous voulez des fichiers plus petits que JPEG ou PNG avec un large support navigateur.
• Utilisez AVIF pour les grandes images photographiques à fort trafic quand votre site peut servir des fallbacks WebP ou JPEG et tolérer un encodage plus lent.

Cela paraît simple, mais les détails comptent. Une photo produit, une photo de passeport, une capture d’écran de logiciel et un filigrane transparent sont tous des « images ». Ils ne se compressent pas de la même façon.

Choisissez par l’usage, pas par l’extension

Avant d’entrer dans les codecs, décidez à quoi l’image doit servir :

C’est aussi pourquoi les conseils sur les formats peuvent sembler contradictoires. « Utilisez AVIF, il est plus petit » peut être un bon conseil pour une image hero dans un build de site statique. Le même conseil peut être mauvais pour une image envoyée par un client qui doit être acceptée par un formulaire administratif, un client mail ou un CMS ancien.

Les deux familles de compression

Chaque format image de ce guide utilise soit la compression sans perte, soit la compression avec perte, soit les deux.

La compression sans perte supprime la redondance mathématique et reconstruit exactement les mêmes pixels au décodage. Si une capture a un fond blanc, des couleurs d’interface répétées et des bords droits répétés, un format sans perte peut décrire ces motifs de manière compacte. PNG est le format web sans perte classique. WebP dispose aussi d’un mode sans perte.

La compression avec perte jette définitivement des informations d’image pour réduire le fichier. L’astuce consiste à jeter les informations que l’œil est le moins susceptible de remarquer à la taille finale d’affichage. JPEG est avec perte. WebP et AVIF peuvent être avec ou sans perte, mais la plupart des livraisons web utilisent leurs modes avec perte pour les photos.

L’erreur à éviter est de traiter « avec perte » comme automatiquement mauvais et « sans perte » comme automatiquement professionnel. Pour une photo de blog en 1600 px, un WebP avec perte soigneusement compressé peut paraître inchangé dans la page et économiser beaucoup de bande passante. Pour une capture logiciel avec du petit texte de menu, un export avec perte peut paraître flou même si le poids de fichier semble excellent.

Les quatre formats en un coup d’œil

Le motif n’est pas « le plus récent gagne toujours ». Les formats plus récents peuvent faire davantage d’analyse et empaqueter les données plus efficacement, mais cela peut coûter du temps d’encodage, du temps de QA et de la complexité de fallbacks.

Pourquoi le même chiffre de qualité n’est pas la même qualité

Un JPEG enregistré en qualité 80 et un WebP enregistré en qualité 80 n’utilisent pas la même échelle. Le nombre est passé au modèle propre à chaque encodeur. Il agit sur des décisions internes différentes et peut être mappé différemment selon les outils.

C’est pourquoi une compression pratique nécessite deux vérifications :

1. Regardez l’image à la taille où elle apparaîtra. Une vignette de fiche produit doit être jugée comme une vignette de fiche produit, pas à 400 % de zoom.
2. Comparez les octets une fois que l’image a les bonnes dimensions. Redimensionner un original d’appareil de 5000 px vers une image web de 1600 px économise en général plus que de tirer trop bas le curseur de qualité.

Si vous convertissez un dossier par lot, testez quelques cas difficiles avant de tout exporter : un visage, un ciel, une ombre profonde, une capture chargée de texte, un bord transparent et une photo d’intérieur bruitée.

JPEG : pourquoi les photos deviennent petites, et pourquoi le texte devient laid

JPEG est le vieux cheval de bataille des images photographiques parce qu’il est bâti autour du comportement des photos. La Library of Congress note que la famille JPEG est couramment utilisée pour les images à tons continus, en pleine couleur et en niveaux de gris, et que le procédé classique repose sur une transformation par blocs 8×8. En clair : JPEG découpe l’image en petits blocs, transforme chaque bloc en informations fréquentielles, puis quantifie les détails que l’observateur est le moins susceptible de remarquer.

Ça marche bien pour :

• les visages, vêtements, bâtiments, paysages et photos culinaires ;
• les dégradés naturels comme le ciel, les ombres et les tons de peau ;
• les images qui n’ont pas besoin de pixels transparents ;
• les fichiers qui doivent s’ouvrir presque partout.

Ça marche mal pour :

• le petit texte dans les captures d’écran ;
• les icônes et logos aux bords nets ;
• les schémas en aplats de couleurs ;
• les fichiers qui seront édités et ré-exportés à répétition ;
• les images transparentes, car JPEG n’a pas de canal alpha.

Les artefacts JPEG les plus reconnaissables sont les bords de blocs, le ringing autour du texte, le bruit de moustiques autour des détails très contrastés et les bandes dans les dégradés doux. Ils ne sont pas aléatoires. Ce sont les effets secondaires visibles de la compression avec perte par blocs.

Forces

• Support très large sur navigateurs, systèmes, applications, clients mail, formulaires et prestataires
• Efficace pour les photos d’appareil et autres images à tons continus
• Rapide à encoder et à décoder dans les flux habituels
• Facile à prévisualiser, à joindre, à envoyer et à partager

Faiblesses

• Aucun support de transparence
• Artefacts autour du texte, des bords et des graphiques en aplat
• Les exports avec perte répétés peuvent cumuler les dégâts
• Souvent plus lourd que WebP ou AVIF à qualité visible équivalente pour les photos web

Quand utiliser JPEG

Utilisez JPEG quand la compatibilité importe plus que les derniers kilooctets : envois de photos de passeport, portails documentaires, pièces jointes mail, portails fournisseurs, imprimeurs, anciens CMS et sources <img> de fallback. Utilisez-le aussi quand le fichier est surtout une photo et que la transparence n’est pas nécessaire.

PNG : pourquoi les captures restent nettes, et pourquoi les photos deviennent énormes

PNG a été conçu pour des images matricielles portables et sans perte. La spécification PNG du W3C couvre le PNG statique et le PNG animé, et le format prend en charge la couleur indexée, les niveaux de gris, le truecolor et une transparence alpha optionnelle.

Pour le travail web quotidien, l’essentiel est simple : PNG conserve les pixels. Il peut filtrer les lignes de l’image pour les rendre plus prévisibles, puis compresser le résultat avec DEFLATE. Si l’image comporte des couleurs répétées et des limites franches, ça fonctionne à merveille.

Bons candidats pour PNG :

• captures logiciel avec petit texte ;
• schémas d’UI et tableaux comparatifs exportés en image ;
• logos quand SVG n’est pas disponible ;
• superpositions transparentes, tampons et filigranes ;
• graphiques susceptibles d’être ré-édités.

Mauvais candidats pour PNG :

• photos d’appareil ;
• grandes images hero de sites web ;
• photos produit à texture naturelle ;
• images de galerie où le poids compte plus que les pixels exacts.

Une photo en PNG est souvent énorme parce que PNG fait son travail. Il préserve le bruit, la texture fine, les infimes variations du capteur et chaque changement subtil de couleur qu’un codec photo avec perte simplifierait.

Forces

• Reproduction des pixels sans perte
• Transparence par canal alpha
• Texte net et bords francs
• Compression puissante pour les graphiques en aplat et répétitifs
• Format fiable pour les masters éditables et les flux avec transparence

Faiblesses

• Fichiers volumineux pour les photographies
• Pas de mode avec perte dans les flux PNG classiques
• Peut être plus lourd que WebP pour les graphiques web transparents quand WebP est accepté

Quand utiliser PNG

Utilisez PNG quand les pixels exacts comptent : captures, documentation d’UI, schémas, graphiques simples et assets transparents qui ont besoin d’un support prévisible. N’utilisez pas PNG par défaut pour les photos d’appareil, sauf besoin délibéré d’une copie de travail sans perte.

WebP : le défaut web moderne pratique

WebP est utile parce qu’il couvre plusieurs usages en un seul format. La documentation de Google décrit WebP comme prenant en charge la compression avec perte, la compression sans perte, la transparence, l’animation, les métadonnées et les profils de couleurs. Cela le rend plus flexible que JPEG et souvent plus petit que PNG pour la diffusion web.

Le WebP avec perte s’appuie sur un codage prédictif de type VP8 plutôt que sur le flux plus ancien uniquement DCT de JPEG. Le WebP sans perte utilise un autre ensemble de transformations et de codage entropique. Le résultat pratique important, c’est que WebP est souvent un bon défaut pour les bibliothèques d’images de site : photos de blog, grilles produit, vignettes, illustrations légères et beaucoup d’assets transparents.

Mais WebP n’est pas magique et ce n’est pas le meilleur fichier à envoyer partout. Un navigateur peut prendre WebP en charge tandis qu’un client mail, un formulaire d’envoi, une vieille application de design, une plateforme sociale ou un flux d’impression le refuse. C’est pour ça que JPEG et PNG comptent encore comme formats de livraison ou de compatibilité.

Forces

• Souvent plus petit que JPEG pour les photos à qualité visible équivalente
• Prend en charge la transparence alpha
• Prend en charge les modes avec et sans perte
• Large support des navigateurs modernes
• Encodage rapide par rapport à AVIF

Faiblesses

• Encore refusé par certains clients mail, formulaires, vieilles apps, plugins CMS et flux d’impression
• Pas un vrai remplacement des logos SVG ni des fichiers sources éditables de design
• Peut être plus lourd qu’AVIF pour certaines grandes images photographiques

Quand utiliser WebP

Utilisez WebP pour l’essentiel de la diffusion d’images de sites modernes quand vous contrôlez la page. C’est un solide défaut pour les images de blog, les photos de cartes produit, les vignettes et beaucoup d’assets web transparents. Gardez JPEG ou PNG disponibles quand l’image quitte votre site pour le système de quelqu’un d’autre.

AVIF : l’option de haute compression qui exige un pipeline

AVIF stocke des données d’image codées en AV1 dans un format d’image basé sur HEIF. La spécification AVIF prend en charge les images SDR et HDR, les cas d’usage à gamut large, les images auxiliaires comme alpha et des fonctionnalités de codage d’image plus avancées. web.dev note aussi que les gains de compression d’AVIF dépendent du contenu, des réglages de l’encodeur et de la cible de qualité.

Pour les équipes web classiques, l’histoire pratique est celle-ci : AVIF peut être excellent pour les grandes photos, mais c’est davantage un format de pipeline qu’un format de partage occasionnel. Il peut être plus long à encoder, la prévisualisation dans les outils plus anciens peut traîner, et la gestion des fallbacks importe davantage.

Bons candidats pour AVIF :

• grandes photos hero ;
• landing pages riches en photos ;
• galeries éditoriales ;
• images à fort trafic servies de nombreuses fois après un seul encodage ;
• images où HDR, forte profondeur de bits ou gamut large font partie du flux.

Candidats faibles pour AVIF :

• formulaires d’envoi stricts ;
• pièces jointes mail ;
• images que des collègues doivent ouvrir dans de vieux outils ;
• toutes petites vignettes où les gains ne justifient pas la complexité du pipeline ;
• captures avec du petit texte, sauf test soigneux.

Forces

• Compression souvent excellente pour les photographies et images complexes
• Transparence alpha, HDR et gamut large
• Utile comme première source dans une pile <picture> moderne
• Bien adapté à la génération d’images au build ou en CDN

Faiblesses

• L’encodage peut être lent, surtout sur de gros lots
• Le support des outils est moins prévisible qu’avec JPEG, PNG ou WebP
• Nécessite un fallback WebP, JPEG ou PNG pour une diffusion de production plus sûre

Quand utiliser AVIF

Utilisez AVIF quand l’image est assez grande et assez répétée pour que des octets en moins justifient le travail de pipeline supplémentaire. Une image hero sur une page d’accueil à fort trafic est un bon candidat. Une icône 90 px, une pièce jointe mail ponctuelle ou un formulaire d’envoi administratif, généralement non.

Pourquoi PNG peut battre JPEG sur les captures d’écran

Une surprise fréquente : une capture en PNG peut être plus petite et plus propre que la même capture en JPEG.

Cela arrive parce que les captures sont souvent pleines de structure répétée. Un fond blanc de document, une barre d’outils grise, du texte noir bien droit, quelques couleurs d’icônes et des espacements d’UI répétés sont faciles à décrire pour une compression sans perte. JPEG ne sait pas que le texte doit rester exact. Il essaie de simplifier l’image comme une photo, et le résultat peut être un fichier pas beaucoup plus petit et plus laid autour des lettres et des bords.

Si la capture est surtout une photo, WebP ou JPEG peuvent gagner. Si elle est surtout interface, texte et aplats de couleur, commencez par PNG ou WebP sans perte.

Pourquoi les photos ont besoin de compression avec perte

Les photos d’appareil sont différentes. Elles contiennent du bruit de capteur, de la texture fine, des ombres douces, des dégradés irréguliers et des millions de petits changements d’un pixel à l’autre. La compression sans perte a moins de répétition à exploiter, donc elle ne peut souvent pas réduire assez le fichier pour la diffusion web.

Les formats photo avec perte marchent parce qu’un spectateur se soucie généralement du sujet, de la composition, des couleurs et de la netteté perçue, pas de chaque pixel d’origine. Un JPEG, WebP ou AVIF soigneusement compressé peut retirer des informations difficiles à voir à la taille finale.

Le danger, c’est d’aller trop loin. Des réglages de qualité faibles peuvent aplatir la peau, empâter les tissus, détruire le détail des feuillages, ajouter des bords de blocs ou créer des bandes dans les ciels et les ombres. Si ces zones comptent pour l’image, utilisez un réglage de qualité plus élevé ou un fichier d’affichage plus grand.

Utilisez des fallbacks pour la diffusion web moderne

Quand vous contrôlez un site, vous n’êtes pas obligé de choisir un seul format. Le motif classique en production consiste à servir d’abord le plus petit format moderne et à garder des fallbacks plus sûrs derrière.

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img
    src="/images/hero.jpg"
    alt="Photo produit en gros plan en lumière naturelle"
    width="1200"
    height="800"
  >
</picture>

Le navigateur utilise la première source qu’il prend en charge. Les navigateurs compatibles AVIF peuvent récupérer le fichier AVIF. Ceux qui ne gèrent pas AVIF peuvent tenter WebP. Les clients plus anciens ou plus stricts disposent toujours du fallback JPEG.

Utilisez PNG plutôt que JPEG comme fallback quand l’image doit garder la transparence ou un texte exact.

Un flux de compression pratique

Pour une image :

1. Partez de la source de plus haute qualité dont vous disposez.
2. Redimensionnez d’abord à la plus grande taille d’affichage réelle.
3. Choisissez le format selon l’usage de l’image.
4. Exportez un ou deux réglages de qualité.
5. Comparez le résultat sur la vraie page ou la destination d’envoi.
6. Conservez le fichier master pour ne pas avoir à recompresser la copie publiée.

Pour un dossier de site :

1. Choisissez un ensemble représentatif avant de convertir tout le lot.
2. Incluez des photos, des captures, des graphiques transparents, des vignettes et une image sombre difficile.
3. Testez WebP comme format moderne de base.
4. Testez AVIF uniquement là où l’économie d’octets comptera.
5. Gardez des fallbacks JPEG ou PNG pour les endroits qui en ont besoin.
6. Vérifiez le poids du fichier après redimensionnement, pas avant.

PhotoTools peut aider sur les étapes intermédiaires. Utilisez Redimensionner quand la source est trop grande pour la page, Compresser pour ajuster poids et qualité, et les convertisseurs de format quand une destination exige un type de fichier précis. La conversion et la compression se font dans votre navigateur, l’image n’est donc pas envoyée à un serveur pendant l’utilisation de l’outil.

Comment convertir entre formats

PhotoTools convertit entre JPG, PNG, WebP, AVIF et HEIC directement dans votre navigateur. Déposez vos images, choisissez le format cible, prévisualisez le résultat et téléchargez le nouveau fichier.

Utilisez le convertisseur en fonction de la destination :

• Besoin d’un fichier qui marche dans presque n’importe quel formulaire ou app ? Convertissez en JPEG.
• Besoin de transparence ou de pixels exacts de capture ? Convertissez en PNG ou WebP sans perte.
• Besoin d’une image web plus petite et le site l’accepte ? Convertissez en WebP.
• Besoin de la compression maximale pour un pipeline web contrôlé ? Testez AVIF avec fallback.

Une dernière règle sauve beaucoup de qualité d’image : ne faites pas des allers-retours répétés entre formats avec perte. Si une photo est partie d’un JPEG haute qualité, convertir JPEG en WebP pour livraison peut convenir. Reconvertir ce WebP en JPEG, l’éditer et le reconvertir, c’est là que les artefacts s’accumulent. Repartez de l’original dès que possible.