Graphique

SVG vs PNG vs JPG Format d'image Avantages et inconvénients

Quand vient le temps de créer des images pour le Web et à d’autres fins numériques, quels formats de fichiers vous donneront le meilleur résultat? Vous devez penser à la vitesse par rapport à la qualité et à l’échelle de l’image. Alors, que devriez-vous utiliser: SVG vs PNG vs JPG?

Il fut un temps où vous utilisiez un fichier JPG dont la taille correspond à une résolution de 72 ppp et qui passait à autre chose. Plus maintenant. Les écrans haute résolution, les fenêtres multiples et la nécessité d’avoir un site Web accrocheur en ont rendu le processus beaucoup plus complexe. Plongeons-nous dans les avantages et les inconvénients de chacun de ces formats!

SVG

SVG a fière allure quelle que soit sa taille et fonctionne pour à peu près n'importe quel type d'image autre qu'une photo.

SVG, ou Scalable Vector Graphics, est incroyablement pratique. C'est pourquoi les concepteurs l'utilisent plus fréquemment.

Étant donné que le format SVG est un format vectoriel, il a fière allure quelle que soit sa taille et convient à n’importe quel type d’image autre que la photo.

Le format SVG est un format sans perte, c’est-à-dire qu’il ne perd aucune donnée lorsqu’il est compressé. Il génère un nombre illimité de couleurs. Il est généralement utilisé pour les graphismes et les logos sur le Web, ainsi que pour les projets visualisés sur la rétine ou sur d’autres écrans haute résolution.

Avantages de SVG

  • Le format vectoriel rend bien à n'importe quelle taille
  • Possibilité de créer des rendus SVG simples dans un éditeur de code ou de texte
  • Concevez et exportez des graphiques complexes à partir d'Adobe Illustrator ou de Sketch
  • Le texte SVG est accessible
  • Les SVG sont faciles à coiffer et à écrire
  • Les formats SVG sont supportés par les navigateurs modernes et sont pérennes
  • Le format est hautement compressible et léger
  • Bon pour la recherche en raison du format texte
  • Soutient la transparence
  • Permet des images fixes ou animées

Contre de SVG

  • La conception de SVG peut devenir compliquée
  • Ne restituez pas sur certains navigateurs dégradés
  • Support limité pour les clients de messagerie

Veut en savoir plus? Nous avons deux autres guides expliquant davantage sur SVG: Le Guide du débutant pratique sur SVG et Comment (et pourquoi) SVG va prendre la relève.

PNG

Le format PNG offre quelque chose qu'un JPG ne peut pas: la transparence.

Le format PNG, ou Portable Network Graphics, est un format conçu pour le Web qui offre quelque chose qu'un JPG ne peut pas: la transparence. C'est la seule raison pour laquelle PNG est si populaire pour le téléchargement d'éléments tels que les logos dans les conceptions de sites Web.

Il existe deux types de PNG: PNG-8 et PNG-24. PNG-8 utilise une palette de couleurs plus limitée comprenant seulement 256 couleurs, une transparence légèrement meilleure et des exportations de petite taille. PNG-24 utilise une palette de couleurs illimitée, maintient la transparence mais exporte à une taille plus grande. Les deux types de fichiers PNG ont une compression sans perte.

Bien que les formats PNG soient similaires aux GIF, ils ne prennent pas en charge l'animation. Ce format est le plus souvent utilisé pour les icônes, les petites images fixes ou toute image nécessitant une transparence.

Avantages de la PNG

  • Soutient la transparence
  • Bon pour les images contenant du texte
  • Les formats PNG rendent bien les logos
  • Inclut une description textuelle intégrée pour les moteurs de recherche
  • PNG-8 a une petite taille de fichier et est très léger
  • Exportations sans bords dentelés

Contre de PNG

  • La taille des fichiers augmente rapidement pour les fichiers volumineux tels que les images
  • Certains clients de messagerie plus anciens ont du mal à les rendre
  • Pas d'animation
  • Les fichiers PNG-24 peuvent devenir volumineux; pas aussi bon pour le partage web

JPEG

Chaque fois qu'une photo est enregistrée et exportée au format JPG, elle se dégrade.

JPG, ou Joint Photographic Experts Group, ou JPEG, est probablement le format d'image le plus connu. C'est l'option par défaut pour la plupart des sauvegardes d'image, car elle convient aux photos grâce à un écran couleur pratiquement illimité.

JPG offre également la possibilité de choisir le degré de compression d’une image de 0% (compression forte) à 100% (pas de compression). La plupart des concepteurs optent pour une solution allant de 60 à 70%. Les images ont toujours une belle apparence à ce niveau de compression, mais la taille des fichiers est considérablement réduite.

JPG utilise une compression avec perte et ne conserve pas les données d'origine pendant la compression. Chaque fois qu'une photo est enregistrée et exportée au format JPG, elle se dégrade.

Le format JPG est le plus couramment utilisé pour les images, la photographie et tout ce qui a beaucoup de couleurs.

Avantages de JPEG

  • Idéal pour les couleurs vives et la photographie
  • Facile de réduire la taille des fichiers
  • Rend régulièrement dans les clients de messagerie

Contre de JPEG

  • Pas de transparence
  • Crée des bords déchiquetés pour le texte
  • Pas d'animation
  • Format avec perte
  • Pas de métadonnées automatiques pour la recherche, il doit inclure des informations alternatives

Quel format devriez-vous utiliser?

Maintenant que vous connaissez les différences entre SVG, PNG et JPG, que devriez-vous utiliser?

Vous pouvez vous poser quelques questions pour obtenir cette réponse.

Avez-vous besoin d'un format vectoriel ou raster?
Vecteur: SVG
Raster: JPG ou PNG

Avez-vous besoin de transparence?
Oui: SVG ou PNG
Non: JPG

Utilisez-vous une image haute en couleurs?
Oui: JPG ou PNG
Non: SVG

Est-ce une grande photo?
Oui: JPG
Non: PNG

Est-ce que l'image contient du texte?
Oui: PNG
Non: JPG

La compression sans perte est-elle importante pour vous?
Oui: SVG ou PNG
Non: JPG

Les graphiques doivent-ils être mis à jour et redéployés?
Oui: SVG
Non: PNG ou JPG

Utilisez-vous l'animation?
Oui: SVG
Non: JPG ou PNG

Conclusion

Les trois formats d'image - SVG, PNG et JPG - ont des applications pratiques et variées. SVG est le format le plus récent et peut souvent être enregistré dans un fichier de la plus petite taille, mais ce n’est pas toujours la meilleure option.

Réfléchissez à la manière dont vous utilisez les images dans votre projet lorsque vous sélectionnez un type de fichier pour trouver celui qui convient le mieux à vos objectifs. Vous pouvez même constater que les projets incluent des images qui utilisent les trois types de fichiers. (C'est en fait assez commun!)