42 votes

JPEG vs PNG vs BMP vs GIF vs SVG

Je voudrais savoir lequel de ces formats nécessite moins de mémoire pour la même qualité d'image, et quelles sont les principales différences entre ces formats.

76voto

paulgreg Points 5271

À la manière de xkcd de lbrandy.com:

texte alternatif

66voto

Cory R. King Points 1634

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

Tout d'abord, il existe deux types de compression : Lossless et Lossy.

  • Lossless signifie que l'image est réduite, mais sans aucune diminution de la qualité.
  • Lossy signifie que l'image est réduite encore plus, mais au détriment de la qualité. Si vous enregistrez 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 couleur (palettes) : Couleur indexée et Couleur directe.

  • Indexed signifie que l'image peut seulement stocker un nombre limité de couleurs (habituellement 256), contrôlées par l'auteur, dans quelque chose appelé une Carte des couleurs.
  • Direct signifie que vous pouvez stocker de nombreuses milliers de couleurs qui n'ont pas été directement choisies par l'auteur.

BMP - Lossless / Indexed et Direct

C'est un ancien format. Il est Lossless (aucune donnée d'image n'est perdue lors de l'enregistrement) mais il n'y a également presque aucune compression du tout, ce qui signifie que l'enregistrement en tant que BMP donne des tailles de fichier TRÈS grandes. Il peut avoir des palettes à la fois Indexed et Direct, mais c'est une maigre consolation. Les tailles de fichier sont tellement inutilement grandes que personne n'utilise vraiment ce format.

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

BMP vs GIF


GIF - Lossless / Indexed uniquement

Le GIF utilise une compression sans perte, ce qui signifie que vous pouvez enregistrer l'image encore et encore sans perdre de données. Les tailles de fichier sont beaucoup plus petites que les BMP, car une bonne compression est effectivement utilisée, mais il 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 nombre assez restreint, et c'est le cas.

Les images GIF peuvent également être animées et avoir de la transparence.

Bon pour : Logos, dessins linéaires et autres images simples qui doivent être petites. Principalement 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 des informations que l'œil humain ne remarquera pas. En conséquence, c'est un format Lossy, et en enregistrant le même fichier encore et encore, de plus en plus de données seront perdues au fil du temps. Il possède une palette de milliers de couleurs et est donc idéal pour les photographies, mais la compression Lossy signifie qu'il n'est pas adapté aux logos et aux dessins linéaires : non seulement ils auront l'air flous, mais de telles images auront également une plus grande taille de fichier par rapport aux GIF !

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

JPEG vs GIF


PNG-8 - Lossless / Indexed

Le PNG est un format plus récent, et le PNG-8 (la version indexée du PNG) est vraiment un bon remplacement pour les GIF. Malheureusement, il a quelques inconvénients : Tout d'abord, il ne peut pas prendre en charge l'animation comme le GIF le peut (eh bien, il le peut, mais seulement Firefox semble le prendre en charge, contrairement à l'animation GIF prise en charge par tous les navigateurs). Deuxièmement, il a quelques problèmes de compatibilité avec les anciens navigateurs comme IE6. Troisièmement, des logiciels importants comme Photoshop ont une très mauvaise implémentation du format. (Maudit soit Adobe !) Le PNG-8 ne peut stocker que 256 couleurs, comme les GIF.

Bon pour : La principale chose que le PNG-8 fait mieux que les GIF est de prendre en charge la transparence Alpha.

PNG-8 vs GIF

Note importante : Photoshop ne prend pas en charge la transparence Alpha pour les fichiers PNG-8. (Maudit soit Photoshop !) Il existe des moyens de convertir les fichiers PNG-24 de Photoshop en fichiers PNG-8 tout en conservant leur transparence. Une méthode est PNGQuant, une autre est d'enregistrer vos fichiers avec Fireworks.


PNG-24 - Lossless / Direct

Le PNG-24 est un excellent format qui combine un encodage Lossless avec une couleur Directe (des milliers de couleurs, comme JPEG). Il est très similaire au BMP à cet égard, sauf que le PNG compresse réellement les images, ce qui donne des fichiers beaucoup plus petits. Malheureusement, les fichiers PNG-24 seront encore beaucoup plus volumineux que les JPEG, les GIF et les PNG-8, vous devez donc toujours considérer si vous voulez vraiment en utiliser un.

Même si les PNG-24 permettent des milliers de couleurs tout en étant compressés, ils ne sont pas destinés à remplacer les images JPEG. Une photographie enregistrée en PNG-24 sera probablement au moins 5 fois plus grande qu'une image JPEG équivalente, avec très peu d'amélioration visible de la qualité. (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 image possible.)

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


SVG - Lossless / Vector

Un type de fichier qui gagne actuellement en popularité est le SVG, qui est différent de tous les autres ci-dessus car c'est un format de fichier vectoriel (les précédents sont tous des raster). Cela signifie qu'il est réellement 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 :

PNG vs SVG

SVG vs PNG

Cela signifie que le SVG est idéal pour les logos et les icônes que vous souhaitez conserver nets sur des écrans Retina ou à des tailles différentes.

De plus, les fichiers SVG sont écrits en utilisant XML, et peuvent donc être ouverts et édités dans un éditeur de texte, ils peuvent être manipulés à la volée, si vous le souhaitez. Par exemple, vous pourriez utiliser JavaScript pour changer 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 deuxième image).

