web-dev-qa-db-ja.com

JPEG vs PNG vs BMP vs GIF vs SVG

これらのフォーマットのどれが同じ画質の画像でより少ないメモリを必要とするか、そしてこれらのフォーマット間の主な違いは何ですか?.

40
Narek

から TIFF、GIF、JPG、JPEG、PNG、a BMP file? の違いは何ですか?

[〜#〜] bmp [〜#〜] -ビットマップ。これはおそらく私が覚えている最初のタイプのデジタル画像フォーマットでした。コンピュータ上のすべての画像は、当時はBMPのように見えました。 WindowsではXP Paintプログラムは画像をBMPに自動的に保存します。ただし、Windows Vista以降の画像はJPEGに保存されます。BMPは基本プラットフォームです他の多くのファイルタイプ用。

JPG/JPEGJoint Photographic Experts Group)Jpeg形式は、カラー写真や、多くのブレンドやグラデーションのある写真に使用されます。シャープなエッジでは不向きで、高品質で保存しない限り、エッジが少しぼやける傾向があります。この形式は、デジタルカメラの発明で普及しました。すべてではありませんが、ほとんどのデジタルカメラは写真をJpegファイルとしてコンピューターにダウンロードします。明らかに、デジタルカメラメーカーは、最終的に少ないスペースを占める高品質の画像の価値を認識しています。

