Quels sont les différents cas d'utilisation de PNG vs GIF vs JPEG vs SVG?
Quand faut-il utiliser certains types de fichiers image lors de la création de sites Web ou d'interfaces, etc.?
Quels sont leurs points forts et faibles?
Je sais que les formats PNG et GIF sont sans perte, alors que JPEG est avec perte.
Mais quelle est la principale différence entre PNG et GIF?
Pourquoi devrais-je préférer l’un à l’autre?
Si vous ne vous souciez pas de chaque pixel, devriez-vous toujours utiliser le format JPEG puisqu'il s'agit du plus "léger"?
Vous devez être conscient de quelques facteurs clés ...
Premièrement, il existe deux types de compression: sans perte et avec perte .
- Lossless signifie que l'image est réduite, mais sans en altérer la qualité.
- Lossy signifie que l'image est rendue (encore) plus petite, mais au détriment de la qualité. Si vous enregistrez une image au format Lossy à plusieurs reprises, la qualité de l’image empire progressivement.
Il existe également différentes profondeurs de couleur (palettes): Couleur indexée et Couleur directe .
- Indexed signifie que l'image ne peut stocker qu'un nombre limité de couleurs (généralement 256), contrôlées par l'auteur, dans ce que l'on appelle une carte de couleurs.
- Direct signifie que vous pouvez stocker de nombreux milliers de couleurs qui n'ont pas été directement choisies par l'auteur.
BMP - sans perte/indexé et direct
C'est un vieux format. Il est sans perte (aucune donnée d'image n'est perdue lors de la sauvegarde), mais il y a également peu ou pas de compression, ce qui signifie que l'enregistrement en tant que BMP entraîne une TRES grande taille des fichiers. Il peut avoir des palettes d'indexé et direct, mais c'est une petite consolation. La taille des fichiers est tellement grande que personne n’utilise vraiment ce format.
Bon pour: rien vraiment. Il n'y a rien que BMP excelle, ou ne soit pas mieux fait par d'autres formats.
GIF - Sans perte/Indexé uniquement
Le format GIF utilise une compression sans perte, ce qui signifie que vous pouvez enregistrer l'image à plusieurs reprises et ne jamais perdre de données. La taille des fichiers est beaucoup plus petite que celle du format BMP, car une bonne compression est effectivement utilisée, mais il ne peut stocker qu'une palette indexée. Cela signifie que dans la plupart des cas d'utilisation , il ne peut y avoir qu'un maximum de 256 couleurs différentes dans le fichier. Cela semble être une petite somme, et ça l'est.
Les images GIF peuvent également être animées et transparentes.
Avantages: logos, dessins au trait et autres images simples qui doivent être petites. Seulement vraiment utilisé pour les sites Web.
JPEG - Lossy/Direct
Les images JPEG ont été conçues pour produire des images photographiques détaillées aussi petites que possible en supprimant les informations que l'œil humain ne remarquera pas. En conséquence, il s'agit d'un format avec perte, et enregistrer le même fichier à plusieurs reprises entraînera la perte de plus de données au fil du temps. Il propose une palette de milliers de couleurs et convient donc parfaitement aux photographies. Toutefois, la compression avec perte le rend aussi mauvais pour les logos et les dessins au trait: non seulement elles auront un aspect flou, mais elles auront également une taille de fichier supérieure à celle des GIF!
Bon pour: Photographies. En outre, les gradients.
PNG-8 - Sans perte/Indexé
PNG est un format plus récent et PNG-8 (la version indexée de PNG) est un bon substitut pour les fichiers GIF. Malheureusement, il présente quelques inconvénients: Premièrement, il ne peut pas prendre en charge une animation comme le GIF (eh bien, il le peut, mais seul Firefox semble le supporter, contrairement à l’animation GIF qui est prise en charge par tous les navigateurs). Deuxièmement, il a des problèmes de support avec les anciens navigateurs comme IE6. Troisièmement, des logiciels importants comme Photoshop ont une mise en œuvre très médiocre du format. (Bon sang, Adobe!) PNG-8 ne peut stocker que 256 couleurs, comme les GIF.
Bon pour: La principale chose pour laquelle PNG-8 fait mieux que les GIF est le support de la transparence alpha.
PNG-24 - Sans perte/Direct
PNG-24 est un excellent format qui associe un codage sans perte à une couleur directe (des milliers de couleurs, tout comme le format JPEG). Cela ressemble beaucoup à BMP à cet égard, sauf que PNG compresse réellement les images, ce qui donne des fichiers beaucoup plus petits. Malheureusement, les fichiers PNG-24 seront toujours plus volumineux que les fichiers JPEG (pour les photos) et les fichiers GIF/PNG-8 (pour les logos et les graphiques). Vous devez donc toujours vous demander si vous souhaitez vraiment en utiliser un.
Même si les PNG-24 autorisent des milliers de couleurs avec compression, ils ne sont pas destinés à remplacer les images JPEG. Une photo enregistrée au format PNG-24 sera probablement au moins 5 fois plus grande qu'une image JPEG équivalente, avec une très légère amélioration de la qualité visible. (Bien entendu, cela peut être un résultat souhaitable si vous n'êtes pas préoccupé par la taille du fichier et souhaitez obtenir la meilleure qualité d'image possible.)
Tout comme PNG-8, PNG-24 prend également en charge la transparence alpha.
SVG - Lossless/Vector
Le type de fichier qui gagne en popularité est SVG, ce qui diffère de tous les précédents en ce qu'il s'agit d'un format de fichier vector (les précédents sont des raster ). Cela signifie qu’il est composé de lignes et de courbes au lieu de pixels. Lorsque vous zoomez sur une image vectorielle, vous voyez toujours une courbe ou une ligne. Lorsque vous zoomez sur une image raster, vous verrez des pixels.
Par exemple:
Cela signifie que SVG est idéal pour les logos et les icônes pour lesquels vous souhaitez conserver la netteté sur les écrans Retina ou de différentes tailles. Cela signifie également qu'un petit logo SVG peut être utilisé avec une taille beaucoup plus grande (grande) sans dégradation de la qualité de l'image - ce qui nécessiterait un fichier plus grand (en termes de taille de fichier) séparé avec des formats de trame.Les tailles de fichiers SVG sont souvent minuscules, même si elles sont visuellement très volumineuses, ce qui est bien. Il convient toutefois de noter que cela dépend de la complexité des formes utilisées. Les SVG nécessitent plus de puissance de calcul que les images raster, car des calculs mathématiques sont impliqués dans le tracé des courbes et des lignes. Si votre logo est particulièrement compliqué, il risque de ralentir l’ordinateur d’un utilisateur et même de créer une très grande taille de fichier. Il est important de simplifier autant que possible vos formes vectorielles.
De plus, les fichiers SVG sont écrits en XML et peuvent donc être ouverts et édités dans un éditeur de texte (!). Cela signifie que ses valeurs peuvent être manipulées à la volée. Par exemple, vous pouvez utiliser JavaScript pour modifier la couleur d'une icône SVG sur un site Web, comme vous le feriez avec du texte (c'est-à-dire sans avoir besoin d'une seconde image), ou même de les animer.
En tout, ils conviennent le mieux aux formes plates simples telles que les logos ou les graphiques.
J'espère que ça aide!.
I hope that helps!
JPEG n'est pas le plus léger pour tous les types d'images (ou même la plupart). Les coins, les lignes droites et les "remplissages" simples (blocs de couleur unie) apparaîtront flous ou auront des artefacts en fonction du niveau de compression. Il s’agit d’un format avec perte, idéal pour les photographies où vous ne pouvez pas voir les artefacts clairement. Les lignes droites (telles que dans les dessins, les bandes dessinées et autres) se compressent très bien en PNG et ne subissent aucune perte. Le format GIF ne doit être utilisé que lorsque vous souhaitez que la transparence fonctionne dans IE6 ou que vous souhaitez une animation. Le format GIF ne prend en charge que les palettes de 256 couleurs, mais est également sans perte.
Donc, fondamentalement, voici un moyen de décider du format d'image:
- GIF si besoin d'animation ou de transparence fonctionnant sous IE6 (remarque, la transparence PNG fonctionne après IE6)
- JPEG si l'image est une photo.
- PNG si des lignes droites comme dans une bande dessinée ou un autre dessin ou si une large gamme de couleurs est nécessaire avec la transparence (et IE6 n'est pas un facteur)
Et comme indiqué, si vous ne savez pas exactement ce que vous qualifieriez, essayez chaque format avec des taux de compression différents, pesez la qualité et la taille de l'image et choisissez celui qui vous convient le mieux. Je ne fais que donner des règles de base.
Je vais généralement en PNG, car il semble y avoir quelques avantages par rapport au GIF. Il y avait des restrictions de brevets sur les GIF, mais celles-ci ont expiré.
Les images GIF conviennent aux dessins au trait net (tels que les logos) comportant un nombre limité de couleurs. Cela tire parti de la compression sans perte du format, qui privilégie les zones plates de couleur uniforme avec des bords bien définis (contrairement au format JPEG, qui favorise les dégradés et les images plus douces).
Les GIF peuvent être utilisés pour de petites animations et des extraits de film à basse résolution.
Compte tenu de la limitation générale de la palette d'images GIF à 256 couleurs, celle-ci n'est généralement pas utilisée comme format de photographie numérique. Les photographes numériques utilisent des formats de fichier d’image capables de reproduire une plus grande gamme de couleurs, telles que TIFF, RAW ou JPEG avec perte, qui conviennent mieux à la compression de photographies.
Le format PNG est une alternative populaire aux images GIF, car il utilise de meilleures techniques de compression et n’a pas de limite de 256 couleurs, mais les fichiers PNG ne prennent pas en charge les animations. Les formats MNG et APNG, tous deux dérivés de PNG, prennent en charge les animations, mais ne sont pas largement utilisés.
JPEG aura une qualité médiocre autour des contours nets, etc., et pour cette raison, il ne convient pas à la plupart des graphiques Web. Il excelle dans les photographies.
Par rapport au format GIF, le format PNG offre une meilleure compression, une palette plus grande et davantage de fonctionnalités, y compris la transparence. Et c'est sans perte.
Le format GIF est limité à 256 couleurs et ne prend pas en charge la transparence réelle. Vous devez utiliser PNG au lieu de GIF car il offre une meilleure compression et de meilleures fonctionnalités. Le format PNG est idéal pour les images petites et simples telles que les logos, les icônes, etc.
JPEG a une meilleure compression avec des images complexes comme des photos.
le png a une palette de couleurs plus large que le gif et le gif est bon alors que le png ne l’est pas. gif peut faire des animations, ce que normal-png ne peut pas faire. png-transparence est uniquement pris en charge par le navigateur, qui est à peu près plus récent que IE6, mais il existe un correctif Javascript pour résoudre ce problème. Les deux supportent la transparence alpha. En général, je dirais que vous devriez utiliser png pour la plupart des graphismes en utilisant jpeg pour des photos, des captures d'écran ou des images similaires, car la compression png ne fonctionne pas trop bien sur Thoose.
GIF basé sur une palette de 256 couleurs par image (au moins dans son incarnation de base). PNG peut faire du "TrueColour", c'est-à-dire 16,7 millions de couleurs immédiatement. PNG sans perte compresse mieux que les GIF sans perte. GIF peut faire de la transparence "binaire" (0% d'opacité ou 100% d'opacité). Le format PNG peut gérer les transparents alpha.
Dans l’ensemble, si vous n’avez pas besoin d’utiliser des images transparentes avec Alpha et de prendre en charge IE6, le format PNG est probablement le meilleur choix lorsque vous avez besoin d’images pixel parfaites pour les illustrations vectorielles, etc. JPG est imbattable pour les photographies.
Il y a un bidouillage qui peut être fait pour utiliser des images GIF pour montrer les vraies couleurs. Vous pouvez préparer une animation GIF avec des images palettisées de 256 couleurs avec un délai de 0 image et définir l’animation pour qu’elle ne soit affichée qu’une seule fois. Ainsi, toutes les images pourraient être affichées en même temps. À la fin, une image GIF en vraie couleur est rendue.
De nombreux logiciels sont capables de réaliser de telles images GIF. Cependant, la taille du fichier de sortie est supérieure à celle d'un fichier PNG. Il faut l'utiliser si c'est vraiment nécessaire.
La principale différence est que GIF est breveté et un peu plus largement supporté. Le format PNG est une spécification ouverte et la transparence alpha n'est pas prise en charge dans IE6. Le support a été amélioré dans IE7, mais pas complètement corrigé.
En ce qui concerne la taille des fichiers, GIF a une palette de couleurs par défaut plus petite, de sorte qu’ils ont tendance à être de plus petite taille au premier abord. Les fichiers PNG ont une palette par défaut plus grande. Toutefois, vous pouvez réduire leur palette de couleurs afin que, lorsque vous le faites, la taille du fichier soit inférieure à celle du fichier GIF. Le problème, encore une fois, est que cette fonctionnalité n’est pas aussi prise en charge dans Internet Explorer.
De plus, comme les PNG peuvent prendre en charge la transparence alpha, ils constituent la seule option si vous souhaitez une variation de transparence autre que la transparence binaire.
Le format GIF comporte une palette de 8 bits (256 couleurs) contenant le format PNG allant jusqu’à 24 bits. Donc, PNG peut supporter plus de couleurs et bien sûr l'algorithme supporte la compression
Si vous optez pour le format JPEG et que vous utilisez des images pour un site Web, vous pouvez envisager le codeur Google Guetzli perceptual, qui est disponible gratuitement. D'après mon expérience, pour une qualité fixe, Guetzli produit des fichiers plus petits que les bibliothèques de codage JPEG standard, tout en maintenant une compatibilité totale avec le standard JPEG (vos images auront donc la même compatibilité que les images JPEG courantes).
Le seul inconvénient est que Guetzli met beaucoup de temps à encoder .. mais cela n’est fait qu’une fois, lorsque vous préparez l’image pour le site Web, tandis que les avantages restent pour toujours! Le téléchargement des images plus petites prend moins de temps, ce qui augmente la vitesse d'utilisation de votre site Web.
Depuis 2018, nous avons plusieurs nouveaux formats, une meilleure prise en charge des formats précédents et quelques astuces astucieuses consistant à utiliser des vidéos au lieu d'images.
Pour les photographies
jpg - reste le format d'image le plus largement pris en charge.
webp - Nouveau format de Google. Bon potentiel, bien que le navigateur support _ ne soit pas génial.
Pour les icônes et les graphiques
svg - autant que possible. Il évolue bien dans les écrans de rétine, éditable dans les éditeurs de texte et personnalisable via JS/CSS s’il est chargé dans DOM.
png - s’il s’agit de graphiques raster (c’est-à-dire créés dans Photoshop). Prend en charge la transparence, ce qui est essentiel dans ce cas d'utilisation.
Pour les animations
svg - plus animations css pour les graphiques vectoriels. Tous les avantages des animations svg + power of css.
gif - reste le format d'image animée le plus largement pris en charge.
mp4 - si les images animées sont en réalité de courts clips vidéo. Twitter /Whatsapp convertit les gifs en mp4.
apng - navigateur décent support (c'est-à-dire sans IE, Edge), mais sa création n'est pas aussi simple que les gifs.
webp - proche de l’utilisation de mp4. Pauvre soutien
Ceci est un Nice comparaison de divers formats d'images animées.
Enfin, quel que soit le format, assurez-vous de l’optimiser - Il existe des outils pour chaque format (par exemple, SVGO, Guetzli, OptiPNG, etc.) et peuvent économiser une bande passante considérable.