J'espère que cela aide !

54voto

harrymc Points 394411

De Quelle est la différence entre un fichier TIFF, GIF, JPG, JPEG, PNG et un fichier BMP ?

BMP - Bitmap. C'était probablement le premier type de format d'image numérique dont je me souvienne. Chaque image sur un ordinateur semblait être un BMP à cette époque. Sous Windows XP, le programme Paint enregistre automatiquement ses images en BMP. Cependant, sous Windows Vista et ultérieurs, les images sont désormais enregistrées en JPEG. Le BMP est la plateforme de base pour de nombreux autres types de fichiers.

JPG / JPEG - (Joint Photographic Experts Group) Le format Jpeg est utilisé pour les photographies en couleur, ou toute image avec de nombreux dégradés ou couleurs mélangées. Il n'est pas adapté aux bords nets et a tendance à les rendre un peu flous à moins d'être stocké en haute qualité. Ce format est devenu populaire avec l'invention de l'appareil photo numérique. La plupart, sinon tous, des appareils photo numériques téléchargent les photos sur votre ordinateur en tant que fichier Jpeg. De toute évidence, les fabricants d'appareils photo numériques voient la valeur des images de haute qualité qui finissent par prendre moins de place.

GIF - (Graphics Interchange Format) Le format Gif est le mieux utilisé pour le texte, les dessins linéaires, les captures d'écran, les dessins animés et les animations. Le format Gif est limité à un total de 256 couleurs ou moins, donc les images Gif sont relativement petites. Il est couramment utilisé pour des pages web à chargement rapide. Il constitue également une excellente bannière ou un excellent logo pour votre site web. Les images animées peuvent également être enregistrées au format GIF sous forme de séquence d'images statiques. Par exemple, une bannière clignotante serait enregistrée sous forme de fichier Gif.

PNG - (Portable Networks Graphic) Ce format sans perte est l'un des meilleurs formats d'image. Il n'était pas toujours compatible avec tous les navigateurs web ou les logiciels d'image, mais de nos jours, c'est le meilleur format d'image à utiliser pour un site web. J'utilise .png pour les logos et les captures d'écran. Une de ses capacités les plus étonnantes est de pouvoir compresser les images sans perte (sans perte de pixels), bien que la taille compressée finale varie entre les éditeurs d'images.

TIFF - (Tagged Image File Format) Ce format de fichier n'a pas été mis à jour depuis 1992 et est désormais détenu par Adobe. Il peut stocker une image et des données (tags) dans un seul fichier. Le TIFF peut être compressé, mais c'est plutôt sa capacité à stocker des données d'image dans un format sans perte qui rend un fichier TIFF utile comme archive d'images, car contrairement aux fichiers JPEG standard, un fichier TIFF utilisant une compression sans perte (ou aucune) peut être édité et réenregistré sans perte de qualité d'image. Ce format de fichier est couramment utilisé pour la numérisation, la télécopie, le traitement de texte, etc. Ce n'est plus un format de fichier courant à utiliser avec vos photos numériques, car le jpeg offre une grande qualité et prend moins de place.

