Il existe des dizaines de types de fichiers image, chacun variant en fonction du type de compression, du formatage et de la prise en charge du navigateur. Mais deux des formats les plus couramment utilisés sont les formats SVG et PNG.

Ces deux types de fichiers ne pourraient pas être plus différents – chacun est mieux adapté à des situations spécifiques. Ils ne sont certainement pas interchangeables à tous points de vue, mais vous trouverez peut-être que les SVG peuvent effectuer des tâches spécifiques mieux que l’image PNG standard.

Apprenez la différence entre SVG et PNG et la meilleure façon de les utiliser sur votre site web.

Consultez notre guide vidéo sur SVG vs PNG

Qu’est-ce que SVG ?

SVG est l’abréviation de Scalable Vector Graphics, et c’est le format de fichier vectoriel le plus utilisé sur le web. Détaillons-le :

  • Évolutif : Les SVG peuvent être redimensionnés vers le haut ou vers le bas sans nuire à la qualité de l’image. Elle sera parfaitement nette et claire, quelle que soit sa taille.
  • Vecteur : La plupart des types de fichiers image contiennent des pixels. Les vecteurs sont essentiellement des morceaux de code qui rendent une image en temps réel, la convertissant en pixels que vous voyez sur votre écran. Bien qu’ils affichent la même image, ce qui se passe en arrière-plan est très différent.
  • Graphisme : Bien qu’il ne soit pas aussi connu, SVG est un type de fichier image comme PNG, JPEG ou GIF. Il procède simplement de manière un peu différente.

Les vecteurs sont des morceaux de code écrits en XML qui représentent des formes, des lignes et des couleurs pour expliquer plus en détail comment cela fonctionne.

Bien qu’il soit tout à fait possible de créer une image avec rien d’autre que du code, la plupart des gens utilisent un éditeur de graphiques vectoriels comme Inkscape ou Adobe Illustrator. Vous pouvez aussi convertir des PNG ou d’autres images matricielles en SVG, mais les résultats ne sont pas toujours excellents.

Convertio est un convertisseur de PNG en SVG.
Convertio est un convertisseur de PNG en SVG.

Lorsque la page se charge, ce code est converti en graphiques, donc vous ne pouvez pas immédiatement distinguer un SVG d’un PNG. Mais comme les SVG sont simplement des lignes de code converties en pixels, cela signifie qu’elles peuvent s’adapter à n’importe quelle résolution – grande ou petite – sans perdre en qualité.

Exemple d'un SVG agrandi.
Exemple d’un SVG agrandi.

SVG prend également en charge l’animation et la transparence, ce qui en fait un format de fichier polyvalent.

Le seul problème est qu’il n’est pas aussi largement utilisé que des formats plus standard comme PNG, il est donc moins pris en charge par les navigateurs et appareils plus anciens, et ce n’est pas toujours le plus facile de le téléverser sur votre site et de le faire s’afficher correctement.

Avantages et inconvénients du SVG

Bien qu’ils ne soient pas encore aussi largement utilisés que les types de fichiers matriciels comme le PNG, les graphiques vectoriels gagnent rapidement en popularité. Ils accomplissent certaines tâches essentielles que les images matricielles ne peuvent tout simplement pas accomplir. Voici pourquoi les gens aiment les SVG.

  • Les images SVG sont évolutives. Vous pouvez les concevoir dans n’importe quelle résolution, et elles s’agrandiront ou se réduiront sans que leur qualité ne soit altérée ou qu’elles ne deviennent pixelisées. Avec les images tramées, vous devez savoir quelle taille vous voulez dès le début, ou vous risquez de rendre l’image trop grande ou trop petite.
  • Les SVG ont toujours une apparence nette et belle car elles ne subissent jamais de perte de qualité. Les images tramées peuvent commencer à paraître floues lorsqu’elles sont redimensionnées, même légèrement.
  • Comme les SVG ne sont que du code, leur taille de fichier est minimale et bien optimisée. Il existe aussi des optimiseurs de SVG pour les rendre encore plus faciles à gérer. Votre site se chargera probablement un peu plus vite si vous les utilisez à la place.
  • Contrairement aux PNG, les SVG prennent en charge l’animation.

