Sans perte ou avec perte : comment fonctionne la compression d’image

Un bed and breakfast à Champéry renouvelle son site web. La propriétaire a de belles photos : les chambres, le petit-déjeuner, les Dents du Midi dans la lumière du soir. Chaque photo pèse environ huit mégaoctets. Le nouveau site se charge avec une lenteur pénible sur le téléphone, et le logo, qu’elle a enregistré en JPG, a soudain des contours flous et tachetés.

Les deux problèmes tiennent à la compression, et les deux se résolvent quand on sait ce qui se passe réellement lorsqu’on compresse une image.

Deux façons de réduire une image

Les formats d’image économisent de la place de deux manières fondamentalement différentes :

• Sans perte. L’image est enregistrée de telle sorte que chaque pixel puisse être restitué exactement. On gagne de la place en décrivant habilement les répétitions — une surface d’une seule couleur demande moins d’informations qu’une surface chargée.
• Avec perte. Le format élimine des informations dont l’œil ne remarque guère l’absence. L’image paraît presque identique, mais elle n’est plus identique à l’original — et elle est souvent nettement plus légère.

MDN, la documentation pour développeurs de Mozilla, classe ainsi les formats courants :

Format	Compression	Usage décrit par MDN
JPEG	avec perte	Photos et images aux dégradés de couleur doux
PNG	sans perte	Reproduction exacte et transparence
GIF	sans perte, 256 couleurs au plus	Images simples et animations
WebP	avec ou sans perte	Images et animations, plus légères qu’en PNG ou JPEG
AVIF	avec ou sans perte	Images et animations avec une forte compression

Comment JPEG gagne de la place

JPEG est normalisé par la recommandation T.81 de l’UIT et c’est le format répandu pour les photos. Selon MDN, sa compression avec perte repose sur la transformée en cosinus discrète. En simplifiant : l’image est découpée en petits blocs, et dans chaque bloc, les détails fins que l’œil perçoit à peine sont décrits plus grossièrement ou supprimés.

La quantité supprimée dépend du niveau de qualité choisi à l’enregistrement. Il n’existe pas de chiffre juste unique ; web.dev, un site d’information de Google consacré au développement web, recommande d’essayer plusieurs niveaux de qualité et de chercher le meilleur compromis entre qualité et taille de fichier.

Pourquoi le texte et les contours en souffrent

Le logo aux contours tachetés a une raison simple. Les procédés avec perte sont faits pour les transitions douces, comme on en trouve dans les photos. Sur les contours nets — lettres, lignes, logos — les pertes se remarquent. MDN le décrit ainsi : dans les captures d’écran, les diagrammes, les logos et les dessins au trait, le flou et les franges colorées autour du texte et des contours nets sont bien visibles ; pour de telles images, MDN recommande un codage sans perte.

S’y ajoute la transparence : JPEG n’a pas de canal alpha. Un logo qui doit se détacher librement sur un fond coloré a besoin d’un format avec transparence, comme PNG, WebP ou AVIF — ou, pour les logos et les icônes qui doivent rester nets à toutes les tailles, d’un graphique vectoriel au format SVG.

WebP et AVIF

Les formats plus récents savent faire les deux : avec et sans perte. MDN donne des chiffres pour comparer : les images WebP avec perte sont en moyenne de 25 à 35 pour cent plus légères que les images JPEG de qualité semblable, et les images WebP sans perte sont typiquement 26 pour cent plus légères que les mêmes images au format PNG. Selon MDN, les images AVIF avec perte sont environ 50 pour cent plus légères que les images JPEG de qualité semblable.

Pour les images matricielles sur le web, MDN recommande donc en premier lieu WebP ou AVIF, avec PNG ou JPEG comme solution de repli pour les navigateurs qui ne prennent pas en charge ces formats. Pour l’envoi par e-mail ou pour les logiciels qui ne connaissent pas WebP et AVIF, JPEG reste souvent le choix le plus sûr.

La taille compte plus que le niveau

Les huit mégaoctets des photos viennent moins d’une mauvaise compression que de leur taille : un téléphone actuel prend des images larges de plusieurs milliers de pixels. Sur le site, elles apparaissent peut-être sur 1200 pixels de large.

Le calcul derrière est quadratique. web.dev relève qu’un écran à densité de pixels double n’a pas besoin de deux fois, mais de quatre fois plus de pixels — deux fois plus en largeur et deux fois plus en hauteur. À l’inverse : une image réduite à la moitié de sa largeur ne compte plus qu’un quart des pixels. Réduire l’image à la taille réellement nécessaire fait donc souvent gagner davantage que n’importe quel niveau de qualité.

Couleurs et profondeur de bits

Les formats diffèrent aussi par la finesse avec laquelle ils nuancent les couleurs. Selon MDN, JPEG enregistre 8 bits par composante de couleur, tandis que PNG peut aussi en enregistrer 16. Pour un site web, c’est rarement décisif. Pour des images qui seront encore fortement retouchées ou imprimées en haute qualité, la nuance plus fine peut compter — une raison de plus de conserver l’original dans un format sans perte ou dans le format de l’appareil photo.

Vérifier à l’œil

Le moyen le plus fiable de savoir si un niveau de qualité suffit est de regarder le résultat en taille réelle. Deux endroits trahissent les pertes en premier : les contours très contrastés, comme un cadre de fenêtre devant un ciel clair, et les grands dégradés doux comme un ciel du soir, où des paliers deviennent visibles si la compression est trop forte. Si les deux ont bonne allure, le niveau suffit en général.

Garder l’original

La compression avec perte a une propriété qu’il vaut la peine de connaître : ce qui a été éliminé ne revient pas. Chaque nouvel enregistrement en JPEG est une nouvelle compression avec perte, à partir d’une image qui a déjà perdu des informations. Qui retouche une image plusieurs fois et l’enregistre chaque fois en JPEG voit les pertes s’accumuler.

Il en découle une façon de travailler simple : conserver l’original tel quel et produire chaque version réduite ou compressée à partir de l’original, pas de la dernière version.

Ce que le fichier contient d’autre

Tous les octets d’un fichier image ne sont pas de l’image. Les photos prises avec un téléphone ou un appareil photo contiennent souvent des métadonnées : date de prise de vue, modèle de l’appareil, parfois le lieu exact. Pour le site du bed and breakfast, ces informations sont superflues — et le lieu de prise de vue d’une photo faite dans l’appartement privé de la propriétaire n’a de toute façon pas sa place en ligne. On peut les retirer en même temps que l’on compresse.

Les photos de l’iPhone

Qui photographie avec un iPhone a souvent ses originaux au format HEIC. Certains logiciels pour sites web attendent pourtant du JPG, du PNG ou du WebP. L’article Convertir un HEIC en JPG décrit ce qu’il faut savoir lors de la conversion.

Pour le bed and breakfast de Champéry

La propriétaire passe les images en revue une fois : les photos sont réduites à la largeur à laquelle elles apparaissent sur le site, doublée pour les écrans à haute densité de pixels, et enregistrées en WebP avec un niveau de qualité qu’elle a essayé sur trois exemples. Sa graphiste lui fournit le logo en SVG. Les originaux restent dans un dossier à part, et les métadonnées sont retirées.

Les outils image que nous développons compresseront et redimensionneront des images et les convertiront entre JPG, PNG, WebP et HEIC — traitées en Suisse, en mémoire, sans qu’aucune image ne soit conservée, et en mode confidentiel entièrement sur votre propre appareil.