Guide des formats d'image : PNG, JPG, WebP, SVG — Quand utiliser chacun

Choisir le mauvais format d'image gaspille de la bande passante, ralentit le chargement des pages et dégrade la qualité visuelle. Chaque format a des forces spécifiques — les photographies rendent mieux dans un format, les logos dans un autre, et les icônes dans un autre encore. Ce guide vous aide à faire le bon choix à chaque fois.

Tableau de décision rapide

Analyse approfondie des formats

JPEG (JPG)

Le standard pour les photographies depuis 1992. Utilise la compression avec perte basée sur la transformée en cosinus discrète (DCT).

Idéal pour : Photographies, scènes naturelles, images complexes avec des dégradés. À éviter pour : Texte, logos, captures d'écran, images avec des bords nets.

Points de qualité optimaux :

• Qualité 85 : Visuellement sans perte pour la plupart des photos (meilleur par défaut)
• Qualité 75 : Bon équilibre pour les miniatures web
• Qualité 95 : Quasi sans perte pour l'impression ou l'archivage

Astuce : JPEG ne prend pas en charge la transparence. Si vous avez besoin d'une photo avec un arrière-plan transparent, utilisez WebP ou PNG.

PNG

Compression sans perte — chaque pixel est préservé exactement. Prend en charge la transparence alpha complète.

Idéal pour : Captures d'écran, éléments d'interface, logos sur des arrière-plans colorés, toute image contenant du texte. À éviter pour : Photographies (les fichiers seront 5 à 10 fois plus gros qu'en JPEG).

PNG-8 vs PNG-24 :

• PNG-8 : 256 couleurs, fichiers plus petits, adapté aux graphiques simples
• PNG-24 : 16 millions de couleurs, fichiers plus gros, nécessaire pour les photographies ou les dégradés

WebP

Le format moderne de Google qui prend en charge la compression avec et sans perte, la transparence et l'animation.

Idéal pour : Tout sur le web — c'est le meilleur format polyvalent. À éviter pour : L'impression (support logiciel limité), les e-mails (certains clients n'affichent pas le WebP).

Avantages par rapport au JPEG : 25-35 % plus petit à qualité équivalente, prend en charge la transparence. Avantages par rapport au PNG : 26 % plus petit pour les images sans perte, prend en charge la compression avec perte. Support navigateur : 97 %+ au niveau mondial.

Convertissez et optimisez vos images avec notre Optimiseur d'images.

SVG

Format vectoriel basé sur XML. Les images sont définies par des formes mathématiques, pas par des pixels.

Idéal pour : Logos, icônes, illustrations, diagrammes, tout graphique devant être mis à l'échelle. À éviter pour : Photographies, images raster complexes.

Avantages uniques :

• Mise à l'échelle infinie sans perte de qualité
• Tailles de fichiers minuscules pour les graphiques simples (souvent moins de 1 Ko)
• Stylisable avec CSS (changement de couleurs, animation)
• Accessible (le texte dans les SVG est consultable et lisible par les lecteurs d'écran)
• Modifiable dans n'importe quel éditeur de texte

<!-- Icône SVG : 200 octets vs PNG : 5 000 octets -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 8v4l3 3"/>
</svg>

AVIF

Le format le plus récent, basé sur le codec vidéo AV1. Compression supérieure au WebP.

Idéal pour : Images hero, photos de produits, toute image haute priorité où la compression maximale compte. Considérations : 92 % de support navigateur, encodage plus lent, support limité des outils d'édition. Économies : 50 % plus petit que JPEG à qualité équivalente.

GIF

Le plus ancien format d'image web (1987). Limité à 256 couleurs.

Idéal pour : Animations simples (mais le WebP animé est meilleur). À éviter pour : Presque tout le reste — WebP ou APNG sont des alternatives supérieures. Usage hérité : Encore largement pris en charge dans les applications de messagerie et les réseaux sociaux pour les réactions/mèmes.

Comparaison de taille (même image)

Une photographie de 1200×800 optimisée pour le web :

Le même graphique (logo, 500×200) :

Bonne pratique moderne : l'élément Picture

Servez le format optimal à chaque navigateur :

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

Les navigateurs choisissent le premier format pris en charge. Tout le monde obtient la meilleure qualité disponible à la plus petite taille.

Flux de travail d'optimisation

1. Commencez avec la source de la plus haute qualité — n'optimisez jamais à partir d'une image déjà compressée
2. Choisissez le bon format en utilisant le tableau de décision ci-dessus
3. Redimensionnez aux dimensions d'affichage — ne servez pas une image de 4000 px dans un conteneur de 800 px
4. Compressez — utilisez notre Compresseur d'images pour une optimisation rapide
5. Servez des tailles responsives — utilisez srcset pour différentes largeurs de viewport
6. Activez le chargement différé — loading="lazy" pour les images sous la ligne de flottaison

Pour en savoir plus sur l'optimisation, consultez notre Guide d'optimisation des images.

FAQ

Dois-je convertir toutes mes images en WebP ?

Pour la diffusion web, oui — WebP est le meilleur format polyvalent avec 97 %+ de support navigateur. Conservez les fichiers originaux dans leur format natif (JPEG, PNG) pour l'archivage et l'édition, et convertissez en WebP pour le service. Utilisez l'élément <picture> pour fournir un fallback JPEG pour les rares navigateurs qui ne prennent pas en charge WebP.

AVIF est-il prêt pour la production ?

AVIF est prêt pour la production avec 92 %+ de support navigateur. Les principales considérations sont un encodage plus lent (3-10x plus lent que WebP) et un support limité des outils d'édition. Pour les sites statiques où les images sont encodées une fois lors du build, la vitesse d'encodage n'est pas un problème. Fournissez toujours un fallback WebP ou JPEG.

Ressources connexes

• Optimiseur d'images — Compressez les images pour le web
• Redimensionneur d'images — Redimensionnez aux dimensions exactes
• Optimisation des images pour le web — Guide complet d'optimisation