29voto

Ferruccio Points 51508

Les réponses existantes incluent très peu de données techniques, donc je vais les inclure ici.

  • JPEG : jusqu'à 24 bits de couleur (peut-être plus ?), compression variable (généralement élevée), perte de données, pas de support alpha
  • PNG : jusqu'à 48 bits de couleur, compression modérée, sans perte de données, support alpha
  • BMP : jusqu'à 24 bits de couleur, très peu de compression, sans perte de données, support alpha
  • GIF : jusqu'à 8 bits de couleur, petite compression, sans perte de données, support de la transparence, support de l'animation

Profondeur de couleur

  • 8 bits de couleur == 256 couleurs
  • 24 bits de couleur == 16 777 216 couleurs
  • 48 bits de couleur == 281 474 976 710 656 couleurs

La plupart des écrans d'ordinateur fonctionnent avec une profondeur de couleur de 24 bits. L'œil humain peut distinguer environ autant de couleurs. Une profondeur de couleur supplémentaire est principalement destinée à conserver des informations provenant d'un capteur afin que la manipulation d'une photographie dispose de plus de données avec lesquelles travailler. Essayer de représenter une photographie en 8 bits de couleur entraînera une granularité.

Compression

Cela fait référence essentiellement à la taille finale du fichier. Une compression plus élevée se traduit par un fichier plus petit. Cependant, le JPEG obtient des tailles de fichier réduites en éliminant des données. C'est ce qu'on appelle la compression "avec pertes", car vous ne pourrez jamais retrouver les données originales non compressées. Sa compression est également optimisée pour les photographies où les bords à fort contraste sont rares. Comme indiqué dans d'autres réponses, c'est un mauvais choix pour tout sauf les photographies.

Alpha/Transparence

Alpha fait référence à la transparence, mais cela implique qu'il y a plus d'un niveau de transparence. Le GIF a la capacité de définir des pixels transparents, mais ils sont soit opaques, soit 100 % transparents, et "transparent" est utilisé comme l'une des 256 couleurs. Le PNG et le BMP ont la capacité de marquer chaque pixel comme opaque, transparent ou partiellement transparent, comme un morceau de verre coloré. Le plus souvent, il y a 256 niveaux de transparence, bien que le PNG puisse en réalité avoir jusqu'à 65 536 niveaux. Le JPEG ne prend pas en charge la transparence.

Animation

En pratique, parmi ces formats, seul le GIF prend en charge l'animation. Il existe des spécifications pour l'animation avec le PNG (MNG, APNG) et le JPEG (MJPEG), mais elles ne sont pas largement prises en charge. (APNG fonctionne dans les versions récentes de Firefox et Opera.) En pratique, la plupart des animations que vous voyez sur les pages web sont mises en œuvre en Flash.

25voto

lluismontero Points 998
  • Utilisez GIF si l'image a peu de couleurs (comme des icônes). Peut également être utilisé pour des images animées (comme des bannières publicitaires).
  • Utilisez JPG si l'image a beaucoup de couleurs (comme des photos). JPEG est la même chose.
  • Utilisez BMP si vous voulez enregistrer l'image sans compression. Taille de fichier beaucoup plus grande!
  • Utilisez PNG si vous voulez publier l'image sur le web et être à jour sur les normes modernes. Avantages : Convient comme remplacement moderne pour GIF et JPG, et est une norme ouverte, et permet la transparence. Inconvénients : Non pris en charge par les logiciels plus anciens, et la taille du fichier peut être plus grande que celle du GIF ou JPG comparable.

SistemesEz.com

SystemesEZ est une communauté de sysadmins où vous pouvez résoudre vos problèmes et vos doutes. Vous pouvez consulter les questions des autres sysadmins, poser vos propres questions ou résoudre celles des autres.

Powered by:

X