SVG a beaucoup d’avantages par rapport au PNG, du fait qu’il est extensible à une taille plus petite, mais il n’est pas meilleur dans toutes les situations. Voici les inconvénients des types de fichiers vectoriels.

  • Bien que les SVG soient pris en charge par tous les principaux navigateurs modernes, vous pouvez rencontrer des problèmes de compatibilité en les rendant sur des navigateurs et appareils plus anciens. Si une part importante de vos visiteurs les utilise, passer à l’autre version pourrait être une mauvaise idée.
  • Les SVG sont plus difficiles à travailler et nécessitent des programmes spéciaux pour les créer et les modifier. Bien que vous puissiez les concevoir avec rien d’autre que du XML, ce n’est pas toujours faisable. Les outils premium comme Adobe Illustrator peuvent coûter cher.
  • Les SVG ne sont pas aussi faciles à intégrer que les PNG. Si vous utilises WordPress, ils ne sont pas pris en charge par la médiathèque par défaut, vous aurez donc besoin d’une extension pour les téléverser.
  • Les SVG doivent être rendus par le navigateur lorsque la page est chargée, donc en utiliser un excès ou un gros fichier avec de nombreux vecteurs peut impacter l’appareil.

Quand utiliser SVG plutôt que PNG

Bien que vous ne deviez absolument pas convertir tous vos PNG en SVG, les graphiques vectoriels peuvent remplacer avantageusement certaines images.

Les images SVG fonctionnent exceptionnellement bien pour les graphiques décoratifs de sites web, les logos, les icônes, les graphiques et diagrammes, et d’autres images simples. Regardez notre page d’accueil pour un excellent exemple de graphisme vectoriel en action.

La page d'accueil de Kinsta.
La page d’accueil de Kinsta.

Cependant, ils ne fonctionnent pas aussi bien avec les images complexes impliquant de nombreuses couleurs et formes, comme les captures d’écran, les photographies et même les œuvres d’art détaillées. Bien qu’il soit possible de convertir n’importe quelle image en SVG, les navigateurs ne gèrent pas toujours bien les vecteurs complexes avec des centaines de couleurs car ils doivent être rendus lorsque la page se charge.

De plus, les illustrations SVG peuvent être magnifiques, mais la conception d’images complexes demande beaucoup de temps, d’efforts et de maîtrise des outils d’édition avancés. Restez simple si vous voulez créer vos images vectorielles.

Si vous avez des images détaillées, restez définitivement sur PNG.

Cependant, les SVG sont meilleurs pour la conception de sites web responsives et prêts pour Retina-ready en raison de leur évolutivité et de l’absence de dégradation de la qualité. De plus, ils prennent en charge l’animation alors que PNG ne le fait pas, et les types de fichiers matriciels qui prennent en charge l’animation comme GIF, APNG et WebP ont tous leurs problèmes.

Pour des graphiques simples qui peuvent nécessiter une animation et qui sont garantis de bien s’adapter à toutes les tailles d’écran, utilisez SVG.

Qu’est-ce que PNG ?

PNG est l’abréviation de Portable Network Graphics, et ce nom se reflète dans la façon dont ce type de fichier est répandu. Quiconque a déjà utilisé un ordinateur a probablement travaillé avec des PNG, car c’est le type de fichier le plus courant sur Internet après le JPEG.

Le PNG est un type de fichier d’image matricielle, similaire aux formats d’image les plus courants. Cela signifie qu’il est composé de pixels, les mêmes petits points qui s’affichent sur votre moniteur ou votre écran. Si cela facilite l’affichage, cela signifie aussi que la qualité de l’image dépend de la résolution, c’est-à-dire du nombre de pixels de l’image.

