SVG vs PNG vs JPG: Avantages et inconvénients du format d'image

/2016-01-04 00:04:46/
Brilee
/Graphiques/

Lorsqu'il s'agit 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 devez-vous utiliser: SVG vs PNG vs JPG?

Il fut un temps où vous utilisiez simplement un format JPG pour adapter l'espace à 72 dpi et passiez à autre chose. Plus maintenant. Des écrans haute résolution, plusieurs fenêtres et le besoin d'avoir un site Web accrocheur en ont fait un processus beaucoup plus complexe. Plongeons-nous dans les avantages et les inconvénients de chacun de ces formats!

SVG

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

SVG, ou graphiques vectoriels évolutifs, est incroyablement pratique. C'est pourquoi les concepteurs l'utilisent plus fréquemment.

Parce que SVG est un format vectoriel, ils ont fière allure à n'importe quelle taille et fonctionnent à peu près n'importe quel type d'image autre qu'une photo.

SVG est un format sans perte - ce qui signifie qu'il ne perd pas de données lorsqu'il est compressé - rend un nombre illimité de couleurs et est le plus souvent utilisé pour les graphiques et les logos sur le Web et pour les projets qui seront affichés sur la rétine ou 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 à styliser et à écrire
Les formats SVG sont pris en charge par les navigateurs modernes et sont évolutifs
Le format est hautement compressible et léger
Bon pour la recherche en raison du format texte
Prend en charge la transparence
Permet des images fixes ou animées

Inconvénients de SVG

La conception de SVG peut devenir compliquée
Ne restituez pas sur certains navigateurs dégradés
Prise en charge limitée des clients de messagerie

Vouloir en savoir davantage? Nous avons deux autres guides expliquant plus sur SVG: le Guide du débutant pratique pour SVG et comment (et pourquoi) SVG va prendre le relais.

PNG

PNG offre quelque chose qu'un JPG ne peut pas - la transparence.

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 a été si populaire pour télécharger des éléments tels que des 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 avec seulement 256 couleurs, a une transparence un peu meilleure et exporte à une petite taille. PNG-24 utilise une palette de couleurs illimitée, maintient la transparence mais exporte à une plus grande taille. Les deux types 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 couramment utilisé pour les icônes, les petites images fixes ou toute image nécessitant de la transparence.

Avantages de PNG

Prend en charge la transparence
Idéal pour les images contenant du texte
Les formats PNG rendent bien les logos
Comprend une description textuelle intégrée pour les moteurs de recherche
PNG-8 a une petite taille de fichier et est le plus léger
Exportations sans bords dentelés

Inconvénients 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'images car elle est compatible avec les photos grâce à un écran couleur pratiquement illimité.

JPG offre également la possibilité de choisir le niveau de compression d'une image entre 0% (compression élevée) et 100% (pas de compression). La plupart des concepteurs optent pour quelque chose de 60 à 70%. Les images semblent toujours bonnes à ce niveau de compression, mais la taille des fichiers est considérablement plus petite.

JPG utilise la 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 hautes couleurs et la photographie
Facile à réduire la taille des fichiers
Effectue un rendu cohérent dans les clients de messagerie

Inconvénients de JPEG

Pas de transparence
Crée des bords irréguliers pour le texte
Pas d'animation
Format avec perte
Aucune métadonnée automatique pour la recherche, doit inclure des informations

Quel format devez-vous utiliser?

Maintenant que vous savez quelles sont les différences entre SVG vs PNG vs JPG, que devez-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 couleur?
Oui: JPG ou PNG
Non: SVG

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

L'image contient-elle 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. Alors que SVG est le format le plus récent et peut souvent être enregistré dans la plus petite taille de fichier, ce n'est pas toujours la meilleure option.

Pensez à la façon dont vous utilisez les images dans votre projet lorsque vous sélectionnez un type de fichier pour trouver celui qui fonctionnera le mieux pour ce que vous essayez d'accomplir. Vous pouvez même constater que les projets incluent des images qui utilisent les trois types de fichiers. (C'est en fait assez courant!)