Quelles sont les différentes utilisations 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 PNG et GIF sont sans perte, tandis 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? Qu'est-ce que le SVG et quand dois-je l'utiliser?

Si vous ne vous souciez pas de chaque pixel, devez-vous toujours utiliser JPEG car c'est le "plus léger"?

Vous devez être conscient de quelques facteurs clés ...

Premièrement, il existe deux types de compression: Lossless et Lossy .

• Sans perte signifie que l'image est rendue plus petite, mais sans préjudice de la qualité.
• Lossy signifie que l'image est rendue (encore) plus petite, mais au détriment de la qualité. Si vous enregistrez une image dans un format Lossy encore et encore, la qualité de l'image devient de plus en plus mauvaise.

Il existe également différentes profondeurs de couleurs (palettes): couleur indexée et couleur directe .

• Indexé 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 qu'on appelle une carte de couleurs
• Direct signifie que vous pouvez stocker plusieurs milliers de couleurs qui n'ont pas été directement choisies par l'auteur

BMP - Sans perte / indexé et direct

Il s'agit d'un ancien format. Il est sans perte (aucune donnée d'image n'est perdue lors de la sauvegarde) mais il y a aussi peu ou pas de compression du tout, ce qui signifie que l'enregistrement en tant que BMP entraîne des tailles de fichier TRÈS volumineuses. Il peut avoir des palettes à la fois indexées et directes, mais c'est une petite consolation. La taille des fichiers est si inutilement grande que personne n'utilise jamais vraiment ce format.

Bon pour: rien de vraiment. Il n'y a rien dans lequel BMP excelle ou n'est pas amélioré par d'autres formats.

GIF - Sans perte / indexé uniquement

GIF utilise une compression sans perte, ce qui signifie que vous pouvez enregistrer l'image encore et encore et ne jamais perdre de données. Les tailles de fichier sont beaucoup plus petites que BMP, car une bonne compression est effectivement utilisée, mais elle ne peut stocker qu'une palette indexée. Cela signifie que pour 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 un tout petit peu, et c'est le cas.

Les images GIF peuvent également être animées et transparentes.

Bon pour: logos, dessins au trait et autres images simples qui doivent être petites. Seulement vraiment utilisé pour les sites Web.

JPEG - avec perte / direct

Les images JPEG ont été conçues pour rendre les images photographiques détaillées aussi petites que possible en supprimant les informations que l'œil humain ne remarquera pas. En conséquence, c'est un format avec perte, et l'enregistrement du même fichier encore et encore entraînera la perte de plus de données au fil du temps. Il a une palette de milliers de couleurs et est donc idéal pour les photographies, mais la compression avec perte signifie qu'il est mauvais pour les logos et les dessins au trait: non seulement ils auront l'air flous, mais ces images auront également une taille de fichier plus grande que les GIF!

Bon pour: les photographies. Aussi, les dégradés.

PNG-8 - Sans perte / indexé