Donc si vous augmentez ou réduisez la taille d’une image matricielle, la qualité en sera affectée. Parfois, les dommages sont négligeables, surtout en cas de réduction d’échelle, et parfois cela peut rendre une image floue et complètement inutilisable.

Exemple d'un PNG agrandi.
Exemple d’un PNG agrandi.

Malgré tout, la prévalence du PNG en fait un bon candidat pour une utilisation générale. Ce type de fichier prend en charge la transparence, mais pas l’animation.

Avantages et inconvénients du PNG

Qu’est-ce qui fait du PNG le format de fichier image le plus utilisé en ligne ? Voici les avantages :

  • Les fichiers PNG sont facilement modifiables et ouverts dans n’importe quel outil d’édition d’image courant. Il n’est pas nécessaire de payer pour des programmes avancés pour créer ou modifier une image PNG ; tout au plus, vous devrez télécharger un éditeur gratuit comme GIMP.
  • Que vous codiez à partir de rien ou que vous utilisiez le gestionnaire de médias de WordPress, afficher des images PNG sur votre site est une tâche simple.
  • Le PNG utilise une compression sans perte qui lui donne un aspect plus net que les JPEG à compression avec perte. Cependant, cela a un coût en termes de taille de fichier et ne peut pas être comparé aux images vectorielles.

D’autre part, le format PNG a été créé il y a des décennies et présente plusieurs défauts notables qui n’ont pas été mis à jour pour l’ère moderne.

  • Vous ne pouvez pas redimensionner les fichiers PNG sans perdre en qualité. Vous devez planifier soigneusement lorsque vous concevez des graphiques matriciels et vous assurer qu’ils sont de la bonne taille, sinon vous risquez de perdre du temps à créer des images inutilisables.
  • Les PNG sont très volumineux en raison de leur compression sans perte. Ils peuvent donc ralentir votre site web. Pour y remédier, il faut les compresser encore plus et en détériorer la qualité.
  • Rendre les images « Retina-ready » est plus fastidieux avec les PNG et plus susceptible de provoquer des flous.
  • Le PNG ne prend pas en charge l’animation. D’autres types de fichiers raster animés comme les GIF peuvent présenter de sérieux problèmes ; par exemple, les GIF sont de très mauvaise qualité et ne prennent en charge que 256 couleurs.

Quand utiliser PNG plutôt que SVG

Ce n’est pas pour rien que le PNG est le type de fichier le plus courant ; il est très polyvalent et convient à presque toutes les situations. Il y a juste quelques défauts à prendre en compte lors de son utilisation, comme sa grande taille de fichier et son manque d’évolutivité.

Les PNG conviennent pour afficher des images détaillées, des œuvres d’art et des photographies – tout ce qu’une image vectorielle ne peut pas gérer. Tout ce qui comporte des centaines de couleurs et une grande résolution devrait probablement être un PNG.

Cela ne veut pas dire que vous ne pouvez pas utiliser les PNG pour des images plus simples comme des logos et des graphiques décoratifs, mais les SVG seraient mieux adaptés à cette tâche.

Lorsque vous n’êtes pas sûr qu’une plateforme puisse gérer le nouveau type de fichier SVG, moins bien supporté, le PNG est la solution, ne serait-ce que pour être sûr.

Par exemple, vous ne pouvez pas téléverser des SVG sur la plupart des réseaux sociaux. Et comme certains clients de messagerie peuvent avoir des difficultés avec les vecteurs, il est généralement recommandé de s’en tenir aux PNG dans les modèles d’e-mail.

En général, les PNG fonctionnent bien avec toutes les images complexes et non animées, surtout celles qui nécessitent de la transparence. Vous pouvez les utiliser à peu près partout ; c’est juste que parfois, un SVG serait plus adapté.

