shadcn.io— des milliers de blocs shadcn/ui
Aller au contenu

PNG ou JPG ? La règle qui me sert à trancher depuis dix ans

Le PNG et le JPG sont les deux réponses par défaut à « enregistrer cette image » depuis plus de vingt ans, et la plupart des gens choisissent entre eux par accident — selon ce que proposait la boîte de dialogue d’export. Ça tient jusqu’au jour où vous envoyez par mail une capture de 9 Mo, ou livrez un logo cerné d’un vilain halo gris, et soudain le choix compte.

Voici la chose : la décision est vraiment simple. Elle se résume à une seule question que je pose depuis environ dix ans, et elle ne m’a jamais fait défaut une seule fois.

La seule question

Cette image est-elle faite de contours, ou faite de lumière ?

C’est tout. Texte, logos, icônes, captures d’écran, schémas, dessins au trait, tout ce qui a des frontières nettes et des zones de couleur uniforme — ce sont des contours. Les photographies, les dégradés, tout ce qui a un ton continu et des milliers de subtils glissements de couleur — c’est de la lumière.

Les contours veulent du PNG. La lumière veut du JPG. Presque tout découle de là.

Pourquoi les contours veulent du PNG

Le PNG est sans perte. Chaque pixel que vous enregistrez revient à l’identique, pour toujours, quel que soit le nombre de fois où vous le rouvrez. Il compresse en repérant des suites de couleur identique, ce qui est exactement ce dont regorgent les images à base de contours — un bouton uni, un fond blanc, une ligne noire. Le PNG dévore ça et reste d’une netteté de rasoir.

Il a aussi un canal alpha, il peut donc être réellement transparent. C’est pour ça que tout logo que vous voulez poser sur un fond coloré devrait être en PNG. Le JPG n’a aucune transparence — il remplit ces zones de blanc, et c’est de là que vient le vilain halo.

Son point faible, ce sont les photographies. Enregistrez une photo en PNG et il consigne consciencieusement le moindre grain de bruit du capteur et chaque micro-dégradé en pleine fidélité, et le fichier explose. Le PNG n’est pas gaspilleur parce qu’il est mauvais. Il est gaspilleur parce qu’il est honnête sur des détails que votre œil pardonnerait volontiers.

Pourquoi la lumière veut du JPG

Le JPG est avec perte. Il jette des informations que votre œil remarque mal — les fines variations de couleur, les détails à haute fréquence — et il le fait remarquablement bien sur les photographies. C’est précisément ce dont une photo a de trop. Le résultat, c’est un fichier d’une fraction de la taille, sans que vous puissiez voir ce qui manque.

Braquez le JPG sur des contours, en revanche, et il s’effondre. Il étale des artefacts flous autour des frontières nettes — autour du texte surtout — parce que les bords francs sont justement le détail à haute fréquence qu’il est conçu pour écarter. Une capture de code en JPG paraît légèrement sale autour de chaque lettre. Ce n’est pas votre écran. C’est le format qui fonctionne comme prévu, sur le mauvais type d’image.

Le tableau de tailles qui tranche

Les deux mêmes images sources, enregistrées des deux façons avec des réglages raisonnables :

ImageEn PNGEn JPG
Une photographie — 12 MP~14 MB~3 MB
Une capture d’interface avec texte~600 KB~900 KB
Un logo plat, deux couleurs~20 KB~85 KB

Lisez-le dans les deux sens. La photo est près de 5 fois plus légère en JPG, sans perte visible. Mais la capture et le logo sont plus lourds en JPG — et ils seraient plus laids en prime, avec halos et flou. Le format le plus léger s’inverse complètement selon ce qu’il y a dans l’image. Toute la leçon tient en trois lignes.

Les cas limites (il n’y en a que deux à connaître)

La transparence impose le PNG. Si une partie de l’image doit être translucide, le JPG est écarté quel que soit le contenu, parce qu’il ne peut physiquement pas stocker de canal alpha. Même une photo détourée sur fond transparent doit être en PNG (ou en WebP).

Le texte sur photo est une question de jugement. Une photo avec une légende incrustée est mi-lumière, mi-contour. Je pars sur du JPG si c’est surtout de la photo et j’accepte un texte un peu mou, ou sur du PNG si le texte doit rester net et que je peux me permettre la taille. Il n’y a pas de vainqueur net ; vous choisissez le défaut que vous préférez.

Quand vous avez déjà le mauvais

La plupart du temps, vous ne choisissez pas à l’export — vous héritez d’un fichier que quelqu’un a déjà mal enregistré. Un photographe vous a remis des PNG de 14 Mo. Un designer a envoyé un logo en JPG cerné de halo. Ce n’est qu’une conversion.

Aller dans le sens intelligent — PNG vers JPG pour une photo enregistrée trop lourde — est un gain net, et ça tourne directement ici dans votre navigateur, le fichier ne quitte donc jamais votre appareil. Aller dans l’autre sens — JPG vers PNG — est honnête mais limité : ça rend le fichier sans perte à partir de maintenant, ce que vous voulez avant d’éditer, mais ça ne peut pas dé-baver les artefacts que le JPG a déjà incrustés. Le format avec perte est une porte à sens unique. Convertir en PNG ne vous ramène pas de l’autre côté ; ça vous empêche seulement de perdre quoi que ce soit de plus.

Posez la seule question — contours ou lumière — et vous aurez juste à peu près à chaque fois. Je la pose encore à chaque export. Ça prend une demi-seconde et ça m’a épargné pas mal de halos gris.

Articles liés


Tous les articles