PNG vs JPG : quand utiliser lequel

En bref.Utilisez PNG pour les captures d’écran, logos et tout ce qui a des bords nets ou de la transparence, car il est sans perte et prend en charge le canal alpha. Utilisez JPG pour les photographies, car sa compression DCT avec perte produit des fichiers 5 à 10 fois plus petits sans perte de qualité perceptible.

Deux formats d’image, tous deux vieux de plus de 30 ans, tous deux omniprésents, tous deux adaptés à des situations différentes. La règle empirique est simple : PNG pour les captures d’écran, logos et tout ce qui a des bords nets ou de la transparence ; JPG pour les photographies. Le raisonnement sous-jacent est plus intéressant que la règle elle-même.

Les différences essentielles

Pourquoi la compression avec perte gagne pour les photographies

L’algorithme de compression de JPG — la transformée en cosinus discrète (DCT), suivie du sous-échantillonnage de chrominance et du codage Huffman — est conçu autour du système visuel humain. L’algorithme supprime les informations que l’œil ne perçoit pas facilement :

• Sous-échantillonnage de chrominance.La vision humaine est bien plus sensible à la luminosité (luma) qu’à la couleur (chroma). JPG stocke la couleur à la moitié de la résolution de la luminosité, ce qui est invisible en conditions normales.
• Quantification dans le domaine fréquentiel.Les photographies contiennent beaucoup de bruit haute fréquence (dégradés subtils, texture, grain du capteur). La DCT sépare l’image en bandes de fréquences ; JPG quantifie agressivement les bandes haute fréquence. Vous perdez des détails que vous ne perceviez pas consciemment.

Pour une photo 4K, JPG à la qualité 85 est indiscernable de l’original sans perte pour la plupart des spectateurs, à un dixième de la taille du fichier. Ce ratio est imbattable.

Pourquoi la compression avec perte échoue pour les captures d’écran et logos

Les zones plates et les bords nets sont exactement le mauvais type de contenu pour les mathématiques fréquentielles de JPG. L’algorithme introduit des artefacts de sonnerie autour des bords nets (visibles comme de légères auréoles près du texte), et le sous-échantillonnage de chrominance qui se dissimule bien dans une photographie devient des traînées de décalage de couleur évidentes à côté d’une couleur de marque saturée.

La compression DEFLATE de PNG, en revanche, est exacte. Une couleur 24 bits est stockée comme une couleur 24 bits. Les zones plates se compriment magnifiquement car le codage par plages répère la répétition ; les bords nets restent nets. Une capture d’écran d’interface typique en PNG est plus petite que la même capture enregistrée en JPG, car les octets qu’une photographie aurait sont dominés par les répétitions que PNG avale facilement.

La question de la transparence

JPG n’a pas de canal alpha. Un “JPG transparent” n’existe pas ; le format ne peut physiquement pas en stocker un. Si vous avez besoin que quelque chose repose sur un fond non rectangulaire — logos, icônes, découpes style autocollant, tout ce qui est en couches — PNG est le seul des deux qui fonctionne.

La solution de contournement que les gens tentent parfois est de faire correspondre le fond JPG à la couleur du fond de destination. Cela fonctionne pour une destination spécifique et se casse dès que l’asset est réutilisé. Ne le faites pas. Utilisez PNG ou, mieux, un format vectoriel comme SVG.

Quand ni PNG ni JPG n’est la bonne réponse

Trois cas :

1. Graphiques vectoriels. Les logos, icônes et illustrations devraient être livrés en SVGsi possible. Les vecteurs s’adaptent à toute résolution, restent nets sur tout écran et se compriment généralement en quelques centaines d’octets. PNG vous enferme dans une seule résolution.
2. Photos web modernes. Utilisez WebP(ou AVIF là où c’est pris en charge). Les deux formats produisent des fichiers 25 à 50 % plus petits que JPG à qualité visuelle équivalente, et tous deux prennent en charge le canal alpha. Notre convertisseur JPG vers WebP et notre convertisseur PNG vers WebP gèrent la conversion dans le navigateur. Utilisez JPG comme solution de repli avec <picture>pour la petite part de clients ne prenant pas en charge WebP.
3. Images d’interface en ligne.Parfois la bonne réponse est d’éviter un fichier séparé. Notre outil image vers Base64 encode n’importe quelle image en URI de données que vous pouvez coller directement dans HTML, CSS ou JSON. Utile quand l’image est petite (moins de ~10 Ko) et qu’une requête HTTP séparée ralentirait le chemin de rendu critique.

L’arbre de décision

1. Nécessite-t-il de la transparence ? → PNG (ou SVG si vectoriel).
2. Est-ce une photographie ou similaire ? → JPG, ou WebP pour le web.
3. Est-ce une capture d’écran, une capture d’interface ou un graphique à couleur unie ? → PNG.
4. Est-il inférieur à 10 Ko et utilisé une seule fois ? → Base64 en ligne.
5. Est-ce un logo ou une icône ? → SVG. PNG comme solution de repli.

Cela couvre environ 95 % des cas. Les 5 % restants se résolvent généralement en essayant les deux formats et en comparant les tailles de fichiers — aucun algorithme n’est magique, et la bonne réponse dépend du contenu spécifique.

Chiffres clés

• Dimensions maximales : PNG jusqu’à 2³¹−1 × 2³¹−1 px (théorique) ; JPG limité à 65 535 × 65 535 px (champ 16 bits).
• Profondeur de bits : PNG prend en charge 1/2/4/8/16 bits par canal + alpha ; JPG est fixé à 8 bits par canal, 3 canaux (sans alpha). JPG 12 bits existe mais est rarement pris en charge par les navigateurs.
• Avantage de profondeur de couleur : PNG 16 bits = 281 000 milliards de couleurs contre 16,7 millions pour JPG — significatif uniquement pour les sources HDR et les travaux sur les dégradés.
• Ratio de taille typique (photo 4K à qualité 85) : PNG ~12 Mo vs JPG ~1,5 Mo — environ 8×.
• Ratio de taille typique (capture d’écran d’interface, couleur unie) : PNG ~80 Ko vs JPG ~180 Ko — PNG environ 2× plus petit.
• Qualité JPG vs perception : q=95 est visuellement sans perte sur la plupart des contenus ; q=80 est l’équilibre idéal pour le web ; q=60 commence à montrer des artefacts sur les visages et dégradés.
• Sous-échantillonnage de chrominance 4:2:0 : stocke la chrominance au quart de la résolution, économisant ~50 % de taille de fichier avec un impact perceptif minimal sur les photos mais des sonneries visibles sur le texte.
• Niveaux de compression PNG : 0-9 dans libpng ; le niveau 9 produit des fichiers ~5-15 % plus petits que le niveau 6 mais prend ~3-5× plus longtemps. oxipng et zopflipng peuvent encore réduire de 10 à 20 %.
• Perte de génération : JPG réenregistré 10 fois à q=85 perd ~3 dB PSNR par rapport à l’original ; PNG est sans perte donc la perte de génération = 0.
• Taille APNG vs GIF : typiquement 50-70 % plus petit que le GIF équivalent à une profondeur de couleur supérieure.

Matrice de décision

Sources

• W3C / ISO 15948 — Portable Network Graphics (PNG) Specification, Third Edition — w3.org/TR/png.
• ITU-T T.81 (ISO/IEC 10918-1) — Technologies de l’information – Compression numérique et codage des images fixes à tons continus (spécification de base JPEG) — itu.int.
• Wallace, G.K. — The JPEG Still Picture Compression Standard, Communications of the ACM, avril 1991 — article JPEG original évalué par des pairs.