JPEG vs PNG vs WebP — Choisir le bon format d'image et quand convertir

Il y a quelques années, je faisais un audit de performance sur un petit site d'entreprise. La cause des mauvais scores Lighthouse était immédiatement évidente : onze images sur la page d'accueil, toutes en PNG, toutes des photos de produits. La plus lourde faisait 4,2 Mo. L'image héro à elle seule 2,8 Mo.

Personne n'avait délibérément fait quelque chose de mal. Les photos avaient été exportées depuis un outil de design qui produisait du PNG par défaut, et personne ne le remettait en question car les images avaient l'air bien. Elles avaient vraiment l'air bien. Mais convertir en JPEG à 80% de qualité les aurait rendues visuellement indiscernables pour l'œil humain tout en faisant passer la charge totale des images d'environ 18 Mo à environ 2,5 Mo.

Ce genre de problème est partout sur le web, et il est entièrement solvable une fois qu'on comprend ce que fait réellement chaque format.

JPEG : Le cheval de bataille pour les photographies

JPEG existe depuis 1992 et reste le format d'image le plus utilisé sur internet. Il a duré si longtemps parce qu'il est vraiment bien adapté à son objectif prévu : compresser des photographies.

Les photographies ont une variation de ton continue — des dégradés progressifs de couleur et de lumière qui se fondent les uns dans les autres. La compression JPEG exploite cela en divisant l'image en blocs de 8×8 pixels et en éliminant les détails haute fréquence auxquels le système visuel humain est relativement peu sensible.

Quand JPEG fonctionne bien :

• Photos de produits, photographie éditoriale, images héros
• Toute image avec des dégradés progressifs et une variation de couleur naturelle
• Upload sur les réseaux sociaux, pièces jointes d'e-mail, partout où la taille de fichier compte

Quand JPEG échoue :

