Question PNG vs GIF vs JPEG vs SVG - Quand utiliser au mieux?


Quand faut-il utiliser certains types de fichiers d'image lors de la création de sites Web ou d'interfaces, etc.?

Quels sont leurs points de force et de faiblesse?

Je sais que PNG et GIF sont sans perte, alors que JPEG est lossy.
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 SVG et quand devrais-je l'utiliser?

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


524
2018-02-25 18:21


origine


Réponses:


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

D'abord, il y a deux types de compression: Sans perte et Lossy.

  • Sans perte signifie que l'image est réduite, mais sans nuire à la qualité.
  • Lossy signifie que l'image est faite (même) plus petite, mais au détriment de la qualité. Si vous sauvegardiez une image dans un format Lossy encore et encore, la qualité de l'image deviendrait 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 quelque chose appelé une carte de couleur
  • Direct signifie que vous pouvez stocker beaucoup milliers des couleurs qui n'ont pas été directement choisies par l'auteur

BMP - Lossless / Indexed 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 aussi peu ou pas de compression du tout, ce qui signifie que l'enregistrement en BMP se traduit par des tailles de fichier TRÈS importantes. Il peut avoir des palettes de Indexed et Direct, mais c'est une petite consolation. La taille des fichiers est si inutilement grande que personne n'utilise vraiment ce format.

Bon pour: Rien vraiment. Il n'y a rien BMP excelle, ou n'est pas mieux fait par d'autres formats.

BMP vs GIF


GIF - Lossless / Indexé seulement

GIF utilise la 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 réellement 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 une petite somme, et c'est le cas.

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

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

GIF vs JPEG


JPEG - Lossy / 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. Par conséquent, il s'agit d'un format Lossy, et si vous enregistrez le même fichier encore et encore, vous perdrez plus de données au fil du temps. Il a une palette de milliers de couleurs et est donc idéal pour les photos, mais la compression avec perte signifie que c'est mauvais pour les logos et les dessins au trait: non seulement ils auront l'air flous, mais ils auront aussi une taille de fichier plus grande que les GIFs!

Bon pour: Photographies. Aussi, les gradients.

JPEG vs GIF


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 a quelques inconvénients: Premièrement, il ne peut pas supporter l'animation comme le GIF peut (bien qu'il peut, mais seulement Firefox semble le soutenir, contrairement à l'animation GIF qui est supportée par tous les navigateurs). Deuxièmement, il a quelques problèmes de support avec les anciens navigateurs comme IE6. Troisièmement, des logiciels importants comme Photoshop ont une très mauvaise implémentation du format. (Damn you, Adobe!) PNG-8 ne peut stocker que 256 couleurs, comme les GIF.

Bon pour: La principale chose que PNG-8 fait mieux que GIF est d'avoir un support pour Alpha Transparency.

PNG-8 vs GIF


PNG-24 - Lossless / Direct

PNG-24 est un excellent format qui combine l'encodage sans perte avec la couleur directe (des milliers de couleurs, tout comme JPEG). C'est très similaire à BMP à cet égard, sauf que le format PNG compresse réellement les images, donc il en résulte 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 déterminer si vous souhaitez vraiment en utiliser un.

Même si les PNG-24 permettent des milliers de couleurs tout en ayant la 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 ne vous souciez pas de la taille du fichier et que vous voulez obtenir la meilleure qualité d'image possible.)

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


SVG - Lossless / Vecteur

Un type de fichier qui gagne actuellement en popularité est SVG, ce qui est différent de tout ce qui précède en ce qu'il est un vecteur format de fichier (ci-dessus sont tous raster). Cela signifie qu'il est 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:

PNG vs SVG

SVG vs PNG

Cela signifie que SVG est parfait pour les logos et les icônes que 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é à 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 bien. Il ne faut cependant pas oublier 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 peut ralentir l'ordinateur d'un utilisateur et même avoir 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 les animer.

En tout, ils sont parfaits pour les formes plates simples comme les logos ou les graphiques.

J'espère que ça aide!


