Bhinish Dhiman
Comment compresser un PNG sans perte de qualité
Traduit de l’original en anglais. Lire l’original
Passez le PNG dans un optimiseur sans perte comme oxipng : déposez-le dans le compresseur d'images, laissez l'effort PNG sur Fast (level 2), cliquez sur Compress, puis téléchargez. Chaque pixel ressort identique ; seul le stockage change. Dans nos mesures, cela a fait passer un graphique d'interface en aplats de 21 493 à 3 350 octets et une photo à 14% sous sa taille d'origine. Les outils qui réduisent le nombre de couleurs sont avec perte.
« Sans perte de qualité » s’affiche sur un grand nombre d’outils de compression, et la formule recouvre deux promesses qui ne sont pas les mêmes. L’une se vérifie jusqu’au dernier bit. L’autre est un jugement sur ce que vos yeux remarqueront. Ce guide tient la première, et indique précisément où elle s’arrête.
Ce que « sans perte de qualité » peut honnêtement signifier
La compression d’image sans perte consiste à réécrire la façon dont une image est stockée, c’est-à-dire le filtre appliqué à chaque ligne de balayage, la palette, la profondeur de bits et l’ordre du flux compressé, sans modifier la valeur d’un seul pixel. Le test est mécanique : décodez l’original et le résultat, comparez chaque canal de chaque pixel, et ils concordent. Un PNG offre beaucoup de marge pour cela, car le format autorise de nombreux encodages valides de la même image et un encodeur généraliste ne cherche pas le plus petit.
L’autre promesse s’appelle généralement « visuellement sans perte ». Il s’agit d’un résultat avec perte dont vous n’êtes pas censé voir les dégâts à une taille d’affichage normale. Le compromis peut être raisonnable, mais c’est une opinion sur une image sur un écran, pas une propriété qu’une vérification octet par octet peut confirmer. Une approche avec perte courante pour le PNG réduit l’image à une palette de 256 couleurs ou moins ; sur une photo qui en compte bien davantage, elle modifie des pixels par construction.
Pour compresser un PNG sans aucune perte, il vous faut donc un optimiseur, pas un ré-encodeur ni un réducteur de couleurs.
Le faire avec le compresseur d’images
- Ouvrez le compresseur d’images et cliquez sur Choose images (choisir des images), ou déposez ou collez vos PNG n’importe où sur la page. Leur nombre n’est pas limité ; chaque fichier devient une carte avec la mention Ready · oxipng, lossless (prêt, sans perte).
- Laissez More options (plus d’options) fermé : sa ligne de résumé indique PNG effort: Fast (level 2) · lossless at every level (effort rapide, niveau 2, sans perte à tous les niveaux). Harder (level 4) et Hardest (level 6) s’y trouvent si vous le souhaitez. Les trois sont sans perte, comme l’indique la note en dessous.
- Ignorez le curseur JPEG quality · MozJPEG. Il ne concerne que les fichiers JPEG, et la ligne en dessous indique combien vous en avez ajouté.
- Cliquez sur Compress 1 image (ou le nombre que vous avez mis en file). Les fichiers sont traités l’un après l’autre, pas en parallèle, pour qu’un téléphone ne manque pas de mémoire.
- Lisez chaque carte : la taille avant et après, un pourcentage et identical pixels (pixels identiques) pour tout ce qui est passé par oxipng. Before and after (avant et après) montre l’original et le résultat côte à côte ; avec plusieurs fichiers, choisissez une carte pour en voir un autre.
- Téléchargez avec Download sur une carte, ou avec le bouton qui a remplacé « Compress » (Download all … as .zip pour le lot), que la barre en bas de l’écran porte aussi.
Si un pourcentage passe au rouge avec un signe plus, ce fichier est ressorti plus lourd. Il était déjà compact et il n’y avait plus rien à gagner : gardez votre original.
Les mesures
Ces chiffres viennent des recherches menées pour l’outil : les mêmes pixels écrits de trois façons, puis comparés. La colonne canvas correspond à ce que vous obtenez quand un navigateur décode le PNG et demande à son propre encodeur de le réécrire, ce qui est le fonctionnement de la plupart des « compresseurs » dans le navigateur.
| Image | PNG source | Réenregistré via un canvas | Optimisé avec oxipng | oxipng par rapport à la source |
|---|---|---|---|---|
| Graphique d’interface en aplats | 21 493 o | 38 905 o (+81%) | 3 350 o | −84% |
| Photo, 1600 × 1000 | 1 006 774 o | 1 236 423 o (+23%) | 864 362 o | −14% |
Les chiffres d’oxipng correspondent à son niveau maximal, et chaque pixel des deux résultats concordait avec sa source. Le graphique en aplats est la bonne surprise : 21 493 ÷ 3 350 = 6.4 fois plus petit. La photo donne l’attente réaliste pour une image avec un vrai détail tonal. Trois images de test donnent une indication, pas une suite de benchmarks : tenez la tendance pour sûre, et les pourcentages exacts pour un échantillon.
L’effort achète du temps de recherche, pas des pixels
Les niveaux du menu n’échangent pas de la qualité contre de la taille. Le résultat est sans perte à tous les niveaux ; un niveau plus élevé cherche simplement plus longtemps un encodage valide plus petit. Sur la même photo, en natif et sur un seul cœur :
| Niveau oxipng | Résultat | Durée |
|---|---|---|
| 2 (« Fast » dans l’outil) | 884 853 o | 0.97 s |
| 4 (« Harder » dans l’outil) | 870 679 o | 1.98 s |
| max | 864 362 o | 3.45 s |
Le niveau maximal a gagné 20 491 octets de plus que le niveau 2, pour trois fois et demie plus de travail. Dans le navigateur, WebAssembly tourne deux à trois fois plus lentement que ces durées natives, c’est pourquoi l’outil démarre sur le niveau rapide.
Ce qui tourne mal : réenregistrer n’est pas optimiser
La colonne canvas du premier tableau illustre l’échec que cette tâche appelle. Réenregistrer un PNG via l’encodeur d’un navigateur a alourdi le graphique en aplats de 81% et la photo de 23%. Les pixels étaient intacts ; l’encodeur ne cherchait tout simplement pas à faire mieux. Un outil construit ainsi gonfle les fichiers sur une part réelle des entrées, et s’il n’affiche jamais que des gains, vous risquez de ne pas le remarquer.
Les bords adoucis sont un second piège. Un canvas arrondit les pixels semi-transparents à l’entrée, et cet arrondi ne peut pas être annulé à la sortie. Dans les mesures PNG vers WebP, un détourage photographique aux bords progressifs passé dans un canvas en qualité sans perte est ressorti avec 39.77% de ses pixels modifiés. Le traitement PNG du compresseur évite ces deux problèmes en ne touchant jamais à un canvas : vos octets vont directement dans oxipng et ses octets reviennent directement.
Il va même un cran plus loin que nécessaire. oxipng peut réécrire les valeurs de couleur cachées sous les pixels entièrement transparents, ce que personne ne peut voir et qui fait gagner de vrais octets, mais qui n’est pas identique au bit près. L’outil laisse cette option désactivée (optimize_alpha vaut false dans son code source), parce que « pixels identiques » est la promesse affichée à l’écran.
Là où le sans-perte s’arrête
- Les fichiers JPEG passent par MozJPEG, qui est avec perte. Il supprime du détail pour gagner des octets, et l’outil le précise à côté de son curseur. Dans cet outil, un JPEG ne peut pas être allégé sans cette perte.
- Les GIF et BMP ressortent en PNG. Ils sont lus une fois et écrits sous forme de PNG optimisé sans qu’aucun pixel soit modifié : l’extension du fichier change donc.
- Les WebP et AVIF sont refusés, car les deux sont déjà mieux compressés que ce que permettrait une chaîne PNG ou JPEG.
- Les PNG et GIF animés sont refusés. Décoder une animation dans un navigateur ne conserve que la première image, ce qui transformerait un GIF de quarante images en image fixe et le présenterait comme un gain.
Autres façons de faire
En ligne de commande, oxipng lui-même :
oxipng -o 4 --strip safe image.png-o 4 est le niveau d’effort, le même que l’option « Harder » de l’outil, et c’est la syntaxe avec laquelle nos mesures ont été faites. --strip safe lui demande de supprimer les métadonnées qu’il juge sans risque à retirer ; les pixels restent intacts dans tous les cas. Travaillez sur une copie si vous voulez conserver le fichier d’origine.
macOS et Windows n’ont pas d’optimiseur PNG sans perte intégré que nous puissions vous indiquer ; la ligne de commande est l’alternative.
Vérifier que rien n’a été envoyé
Ouvrez les outils de développement de votre navigateur sur l’onglet Réseau avant de lancer la compression. La première exécution télécharge le moteur de compression lui-même, un fichier WebAssembly servi par ce site ; ce que vous ne verrez pas, c’est une requête qui emporte votre image. Compressez un second fichier : le moteur est déjà chargé, donc rien de nouveau n’apparaît.
Déposez vos PNG dans le compresseur d’images et lisez les chiffres de chaque fichier avant de garder quoi que ce soit. Si vous avez besoin d’un autre format plutôt que d’un PNG plus léger, c’est le rôle du convertisseur d’images.