PNG vs JPG : Quel format d'image devez-vous utiliser ?

Vous avez exporté votre logo en JPG et l'avez envoyé au client. Il vous répond en demandant pourquoi il y a un cadre blanc tout autour. Ou, à l'inverse : vous avez enregistré une photo de produit en PNG, et maintenant votre page web met une éternité à charger. Même image, format différent, et deux problèmes complètement distincts.

Cela se produit parce que le JPG et le PNG ont été créés pour résoudre des problèmes différents. Utiliser le mauvais format ne fait pas que gaspiller de l'espace de stockage, cela dégrade activement votre travail.

Le JPG sacrifie la qualité pour la légèreté, et c'est généralement très bien

Le JPG utilise une compression avec perte (lossy). Lorsque vous enregistrez un JPG, l'encodeur jette définitivement certaines données de l'image. Il cible les détails que vos yeux sont les moins susceptibles de remarquer : les dégradés de couleurs subtils, ou les transitions de texture à peine visibles. Pour une photo de rue ou de montagne, vous ne ferez sincèrement aucune différence entre l'original et un bon JPG encodé à 80 % de qualité.

Le fichier, en revanche, pourra être cinq à dix fois plus léger que son équivalent en PNG.

Mais ce compromis se paie dans deux situations. Premièrement : tout ce qui a des contours nets et tranchés. Du texte, des logos, des formes aux couleurs unies. L'algorithme de compression produit des artefacts (des blocs de pixels disgracieux) autour des limites franches, et ils sont impossibles à rater. Deuxièmement : les sauvegardes répétées. Chaque fois que vous ré-exportez un JPG, il recompresse ce qui a déjà été compressé. La dégradation s'accumule. Conservez toujours vos fichiers de travail dans un format sans perte (lossless) et n'exportez en JPG qu'à la toute fin.

Le PNG préserve tout, mais à un coût

Le PNG est sans perte (lossless). Chaque pixel est sauvegardé exactement tel qu'il était. Enregistrez le même PNG cent fois, il ressortira cent fois identique. Cette fiabilité absolue explique pourquoi le PNG est la référence pour tout ce qui doit rester parfaitement net : captures d'écran, maquettes d'interface, diagrammes, et tout ce qui comporte du texte incrusté dans l'image.

L'autre chose que le PNG fait et dont le JPG est incapable : la transparence. Et pas juste du "tout ou rien", mais avec un support complet du canal alpha. Chaque pixel peut être partiellement transparent. C'est la raison pour laquelle les logos, les icônes et les éléments d'interface sont toujours en PNG. Placez un PNG à fond transparent sur n'importe quelle couleur, et l'intégration sera parfaite. Faites de même avec un JPG, et vous obtiendrez le fameux cadre blanc, car le JPG n'a aucune notion de la transparence. Il comble le vide avec du blanc.

L'inconvénient reste la taille du fichier. Une photo enregistrée en PNG peut facilement peser 150 % à 200 % de la taille de la même photo en JPG, sans aucun gain de qualité visible. Sur des pages web, ce poids supplémentaire se paie cher.

L'unique question qui décide de tout

Cette image est-elle une photographie du monde réel ?

Si oui, utilisez le JPG. La compression a été conçue exactement pour ce type de contenu. Ses artefacts se cachent dans la complexité de la scène, et les économies de taille de fichier sont considérables. (Vous pouvez convertir un PNG en JPG rapidement via un outil en ligne si vous avez commis l'erreur).

Si non, utilisez le PNG. Logos, icônes, captures d'écran, illustrations, tout ce qui contient du texte ou un fond transparent. Ces images possèdent des bords nets et des aplats de couleurs que le JPG va visiblement dégrader. De plus, si vous avez besoin de transparence, le PNG est votre seule véritable option parmi les formats classiques.

Cette simple distinction couvre la grande majorité des cas.

Les erreurs qu'il faut connaître

Enregistrer une photo en PNG pour un site web est l'erreur la plus fréquente. Un PNG de 4 Mo et un JPG de 400 Ko peuvent sembler identiques à l'écran, mais l'un des deux mettra dix fois plus de temps à se charger. Votre navigateur se moque de savoir que les pixels sont "parfaits".

Utiliser un JPG pour un logo est l'autre grand classique. Ce halo blanc autour des bords, ce texte un peu mou, ce bruit de compression sur les remplissages unis... Utilisez toujours le PNG ou le SVG pour tout ce qui doit se superposer proprement sur un arrière-plan.

Il y a aussi l'erreur d'archivage. Si vous retouchez des photos, n'utilisez pas le JPG comme format de travail. Le réenregistrer détruit progressivement la qualité de votre image. Conservez vos originaux en TIFF, PNG ou RAW, et exportez-les en JPG uniquement pour la livraison finale.

Et le WebP dans tout ça ?

Le format WebP accomplit ce que font le JPG et le PNG, mais de manière beaucoup plus compressée. Il prend en charge à la fois les compressions avec et sans perte, ainsi que la transparence. Les navigateurs modernes le gèrent sans aucun problème. Si vous optimisez spécifiquement pour le web, convertir vos photos en WebP au lieu du JPG permet généralement de réduire la taille du fichier de 25 à 30 % supplémentaires, à qualité visuelle équivalente.

C'est un format à envisager très sérieusement pour tout ce qui va sur une page publique, particulièrement pour les photos de produits ou les larges visuels d'en-tête.

Résumé rapide

Ce tableau ne couvre pas tous les cas particuliers, mais il gère les plus courants. En cas de doute, le PNG est le point de départ le plus sûr. Vous pourrez toujours compresser un PNG en JPG plus tard sans perdre l'original. Faire l'inverse signifie travailler avec les restes de ce que le JPG a déjà définitivement supprimé.