La réponse en trois lignes
Utilisez le PNG pour la transparence, le texte, les captures d'écran et les schémas. Utilisez le JPEG pour les photographies. Et dans les deux cas, servez du WebP sur le web, il fait le travail des deux, avec des fichiers nettement plus légers, et il est reconnu par plus de 96 % des navigateurs.
Le tableau de décision
Le bon format dépend uniquement de ce que contient l'image, jamais d'une préférence générale.
| Votre image | Le bon format | Pourquoi |
|---|---|---|
| Photographie | JPEG, ou WebP | Des millions de nuances, où la compression avec perte est invisible à l'oeil et divise le poids |
| Logo, icône, pictogramme | SVG si possible, sinon PNG | Le SVG reste net à toutes les tailles et pèse souvent moins d'un kilooctet |
| Capture d'écran | PNG, ou WebP | Le texte doit rester lisible, or le JPEG le rend flou sur les contours |
| Schéma, graphique, diagramme | PNG ou SVG | Lignes nettes et aplats de couleur, le terrain exact du PNG |
| Image avec fond transparent | PNG ou WebP | Le JPEG ne gère pas la transparence, un fond blanc apparaîtra |
| Photo de produit détourée | WebP, sinon PNG | Il faut à la fois de la transparence et une compression efficace |
| Animation courte | Vidéo, pas un GIF | Un GIF animé pèse dix à cent fois plus qu'une vidéo équivalente |
Pourquoi un PNG est lourd, et quand il ne l'est pas
Tout tient à une différence, le PNG compresse sans perte et le JPEG avec perte.
Sans perte signifie que chaque pixel d'origine est restitué exactement. Pour y parvenir tout en réduisant le fichier, le PNG cherche les répétitions : des zones de couleur identique, des motifs qui reviennent. Sur un schéma composé de quelques aplats et de lignes, il trouve énormément de répétitions et le résultat est très léger.
Sur une photographie, c'est l'inverse. Chaque pixel diffère légèrement de son voisin, il n'y a presque rien à factoriser, et le fichier reste volumineux. Une photo enregistrée en PNG pèse couramment plusieurs fois le poids du même visuel en JPEG, sans qu'aucune différence soit visible à l'écran.
L'erreur que je rencontre le plus souvent
Des photographies enregistrées en PNG parce que « c'est le format de meilleure qualité ». C'est vrai techniquement et sans intérêt pratique, puisque la qualité supplémentaire est invisible pour l'oeil humain sur une photo, alors que le surpoids, lui, est bien réel. Sur une page d'accueil comptant une dizaine de visuels, cette seule erreur peut multiplier le poids de la page par trois.
La transparence à 256 niveaux
C'est ce qui a fait le succès du format et ce qui justifie encore son usage. Le PNG gère un canal de transparence à 256 niveaux, ce qui permet des bords progressifs et des ombres portées naturelles.
Concrètement, un logo posé sur un fond coloré s'intègre proprement, sans le rectangle blanc disgracieux qu'un JPEG imposerait. Le GIF proposait déjà une transparence, mais binaire. Un pixel était visible ou ne l'était pas, ce qui produisait des contours en escalier.
Deux points de vigilance en pratique. D'abord, un fichier transparent ne s'affiche pas de la même façon selon le fond du site, donc vérifiez toujours le rendu sur fond clair et sur fond sombre. Ensuite, la transparence a un coût en poids, et une image qui n'en a pas besoin gagne à être aplatie.
Vos images pèsent-elles plus que tout le reste ?
Sur la majorité des sites que j'audite, oui. Format adapté, dimensions réelles et compression suffisent, souvent en une après-midi de travail.
Je chiffre le poids réel transféré et ce que la correction ferait gagner.
Ce que le WebP change
Le WebP a été conçu pour remplacer à la fois le JPEG, le PNG et le GIF. Il propose une compression avec ou sans perte, gère la transparence et l'animation, et produit des fichiers nettement plus légers à qualité perçue équivalente.
Longtemps freiné par un support partiel, le format est aujourd'hui reconnu par plus de 96 % des navigateurs, Safari l'ayant pleinement intégré à partir de sa version 16. Pour un site grand public, la question du support ne se pose plus.
| Critère | PNG | JPEG | WebP |
|---|---|---|---|
| Compression | Sans perte | Avec perte | Les deux, au choix |
| Transparence | Oui, 256 niveaux | Non | Oui |
| Animation | Non | Non | Oui |
| Poids sur photo | Très élevé | Faible | Le plus faible |
| Poids sur schéma | Faible | Élevé et rendu flou | Le plus faible |
| Support navigateurs | Universel | Universel | Plus de 96 % |
Servez du WebP par défaut. La plupart des systèmes de gestion de contenu et des hébergeurs proposent une conversion automatique, souvent en une case à cocher, avec repli sur le format d'origine pour les rares navigateurs anciens. Conservez les fichiers d'origine en PNG ou JPEG dans votre bibliothèque, où ils restent utiles pour la réutilisation hors du web.
L'effet sur le référencement
Ce sujet est souvent exagéré. Google ne classe pas une page mieux parce qu'elle utilise un format d'image plutôt qu'un autre. Il n'existe aucun bonus WebP.
L'effet est indirect et bien réel. Sur la majorité des pages, les images représentent l'essentiel du poids transféré. Un mauvais format dégrade le temps d'affichage, ce qui se répercute sur les Core Web Vitals et surtout sur l'expérience de vos visiteurs.
L'image principale d'une page, souvent la plus grande et la plus lourde, détermine fréquemment le moment où le contenu apparaît comme chargé. C'est l'indicateur le plus sensible du lot, et le format y joue directement.
Quatre réglages comptent plus que le choix du format lui-même :
- Dimensionner à la taille d'affichage réelle. Servir une image de 4 000 pixels de large affichée sur 800 est le gaspillage le plus courant, et aucun format ne le rattrape.
- Déclarer largeur et hauteur dans le code, pour éviter que la page ne saute pendant le chargement.
- Différer le chargement de tout ce qui se trouve sous le premier écran.
- Renseigner l'attribut alt, qui sert l'accessibilité et la recherche d'images.
Le détail complet est sur l'optimisation des images et le poids des images.
PNG et recherche d'images
La recherche d'images est un canal négligé qui apporte du trafic réel sur beaucoup de sites, notamment en commerce, en cuisine, en décoration et en tourisme. Le format n'y joue aucun rôle de classement, mais quatre éléments comptent.
- Le nom du fichier. Un nom descriptif vaut mieux qu'une référence d'appareil photo. Voir le nom des images.
- L'attribut alt, qui décrit le contenu réel de l'image plutôt que d'empiler des mots-clés.
- Le texte autour de l'image, qui donne son contexte et pèse davantage qu'on ne le croit.
- Un sitemap dédié aux images sur les sites qui en publient beaucoup.
La méthode que j'applique
- 1. Choisir selon le contenu, pas par habitude
Photo, JPEG. Texte, schéma ou transparence, PNG. Logo, SVG quand c'est possible. La décision prend deux secondes et conditionne tout le reste.
- 2. Redimensionner avant tout
À la taille maximale d'affichage réelle, en prévoyant le double pour les écrans à haute densité. C'est le geste le plus rentable de toute la chaîne.
- 3. Convertir en WebP pour la diffusion
Automatiquement de préférence, en conservant l'original dans la bibliothèque.
- 4. Compresser
Mon outil de compression le fait directement dans le navigateur, sans envoi de fichier sur un serveur.
- 5. Vérifier le résultat sur la page
Poids total transféré et rendu visuel. Une compression trop agressive se voit sur les aplats et les dégradés, et un visuel dégradé coûte plus cher qu'il ne rapporte.
Questions fréquentes
Sources : données de compatibilité navigateurs Can I Use pour le format WebP (plus de 96 % de support, prise en charge complète par Safari à partir de la version 16), consultées en août 2026 ; documentation Google Search Central sur les bonnes pratiques relatives aux images et aux Core Web Vitals.