N’oubliez pas que vous pouvez toujours utiliser des solution de secours PNG si vos SVG ne se charge pas, donc il est généralement prudent d’opter pour les vecteurs même si une partie importante de votre base d’utilisateurs est restée sur des appareils ou des navigateurs plus anciens.

Qu’est-ce qui est le mieux : SVG ou PNG ?

Aucun type de fichier n’est meilleur ou pire que l’autre ; chacun a ses limites. Bien que SVG soit plus performant que PNG dans plusieurs domaines, PNG est bien meilleur pour gérer certaines choses.

Mais en général, vous devriez vous en tenir aux SVG lorsque c’est approprié et utiliser les PNG dans toutes les autres situations que les vecteurs ne peuvent pas gérer. Vous pouvez techniquement utiliser l’un ou l’autre dans ces cas, mais le SVG est préférable dans quelques domaines spécifiques.

Alors que SVG prend en charge l’animation, PNG ne le fait pas. Les types de fichiers raster comme GIF et APNG peuvent être considérés comme des alternatives. Pourtant, il n’existe pas de format matriciel animé parfait qui soit largement pris en charge, bien connu, de haute qualité et qui donne des fichiers de petite taille. Les SVG satisfont toutes ces niches.

Les SVG s’adaptent aussi parfaitement à toutes les tailles d’écran, ce qui les rend réactifs et Retina-ready par défaut. Les PNG perdent leur qualité lorsqu’ils sont redimensionnés, et les faire bien s’adapter à l’échelle est un vrai casse-tête, surtout si vous n’avez que des images minuscules qui ne s’afficheront pas bien sur les grands écrans.

Enfin, les SVG sont généralement plus petits que les PNG, ils sont donc moins gourmands pour votre serveur même s’ils doivent être rendus au chargement.

Utilisez-les pour des illustrations simples et plates en couleur, des logos et des graphiques décoratifs sur votre site.

D’un autre côté, les PNG conviennent pour afficher des graphiques complexes à une grande résolution, ou des images avec des milliers de couleurs. Les SVG ne peuvent pas gérer cette quantité de couleurs et de formes pour le moment.

Ces types d’images complexes constitueront souvent la majorité des images de votre site, il n’est donc pas encore temps de jeter les PNG.

Et les PNG sont plus largement pris en charge par les navigateurs et les plateformes spécifiques comme les clients de messagerie. Si vous n’êtes pas sûr qu’un SVG s’affichera correctement, privilégiez la prudence et utilisez un PNG.

Résumé

SVG et PNG sont deux formats de fichiers très différents. Au final, ce n’est pas très important que vous utilisiez des PNG ou des JPEG sur votre site en dehors de cas d’utilisation très spécialisés, mais choisir entre SVG et PNG est un choix beaucoup plus important.

Vous êtes beaucoup plus susceptible d’utiliser des PNG car c’est un format de fichier plus simple, plus facile d’accès et plus polyvalent. Les images complexes comme les captures d’écran et les illustrations détaillées devraient utiliser le PNG.

Bien que les SVG soient plus difficiles à créer et à modifier, ils présentent de nombreux avantages par rapport aux PNG. Chaque fois qu’il est approprié d’utiliser des images vectorielles, comme des graphiques décoratifs et des logos, utilisez définitivement le format SVG.

Vous ne remplacerez probablement pas chaque image de votre site par un SVG, mais leur réactivité et leur taille de fichier réduite en font un excellent candidat dans certaines situations.

Vous faites partie de l’équipe SVG ou PNG ? Partagez votre avis avec notre communauté dans les commentaires ci-dessous !

Salman Ravoof

Salman Ravoof est un développeur web autodidacte, un écrivain, un créateur et un grand admirateur des logiciels libres. Outre la technologie, il est passionné par la science, la philosophie, la photographie, les arts, les chats et la nourriture. Apprenez-en plus sur son site web, et connectez-vous avec Salman sur X.