JPG vs PNG vs WebP vs SVG : quel format d'image devriez-vous utiliser ?

Choisissez le mauvais format d'image et soit vous surchargez votre page avec des fichiers volumineux, soit vous vous retrouvez avec des graphiques flous et pixellisés. Choisissez le bon et votre site se chargera plus rapidement et paraîtra plus net – gratuitement. Voici la répartition en anglais simple des quatre formats que vous utiliserez réellement, et exactement quand les atteindre.

JPG (JPEG) : photographies

JPG utilise une compression « avec perte » : il supprime les détails que l'œil remarque à peine pour obtenir de petits fichiers. Cela le rend parfait pour les photographies et les images complexes avec beaucoup de couleurs et de dégradés. Le compromis : il ne prend pas en charge la transparence et les modifications/réenregistrements répétés dégradent la qualité. Évitez-le pour le texte, les logos ou les bords nets, qu'il rend flous en artefacts visibles.

PNG : graphiques, logos et transparence

PNG utilise une compression « sans perte », ce qui permet de conserver chaque pixel exactement et prend en charge la transparence. C'est le bon choix pour les logos, les icônes, les captures d'écran et toute image avec des bords ou du texte nets. L'inconvénient est la taille du fichier : une photo PNG peut être plusieurs fois plus grande que son équivalent JPG, alors ne l'utilisez pas pour des photographies.

WebP : le polyvalent moderne

WebP, développé par Google, offre à la fois une compression avec et sans perte et la transparence : essentiellement le meilleur du JPG et du PNG dans un seul format, dans une taille plus petite. La documentation WebP de Google indique des économies de 25 à 35 % par rapport aux fichiers JPG et PNG comparables. Il est pris en charge par tous les navigateurs modernes, donc pour la plupart des sites Web, il devrait s'agir de votre navigateur par défaut. Convertissez vos images existantes avec JPG en WebP ou PNG en WebP — et si jamais vous avez besoin d'une solution de secours, WebP en JPG l'inverse.

SVG : logos, icônes et tout ce qui évolue

SVG est fondamentalement différent : au lieu de pixels, il stocke des instructions vectorielles (lignes, courbes, formes) sous forme de code. Cela signifie qu'il s'adapte à n'importe quelle taille – d'un favicon à un panneau d'affichage – sans perte de qualité, et que les fichiers sont minuscules pour des graphiques simples. Utilisez-le pour les logos, les icônes et les illustrations. Ce n'est pas adapté aux photographies. Réduisez les ballonnements des SVG exportés avec notre optimiseur SVG. Le guide MDN sur les types de fichiers image est la référence faisant autorité si vous souhaitez approfondir.

Guide de décision rapide

• Photo sur une page Web ? WebP (ou JPG comme solution de secours).
• Logo ou icône ? SVG si vous avez le vecteur ; sinon PNG.
• Besoin de transparence ? WebP, PNG ou SVG – jamais JPG.
• Imprimer ou télécharger lorsque la compatibilité est importante ? JPG ou PNG.

N'oubliez pas d'optimiser

Le format ne représente que la moitié de la bataille ; la taille compte tout autant. Quoi que vous choisissiez, redimensionnez-le aux dimensions qu'il affichera réellement avec le redimensionneur d'image et compressez-le avec le compresseur d'image. Pour connaître le flux de travail complet, consultez notre guide sur l'optimisation d'image.

Et AVIF, le nouveau concurrent ?

WebP a un nouveau rival : AVIF. Il compresse souvent encore plus petit que WebP avec la même qualité, ce qui le rend attrayant pour les sites critiques en termes de performances. Le compromis est une prise en charge légèrement moins universelle et un encodage plus lent, bien que la couverture du navigateur soit désormais forte. Une approche moderne courante consiste à servir AVIF avec une solution de secours WebP et un JPG/PNG comme filet de sécurité final : le navigateur choisit le meilleur format qu'il prend en charge. Aujourd'hui, pour la plupart des sites, WebP reste la solution pragmatique par défaut, AVIF étant une prochaine étape intéressante.

Avec ou sans perte : le principal compromis

Sous les noms de format se trouve une décision : avec ou sans perte. Lossy (JPG et WebP/AVIF en mode avec perte) supprime les données que l'œil remarque à peine, ce qui donne lieu à des fichiers minuscules : parfaits pour les photos, mais mauvais pour les textes nets. Sans perte (PNG, SVG et WebP en mode sans perte) conserve chaque pixel exact, essentiel pour les logos, les captures d'écran et les graphiques aux bords nets. Faire correspondre ce choix à votre type d'image est plus important que l'étiquette de format spécifique.

Ne réenregistrez pas les images avec perte à plusieurs reprises

Un avertissement pratique : chaque fois que vous modifiez et réenregistrez un JPG (ou tout autre format avec perte), il perd un peu plus de qualité — "perte de génération", comme si vous photocopiez une photocopie. Conservez toujours un original, modifiez-le et exportez une nouvelle copie plutôt que de l'enregistrer à plusieurs reprises sur le même JPG. Pour les images que vous modifierez souvent, travaillez dans un format sans perte et exportez-les uniquement comme étape finale. Optimisez ensuite avec notre compresseur d'image.

Résultat

WebP pour les photos, SVG pour les logos et icônes, PNG lorsque vous avez besoin d'une transparence sans perte, JPG pour une compatibilité maximale. Adaptez le format au contenu et vous obtiendrez des images plus nettes et des pages plus rapides sans rien dépenser.