PNG est un format plus récent, et PNG-8 (la version indexée de PNG) est vraiment un bon remplacement pour les GIF. Malheureusement, il présente quelques inconvénients: tout d'abord, il ne peut pas prendre en charge l'animation comme le GIF (bien qu'il le puisse, mais seul Firefox semble le prendre en charge, 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, les logiciels importants comme Photoshop ont une très mauvaise implémentation du format. (Merde, Adobe!) PNG-8 ne peut stocker que 256 couleurs, comme les GIF.

Bon pour: La principale chose que PNG-8 fait mieux que les GIF est la prise en charge d'Alpha Transparency.

PNG-24 - Sans perte / direct

PNG-24 est un excellent format qui combine l'encodage sans perte avec la couleur directe (des milliers de couleurs, tout comme 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 GIF / PNG-8 (pour les logos et les graphiques), vous devez donc toujours déterminer si vous souhaitez vraiment en utiliser un.

Même si les PNG-24 autorisent des milliers de couleurs tout en ayant une compression, ils ne sont pas destinés à remplacer les images JPEG. Une photographie enregistrée au format PNG-24 sera probablement au moins 5 fois plus grande qu'une image JPEG équivalente, avec très peu d'amélioration de la qualité visible. (Bien sûr, cela peut être un résultat souhaitable si vous n'êtes pas préoccupé par la taille du fichier et que vous souhaitez obtenir la meilleure image possible.)

Tout comme PNG-8, PNG-24 prend également en charge la transparence alpha.

SVG - Sans perte / vecteur

Un type de fichier qui gagne actuellement en popularité est SVG, qui est différent de tout ce qui précède en ce qu'il s'agit d'un format de fichier vectoriel (les éléments ci-dessus sont tous raster ). Cela signifie qu'il est en fait composé de lignes et de courbes au lieu de pixels. Lorsque vous effectuez un zoom avant sur une image vectorielle, vous voyez toujours une courbe ou une ligne. Lorsque vous effectuez un zoom avant sur une image raster, vous verrez des pixels.

Par exemple:

Cela signifie que SVG est parfait pour les logos et les icônes que vous souhaitez conserver la netteté sur les écrans Retina ou à différentes tailles. Cela signifie également qu'un petit logo SVG peut être utilisé à une taille beaucoup plus grande (plus grande) sans dégradation de la qualité de l'image - quelque chose qui nécessiterait un fichier séparé plus grand (en termes de taille de fichier) avec des formats raster.

Les tailles de fichiers SVG sont souvent minuscules, même si elles sont visuellement très grandes, ce qui est génial. Il convient toutefois de garder à l'esprit 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 les calculs mathématiques sont impliqués dans le dessin des courbes et des lignes. Si votre logo est particulièrement compliqué, il pourrait ralentir l'ordinateur d'un utilisateur et même avoir une très grande taille de fichier. Il est important de simplifier au maximum vos formes vectorielles.

De plus, les fichiers SVG sont écrits en XML et peuvent donc être ouverts et modifié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 changer la couleur d'une icône SVG sur un site Web, tout comme vous le feriez avec du texte (c.-à-d. Pas besoin d'une deuxième image), ou même les animer.

En tout, ils conviennent mieux aux formes plates simples comme les logos ou les graphiques.

J'espère que ça aide!

JPEG n'est pas le plus léger pour toutes sortes d'images (ou même la plupart). Les coins et les lignes droites et les "remplissages" unis (blocs de couleur unie) apparaissent flous ou contiennent des artefacts en fonction du niveau de compression. C'est un format avec perte et fonctionne mieux pour les photographies où vous ne pouvez pas voir clairement les artefacts. Les lignes droites (comme dans les dessins et les bandes dessinées et autres) se compressent très bien en PNG et c'est sans perte. GIF ne doit être utilisé que lorsque vous souhaitez que la transparence fonctionne dans IE6 ou que vous souhaitez une animation. GIF ne prend en charge qu'une palette de 256 couleurs mais est également sans perte.

Donc, fondamentalement, voici un moyen de décider du format d'image:

• GIF si nécessite une animation ou une transparence qui fonctionne sur IE6 (notez que la transparence PNG fonctionne après IE6)
• JPEG si l'image est une photographie.
• 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 transparence (et IE6 n'est pas un facteur)

Et comme indiqué, si vous n'êtes pas sûr de ce qui pourrait être qualifié, essayez chaque format avec des taux de compression différents et pesez la qualité et la taille de l'image et choisissez celle qui vous semble la meilleure. Je ne donne que des règles de base.

J'utilise généralement le PNG, car il semble avoir quelques avantages par rapport au GIF. Il y avait des restrictions de brevets sur le GIF, mais celles-ci ont expiré.

Les GIF conviennent aux dessins au trait à bords nets (tels que les logos) avec un nombre limité de couleurs. Cela profite de la compression sans perte du format, qui favorise les zones plates de couleur uniforme avec des bords bien définis (contrairement au JPEG, qui favorise les dégradés lisses et les images plus douces).

Les GIF peuvent être utilisés pour de petites animations et des clips vidéo basse résolution.

Compte tenu de la limitation générale de la palette d'images GIF à 256 couleurs, elle n'est généralement pas utilisée comme format pour la photographie numérique. Les photographes numériques utilisent des formats de fichiers d'images capables de reproduire une plus grande gamme de couleurs, tels que TIFF, RAW ou JPEG avec perte, qui convient 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 une limite de 256 couleurs, mais les 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.

Le JPEG aura une mauvaise qualité autour des arêtes vives, etc. et pour cette raison, il ne convient pas à la plupart des graphiques Web. Il excelle dans les photographies.

Comparé au GIF, le PNG offre une meilleure compression, une palette plus grande et plus de fonctionnalités, y compris la transparence. Et c'est sans perte.

GIF est limité à 256 couleurs et ne prend pas en charge la véritable transparence. Vous devez utiliser PNG au lieu de GIF car il offre une meilleure compression et de meilleures fonctionnalités. PNG est idéal pour les images petites et simples comme les logos, les icônes, etc.

JPEG a une meilleure compression avec des images complexes comme des photos.

Il existe un hack qui peut être fait pour utiliser des images GIF pour afficher la vraie couleur. On peut préparer une animation GIF avec 256 images en palette de couleurs avec un retard de 0 image et régler l'animation pour qu'elle ne s'affiche qu'une seule fois. Ainsi, toutes les images peuvent être affichées en même temps. À la fin, une image GIF aux couleurs vraies est rendue.

De nombreux logiciels sont capables de préparer ces images GIF. Cependant, la taille du fichier de sortie est supérieure à un fichier PNG. Il doit être utilisé s'il est vraiment nécessaire.

png a une palette de couleurs plus large que gif et gif est propre alors que png ne l'est pas. gif peut faire des animations, ce que normal-png ne peut pas faire. png-transparence n'est pris en charge que par le navigateur à peu près plus récent qu'IE6, mais il existe un correctif Javascript pour ce problème. Les deux prennent en charge la transparence alpha. En général, je dirais que vous devriez utiliser png pour la plupart des webgraphics tout en utilisant jpeg pour les photos, les captures d'écran ou 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 "TrueColour", soit 16,7 millions de couleurs hors de la boîte. Le PNG sans perte se comprime mieux que les GIF sans perte. GIF peut faire une transparence "binaire" (0% d'opacité ou 100% d'opacité). PNG peut gérer les transparents alpha.

Dans l'ensemble, si vous n'avez pas besoin d'utiliser des images transparentes Alpha et de prendre en charge IE6, PNG est probablement le meilleur choix lorsque vous avez besoin d'images parfaites en pixels pour des illustrations vectorielles et autres. JPG est imbattable pour les photographies.

À partir de 2018, nous avons plusieurs nouveaux formats, un meilleur support pour les formats précédents et quelques astuces intelligentes d'utilisation de vidéos au lieu d'images.

Pour les photographies

jpg - toujours le format d'image le plus largement pris en charge.

webp- Nouveau format de google. Bon potentiel, bien que la prise en charge du navigateur ne soit pas excellente.

Pour les icônes et les graphiques

svg- dès que possible. Il évolue bien dans les écrans de rétine, modifiable 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 lorsqu'ils sont créés dans photoshop). Prend en charge la transparence qui est très essentielle dans ce cas d'utilisation.

Pour les animations

svg- plus des animations CSS pour les graphiques vectoriels. Tous les avantages de svg + puissance des animations css.

gif - toujours le format d'image animée le plus largement pris en charge.

mp4- si les images animées sont en fait de courts clips vidéo. Twitter / Whatsapp convertit les gifs en mp4.

apng- navigateur décent soutien (pas de IE, bord), mais la création est pas aussi simple que gifs.

webp- proche de l'utilisation de mp4. Mauvais soutien

Ceci est une belle comparaison de différents 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 peut économiser une bande passante considérable.

La principale différence est que le GIF est breveté et un peu plus largement pris en charge. 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 les tailles de fichier, GIF a une palette de couleurs par défaut plus petite, donc elles ont tendance à être de plus petite taille au premier coup d'œil. Les fichiers PNG ont une palette par défaut plus grande, mais vous pouvez réduire leur palette de couleurs afin que, lorsque vous le faites, leur taille soit inférieure à GIF. Le problème est encore une fois que cette fonctionnalité n'est pas prise en charge dans Internet Explorer.

De plus, comme les fichiers PNG peuvent prendre en charge la transparence alpha, ils sont la seule option si vous souhaitez une variation de transparence autre que la transparence binaire.

Si vous optez pour JPEG et que vous avez affaire à des images pour un site Web, vous voudrez peut-être envisager l' encodeur perceptuel Google Guetzli , 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 conservant une compatibilité totale avec la norme JPEG (de sorte que vos images auront la même compatibilité que les images JPEG courantes).

Le seul inconvénient est que Guetzli prend beaucoup de temps pour encoder .. mais cela n'est fait qu'une seule fois, lorsque vous préparez l'image pour le site Web, alors que les avantages restent pour toujours! Les images plus petites prendront moins de temps à télécharger, donc la vitesse de votre site Web augmentera au quotidien.

GIF a une palette de 8 bits (256 couleurs) où PNG comme palette de couleurs jusqu'à 24 bits. Donc, PNG peut prendre en charge plus de couleurs et bien sûr l'algorithme prend en charge la compression

Comme l'a souligné @aarjithn, WebP est un codec pour stocker des photographies.

Il s'agit également d'un codec pour stocker des animations (séquence d'images animées). À partir de 2020, la plupart des navigateurs grand public ont une prise en charge prête à l'emploi ( tableau de compatibilité ). Remarque pour WIC, un plugin est disponible.

Il présente des avantages par rapport à GIF car il est basé sur un codec vidéo VP8 et a une gamme de couleurs plus large que GIF, où GIF limite à 256 couleurs, il l'étend à 2 ²⁴ = 16777216 couleurs, tout en économisant une quantité importante d'espace.