1311
2017-10-13 10:45



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» simples (blocs de couleur unie) apparaîtront flous ou comporteront 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 les artefacts clairement. Les lignes droites (comme dans les dessins et les bandes dessinées et autres) se compressent très bien au format PNG et c'est sans perte. Le format GIF ne doit être utilisé que lorsque vous souhaitez que la transparence fonctionne dans IE6 ou que vous souhaitiez une animation. Le format 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 de l'image:

  • GIF si besoin d'animation ou de transparence qui fonctionne sur IE6 (note, 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 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 fais que donner des règles empiriques.


47
2018-02-25 18:25



Google a très bien écrit à ce sujet. De Sélection du bon format d'image, vous pouvez trouver un organigramme pour prendre la décision:

Selecting right image formate


38
2018-06-06 16:04



Je vais généralement avec PNG, car il semble avoir quelques avantages sur GIF. Il y avait des restrictions de brevet sur GIF, mais ceux-ci ont expiré.

Les GIF conviennent aux dessins au trait à arêtes vives (comme les logos) avec un nombre limité de couleurs. Cela tire parti 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 de films à basse résolution.

Compte tenu de la limitation générale de la palette d'images GIF à 256 couleurs, il n'est généralement pas utilisé comme format pour la photographie numérique. Les photographes numériques utilisent des formats de fichiers d'image capables de reproduire une plus grande gamme de couleurs, telles que TIFF, RAW ou JPEG avec perte, ce qui est plus approprié pour 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 supportent pas les animations. Les formats MNG et APNG, tous deux dérivés du format PNG, prennent en charge les animations, mais ne sont pas largement utilisés.


7
2018-02-25 18:30



JPEG aura une qualité médiocre autour des arêtes vives, et pour cette raison, il ne convient pas à la plupart des graphiques Web. Il excelle aux photographies.

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


6
2018-02-25 18:27



GIF est limité à 256 couleurs et ne supporte pas une réelle transparence. Vous devriez utiliser PNG au lieu de GIF car il offre une meilleure compression et des 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.


4
2018-02-25 18:29



png a une palette de couleurs plus large que gif et gif est properitary alors que png ne l'est pas. gif peut faire des animations, ce que normal-png ne peut pas faire. png-transparency est uniquement supporté par un navigateur plus récent que IE6, mais il existe un correctif Javascript pour ce problème. Les deux supportent 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 parce que la compression png ne fonctionne pas trop bien sur ceux-ci.


3
2018-02-25 18:26



GIF basé sur une palette de 256 couleurs par image (au moins dans son incarnation de base). PNG peut faire "TrueColour", c'est-à-dire 16,7 millions de couleurs dès la sortie de la boîte. Le PNG sans perte se compresse mieux que les GIF sans perte. Le format GIF peut faire une transparence "binaire" (0% d'opacité ou 100% d'opacité). PNG peut gérer les transparences alpha.

Dans l'ensemble, si vous n'avez pas besoin d'utiliser des images Alpha-transparent et soutenir IE6, PNG est probablement le meilleur choix lorsque vous avez besoin d'images pixel-parfait pour les illustrations vectorielles et autres. JPG est imbattable pour les photographies.


2
2018-02-25 18:26



Il y a un hack qui peut être fait pour utiliser les images GIF pour montrer la vraie couleur. On peut préparer une animation GIF avec 256 trames à palettes de couleur avec un délai de 0 trame et régler l'animation pour qu'elle ne soit montrée qu'une seule fois. Ainsi, toutes les images peuvent être affichées en même temps. À la fin, une vraie image GIF colorée est rendue.

De nombreux logiciels sont capables de précharger de telles images GIF. Cependant, la taille du fichier de sortie est supérieure à celle d'un fichier PNG. Il doit être utilisé si c'est vraiment nécessaire.


2
2017-12-30 12:36



La principale différence est que le 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 plus petits à première vue. 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 de fichier soit plus petite que celle du format GIF. Le problème est 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.


1
2018-02-25 18:29