---([〜#〜] gif [〜#〜]グラフィックス交換形式)Gif形式は、テキスト、線画、スクリーンショット、漫画、アニメーションに最適です。 GIFは256色以下の総数に制限されているため、GIF画像は比較的小さくなります。これは、Webページの高速読み込みに一般的に使用されます。また、ウェブページのバナーやロゴとしても最適です。アニメーション画像は、一連の静止画像としてGIF形式で保存することもできます。たとえば、点滅するバナーはGifファイルとして保存されます。

---([〜#〜] png [〜#〜]ポータブルネットワークグラフィック)このロスレスフォーマットは、最高の画像フォーマットの1つです。すべてのWebブラウザーまたは画像ソフトウェアと常に互換性があるわけではありませんでしたが、現在では、Webサイトで使用するのに最適な画像形式です。ロゴとスクリーンショットには.pngを使用しています。その最も驚くべき機能の1つは、最終的な圧縮サイズは画像エディターによって異なりますが、画像を可逆的に(ピクセルを失うことなく)圧縮できることです。

---([〜#〜] tiff [〜#〜] -(タグ付き画像ファイル形式)このファイル形式は1992年以来更新されておらず、現在Adobeが所有しています。画像とデータ(タグ)を1つのファイルに保存できます。 TIFFは圧縮できますが、標準のJPEGファイルとは異なり、ロスレス圧縮(またはなし)を使用するTIFFファイルは編集して再作成できるため、TIFFファイルを有用な画像アーカイブにするロスレス形式で画像データを保存する機能です-画質を損なうことなく保存。このファイルは通常、スキャン、ファックス、ワードプロセッシングなどに使用されます。 jpegは高品質で場所をとらないため、デジタル写真で使用する一般的なファイル形式ではなくなりました。

54
harrymc

Xkcdスタイル lbrandy.comから

alt text

76
Robert MacLean

いくつかの重要な要素に注意する必要があります...

まず、圧縮には2つのタイプがあります: Lossless および Lossy

  • Losslessは、画像は小さくなりますが、品質を損なうことはありません。
  • Lossyは、画像が(さらに)小さくなりますが、品質が低下することを意味します。画像を非可逆形式で何度も保存すると、画像の品質は次第に悪化します。

異なる色深度(パレット)もあります: インデックスカラー および ダイレクトカラー

  • Indexedは、画像が、カラーマップと呼ばれるもので作成者が制御する限られた数の色(通常は256)のみを格納できることを意味します
  • Directは、作成者が直接選択していない多数数千の色を格納できることを意味します

[〜#〜] bmp [〜#〜]-ロスレス/インデックス付きおよび直接

これは古い形式です。ロスレス(保存時に画像データが失われることはありません)ですが、圧縮がほとんどまたはまったくないため、BMPとして保存すると、ファイルサイズが非常に大きくなります。インデックス付きと直接ですが、それは小さな安心感です。ファイルサイズが不必要に大きいため、この形式を実際に使用する人はいません。

良い例:実際には何もありません。何もないBMPに優れている、または他の形式でよりよく行われていない。

BMP vs GIF


[〜#〜] gif [〜#〜]-可逆/インデックスのみ

GIFはロスレス圧縮を使用します。つまり、画像を何度も保存でき、データを失うことはありません。実際には適切な圧縮が使用されているため、ファイルサイズはBMPよりもはるかに小さくなりますが、保存できるのはインデックス付きパレットのみです。つまり、 ほとんどの場合 は、ファイル内に最大256の異なる色しか存在できません。それはかなり少量のように聞こえます、そしてそれはそうです。

GIF画像は、アニメーション化して透明にすることもできます。

対象:ロゴ、線画、その他の小さくする必要のある単純な画像。本当にウェブサイトにのみ使用されます。

GIF vs JPEG


[〜#〜] jpeg [〜#〜]-非可逆/直接

JPEG画像は、人間の目が気付かない情報を削除することにより、詳細な写真画像を可能な限り小さくするように設計されています。その結果、Lossy形式となり、同じファイルを繰り返し保存すると、時間の経過とともに失われるデータが増えます。数千色のパレットがあり、写真に最適ですが、不可逆圧縮は、ロゴや線画に悪いことを意味します。画像がぼやけているだけでなく、GIFに比べてファイルサイズが大きくなります。

対象:写真。また、グラデーション。

JPEG vs GIF


PNG-8-ロスレス/インデックス付き

PNGは新しい形式であり、PNG-8(PNGのインデックス付きバージョン)はGIFの代わりとして最適です。ただし、残念なことに、いくつかの欠点があります。まず、GIFのようなアニメーションはサポートできません(すべてのブラウザーでサポートされているGIFアニメーションとは異なり、Firefoxだけがサポートしているようです)。第二に、IE6のような古いブラウザーでいくつかのサポート問題があります。第三に、Photoshopのような重要なソフトウェアは、フォーマットの実装が非常に貧弱です。 (くそー、Adobe!)PNG-8はGIFのように256色しか保存できません。

対象:PNG-8がGIFよりも優れている主なことは、アルファ透明度のサポートです。

PNG-8 vs GIF

重要な注意:PhotoshopはPNG-8ファイルのアルファ透明度をサポートしていません。 (ちなみに、Photoshop!)ただし、透明性を維持しながらPhotoshop PNG-24ファイルをPNG-8ファイルに変換する方法はいくつかあります。 1つは PNGQuant で、もう1つは Fireworks でファイルを保存する方法です。


PNG-24-ロスレス/直接

PNG-24は、可逆符号化と直接色(JPEGのように何千もの色)を組み合わせた優れたフォーマットです。これは、BMP=に非常によく似ていますが、PNGが実際に画像を圧縮するため、ファイルがはるかに小さくなります。残念ながら、PNG-24ファイルは、JPEG、GIF、PNGよりもはるかに大きくなります。 8秒なので、本当に使用するかどうかを検討する必要があります。

PNG-24は圧縮しながら何千もの色を使用できますが、JPEG画像を置き換えることを意図していません。 PNG-24として保存された写真は、同等のJPEG画像よりも少なくとも5倍大きくなる可能性が高く、表示品質はほとんど向上しません。 (もちろん、これはファイルサイズを気にせず、最高品質の画像を取得したい場合に望ましい結果になる可能性があります。)

PNG-8と同様に、PNG-24もアルファ透明度をサポートしています。


[〜#〜] svg [〜#〜]-ロスレス/ベクトル

現在人気が高まっているファイルタイプはSVGです。これは vector ファイル形式(上記はすべて raster )であるという点で上記のすべてとは異なります。つまり、実際にはピクセルではなく、線と曲線で構成されています。ベクトル画像を拡大しても、曲線または直線が表示されます。ラスターイメージを拡大すると、ピクセルが表示されます。

例えば:

PNG vs SVG

SVG vs PNG

つまり、SVGは、Retinaスクリーンやさまざまなサイズで鮮明さを維持したいロゴやアイコンに最適です。

さらに、SVGファイルはXMLを使用して記述されているため、テキストエディターで開いて編集でき、必要に応じてその場で操作できます。たとえば、JavaScriptを使用して、テキストと同じようにWebサイトのSVGアイコンの色を変更できます(つまり、2番目の画像は必要ありません)。

お役に立てば幸いです。

63

既存の回答には技術データがほとんど含まれていないため、ここに含めます。

  • [〜#〜] jpeg [〜#〜]:最大24ビットカラー(おそらくそれ以上?)、可変(通常は高い)圧縮、非可逆、アルファサポートなし
  • [〜#〜] png [〜#〜]:最大48ビットカラー、適度な圧縮、ロスレス、アルファサポート
  • [〜#〜] bmp [〜#〜]:最大24ビットカラー、非常に少ない圧縮、ロスレス、アルファサポート
  • [〜#〜] gif [〜#〜]:最大8ビットカラー、わずかな圧縮、ロスレス、透明度のサポート、アニメーションのサポート

色深度

  • 8ビットカラー== 256色
  • 24ビットカラー== 16,777,216色
  • 48ビットカラー== 281,474,976,710,656色

ほとんどのコンピューターモニターは24ビット色深度で実行されます。人間の目はその多くの色を区別できます。追加の色深度は、ほとんどの場合、センサーからの情報を保持できるため、写真の操作で処理できるデータが増えます。写真を8ビットカラーで表現しようとすると、粒子が粗くなります。

圧縮

これは基本的に、最終的なファイルのサイズを示します。圧縮率が高いほど、ファイルは小さくなります。ただし、JPEGはデータを破棄することでファイルサイズを小さくしています。これは、「非可逆」圧縮と呼ばれます。元の非圧縮データを戻すことはできないためです。その圧縮は、高コントラストのエッジが一般的でない写真にも最適化されています。他の回答で述べられているように、写真以外のものには悪い選択です。

アルファ/透明度

アルファは透明度を指しますが、透明度には複数のレベルがあることを意味します。 GIFには透明なピクセルを定義する機能がありますが、不透明または100%透明であり、「透明」は256色の1つとして使用されます。 PNGおよびBMPは、各ピクセルを色付きガラスのように、不透明、透明、または部分的に透明としてマークする機能を備えています。最も一般的には、256レベルの透明度がありますが、PNGは実際に最大65,536レベルJPEGは透明度をサポートしていません。

アニメーション

事実上、これらのフォーマットのうち、GIFのみがアニメーションをサポートしています。 PNG(MNG、APNG)とJPEG(MJPEG)を使用したアニメーションの仕様がありますが、広くサポートされていません。 (APNGは、FirefoxとOperaの最近のバージョンで動作します。)実際には、Webページに表示されるほとんどのアニメーションはFlashに実装されています。

28
wfaulk
  • 画像の色が少ない場合(アイコンなど)はGIFを使用します。アニメーション画像(広告バナーなど)にも使用できます。
  • 画像に多くの色(写真など)がある場合は、JPGを使用します。 JPEGも同じです。
  • 圧縮せずに画像を保存する場合は、BMPを使用します。ファイルサイズがはるかに大きくなります!
  • 画像をウェブ上で公開し、最新の標準にしたい場合は、PNGを使用してください。長所:GIFとJPGの両方の最新の代替品として適しており、オープンスタンダードであり、透明性を実現します。短所:古いソフトウェアではサポートされておらず、ファイルサイズは同等のGIFまたはJPGより大きくなる可能性があります。

enter image description here


BMP:

  • 古いフォーマット。データの損失はありません。
  • 圧縮しない-各ピクセルの値を格納します。したがって、同じサイズの画像は同じファイルサイズ(キロバイト/メガバイト)を持ちます。たとえば、800×600 BMP画像は、人気のあるWinXP壁紙「Bliss」のなだらかな丘のように、常に1.37 MiBです。
  • 透明度/半透明度はサポートされていません
  • 何にもお勧めしません

JPG:

  • 非可逆圧縮。
  • 損失額は、たとえば、Photoshopでグラフィックを作成して保存するときに設定できます。
  • より高い品質で保存すると、色/深さの損失が少なくなり、ファイルサイズが大きくなります。逆も同様です。
  • 透明度/半透明度はサポートされていません
  • グラフィックス/アイコンではなく写真に推奨

PNG:

  • ロスレス圧縮(ええ、両方のWORDS /ワールドのベスト)
  • 透明性と半透明性をサポートします。どちらも異なります
  • 写真ではなく、静的グラフィック/アイコンに推奨

GIF:

  • 透明性をサポートしますが、半透明性はサポートしません
  • アニメーショングラフィック/アイコンのみに推奨
  • たぶんハリー・ポッターのフレームの動く写真はGIFです:D
13
Shumon Saha

BMPは、小さいヘッダーの生ビット、または Run-length Encoding を使用します。 JPEGは 離散コサイン変換 を使用します。その他の圧縮/エンコードアルゴリズムについては、Wikipediaの記事の下部にあるブロックを参照してください。

簡単なガイド:

  • 写真の場合:
    • プロ用の機器があり、多くの後処理を行いたい場合は、カメラ固有のrawフォーマット
    • それ以外の場合はJPEG(Webで写真を公開するには、RAW形式もJPEGに変換する必要があります)
  • 鋭いエッジ、細い線、色の少ないもの(スクリーンショットやロゴなど)の場合は、次を使用します。
    • 非常に古いブラウザ(主にIE 6)をサポートする必要があるWebページを実行している場合、または単純なアニメーションを実行する場合はGIF
    • それ以外の場合はPNG
  • 特定のプログラムが他の形式を受け入れない限り、BMPを使用する正当な理由はありません。
3