Quand il s’agit de créer des images pour le Web et à d’autres fins numériques, quels formats de fichiers vous donneront les meilleurs résultats? 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 juste un JPG pour définir l’espace à 72 dpi et que vous continuiez. Pas plus. Les affichages haute résolution, les vues multiples et la nécessité d’un site Web agile ont rendu ce processus beaucoup plus complexe. Plongeons-nous dans les avantages et les inconvénients de chacun de ces formats!
Svg
SVG a fière allure dans toutes les tailles et fonctionne pour presque tous les types d’images autres qu’une photo.
SVG, ou Scalable Vector Graphics, est incroyablement pratique. C’est pourquoi les concepteurs l’utilisent plus souvent.
Parce que SVG est un format vectoriel, ils ont fière allure dans toutes les tailles et fonctionnent pour presque tous les types d’images autres qu’une photo.
SVG est un format sans perte, ce qui signifie qu’il ne perd aucune donnée lorsqu’il est compressé, génère un nombre illimité de couleurs et est le plus couramment utilisé pour les graphiques et les logos sur le Web et pour les projets qui seront visualisés sur la rétine ou autre. la définition affiche la résolution.
Avantages de SVG
- Le format vectoriel rend bien dans n’importe quelle taille
- Possibilité de créer des représentations SVG simples dans un éditeur de code ou de texte
- Concevez et exportez des graphiques complexes depuis Adobe Illustrator ou Sketch
- Le texte SVG est accessible
- Les formats SVG sont compatibles avec les navigateurs modernes et sont préparés pour l’avenir
- Le format est hautement compressible et léger.
- Idéal pour la recherche grâce au formatage basé sur du texte
- Permet la transparence
- Permet des images fixes ou animées
Contre de SVG
- La conception en SVG peut être délicate
- Ne s’affiche pas dans certains navigateurs plus anciens
- Prise en charge limitée des clients de messagerie.
PNG
PNG offre quelque chose qu’un JPG ne peut pas: 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 raison pourquoi PNG a été si populaire pour télécharger des éléments tels que des logos dans la conception 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 légèrement meilleure et exporte dans une petite taille. PNG-24 utilise une palette de couleurs illimitée, maintient la transparence mais exporte à une taille plus grande. Les deux types de PNG ont une compression sans perte.
Bien que les formats PNG soient similaires aux GIF, les GIF 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 PNG
- Permet la transparence
- Idéal pour les images avec du texte
- Les formats PNG représentent 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 plus léger
- Exportations sans bords irréguliers
Inconvénients de PNG
- La taille des fichiers augmente rapidement pour les fichiers volumineux comme les images
- Certains clients de messagerie plus anciens ont du mal à les rendre
- Pas d’animation
- Les fichiers PNG-24 peuvent être agrandis; pas si bon pour le partage Web
JPEG
Chaque fois qu’une photo est à nouveau enregistrée et exportée au format JPG, elle perdra de sa qualité.
JPG, ou Joint Photographic Experts Group, ou JPEG, est probablement le format d’image le plus populaire. C’est l’option par défaut pour la plupart des images enregistrées car elle est compatible avec les photos, grâce à un écran couleur pratiquement illimité.
JPG offre également la possibilité de choisir le degré de compression d’une image de 0% (forte compression) à 100% (pas de compression). La plupart des concepteurs optent pour la gamme 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 à nouveau 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 la photographie et les couleurs intenses
- Facile à réduire la taille du fichier
- Utilisé constamment dans les clients de messagerie
Inconvénients de JPEG
- Pas de transparence
- Créer des bords irréguliers pour le texte
- Pas d’animation
- Format avec perte
- Il n’y a pas de métadonnées automatiques pour la recherche, vous devez inclure des informations alternatives
Quel format dois-je utiliser?
Maintenant que vous savez quelles sont certaines des différences entre SVG, PNG et JPG, quel format devez-vous utiliser pour vos projets?
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
Envisagez-vous de faire du référencement?
Oui: SVG ou PNG
Non: JPG
conclusion
Les trois formats d’image (SVG, PNG et JPG) ont des applications puissantes et pratiques. Bien que SVG soit le format le plus récent et puisse souvent être enregistré dans la plus petite taille de fichier, ce n’est pas toujours la meilleure option.
Pensez à 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 à ce que vous essayez d’obtenir. Vous pouvez même constater que les projets incluent des images qui utilisent les trois types de fichiers. (C’est en fait assez courant!)