• Images avec des bords nets et du texte (logos, captures d'écran, diagrammes) — la compression crée des artefacts de "ringing" visibles autour des bords à fort contraste
• Images nécessitant de la transparence — JPEG n'a pas de canal alpha
• Images qui seront éditées à plusieurs reprises — chaque sauvegarde introduit une perte de qualité supplémentaire

La règle des 80% : En dessous de 70-75%, les artefacts JPEG deviennent visibles dans la plupart des photos. Au-dessus de 85-90%, la taille du fichier augmente significativement avec peu d'amélioration visuelle. La plage 75-85% est le sweet spot.

PNG : Pour quand les pixels doivent être exacts

PNG a été créé au milieu des années 1990 en partie comme alternative sans brevet à GIF. Il utilise une compression sans pertes — chaque pixel dans un PNG est préservé exactement tel quel.

Quand PNG est le bon choix :

• Captures d'écran d'interfaces, de code ou de texte
• Logos et icônes avec des couleurs plates et des bords nets
• Toute image nécessitant de la transparence (PNG supporte un canal alpha complet)
• Images pour édition ultérieure — pas de perte de génération
• Pixel art et diagrammes

Quand PNG est le mauvais choix :

• Les photographies. Un PNG d'une photo est presque toujours 3 à 5 fois plus grand qu'un JPEG équivalent sans différence de qualité visible. C'est l'erreur décrite en introduction.

WebP : Le format qui devrait être votre standard maintenant

WebP a été développé par Google et publié en 2010. Safari n'a ajouté le support qu'en 2020, mais depuis 2021, tous les grands navigateurs supportent WebP. Le problème de "compatibilité navigateur" est pratiquement résolu.

WebP supporte :

• Compression avec pertes (comme JPEG, mais typiquement 25-35% plus petit à qualité équivalente)
• Compression sans pertes (comme PNG, mais typiquement 26% plus petit)
• Transparence (canal alpha en mode lossy et lossless)
• Animation

En pratique, WebP est une amélioration stricte de JPEG pour la plupart des contenus photographiques. Même image, fichier plus petit, qualité équivalente.

Le bémol : Certaines anciennes plateformes CMS, clients e-mail et outils de design ont encore un support WebP limité. Avant d'utiliser WebP pour des images de newsletter, vérifier que votre plateforme e-mail gère WebP.

Scénarios de conversion

PNG vers JPEG : La conversion la plus courante et la plus impactante. Convertir des photos de produits ou héros stockées en PNG vers JPEG à 80% réduit typiquement la taille du fichier de 60-80% sans perte de qualité visible. Ce qu'on perd, c'est la transparence — si le PNG utilise un canal alpha, il faut remplir avec une couleur de fond avant de convertir en JPEG.

PNG vers WebP : Le meilleur des deux mondes. Support de la transparence comme PNG et taille de fichier plus petite que JPEG.

JPEG vers WebP : Une optimisation de routine fiable. Les archives JPEG existantes peuvent être re-servies en WebP pour les visiteurs sur navigateurs modernes, économisant 25-35% de bande passante.

WebP vers JPEG ou PNG : Nécessaire quand on soumet des images à des plateformes ou outils qui n'acceptent pas WebP.

L'outil de conversion de format d'image sur ToolboxHubs

Le convertisseur de format d'image fonctionne entièrement dans le navigateur via l'API Canvas :

1. Uploader l'image — Glisser-déposer ou cliquer pour sélectionner. JPEG, PNG, WebP et GIF sont acceptés en entrée.
2. Choisir le format de sortie — Sélectionner JPEG, PNG ou WebP dans le menu déroulant.
3. Régler la qualité — Pour les sorties JPEG et WebP avec pertes, un slider de qualité (défaut 80%). La sortie PNG sans pertes n'a pas de réglage de qualité.
4. Convertir et télécharger — Cliquer sur convertir et télécharger le résultat.

L'aperçu se met à jour quand on change les réglages de qualité, permettant de voir le compromis avant de télécharger.

Limitations à connaître : Les GIFs animés sont convertis comme image fixe (premier frame). Les SVG ne sont pas supportés en entrée.

Ce que signifient les réglages de qualité

Le pourcentage de qualité n'est pas une mesure directe de quelque chose d'objectif — c'est un paramètre de compression qui contrôle l'agressivité avec laquelle l'encodeur jette des informations :

• 90-100% : Quasi sans pertes. Fichiers volumineux. Utile pour des images qui seront éditées à nouveau ou imprimées.
• 75-85% : Le sweet spot web standard. La bonne plage pour presque toutes les images web.
• 60-75% : Fichiers visiblement plus petits. Des artefacts peuvent être visibles dans les zones à fort contraste.
• En dessous de 60% : Pixellisation et flou visibles.

L'impact sur la performance est réel

Pour donner une idée concrète : une page de destination typique très photographiée avec des PNG non optimisés peut avoir 15-25 Mo de données d'image. Convertir en WebP à 80% peut ramener ça à 2-4 Mo. À 10 Mbps de bande passante mobile moyenne, c'est la différence entre 12-20 secondes et 1,6-3,2 secondes de temps de chargement des images. Ces chiffres affectent directement le taux de rebond.

Les Core Web Vitals de Google — en particulier le Largest Contentful Paint (LCP) — sont fortement influencés par la taille des images. Si l'élément LCP est une image (ce qui est presque toujours le cas), le format et la compression de cette image sont l'un des leviers les plus directs sur le score de performance.

Outils complémentaires

Compresseur d'images — Pour réduire la taille du fichier sans changer de format.

Redimensionneur d'images — Servir une image de 3000px réduite à 400px dans le navigateur ? Redimensionner avant de servir est aussi important que le choix du format.

En conclusion

La règle simple de décision : Photos web → JPEG ou WebP. Images avec transparence → WebP (ou PNG pour les vieux environnements). Logos, captures d'écran, images avec texte → PNG. Commencer le slider de qualité à 80% et n'ajuster qu'en cas de problème spécifique.

Le convertisseur de format d'image prend en charge la conversion. La décision de quel format choisir, cet article l'a assumée.