JPEG vs PNG vs BMP vs GIF vs SVG

これらのフォーマットのどれが、同じ画質の画像に対してより少ないメモリを必要とし、これらのフォーマットの主な違いは何かを知りたいです。

からTIFF、GIF、JPG、JPEG、PNG、およびBMPファイルの違いは何ですか？

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

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

GIF-（グラフィックスインターチェンジ形式）Gif形式は、テキスト、線画、スクリーンショット、漫画、アニメーションに最適です。Gifは合計256色以下に制限されているため、Gif画像は比較的小さくなります。Webページの高速読み込みによく使用されます。また、Webページの素晴らしいバナーやロゴにもなります。アニメーション画像は、静止画像のシーケンスとしてGIF形式で保存することもできます。たとえば、点滅するバナーはGifファイルとして保存されます。

PNG-（Portable Networks Graphic）このロスレス形式は、最高の画像形式の1つです。すべてのWebブラウザまたは画像ソフトウェアと常に互換性があるとは限りませんでしたが、今日ではWebサイトに使用するのに最適な画像形式です。ロゴとスクリーンショットには.pngを使用します。最終的な圧縮サイズは画像エディターによって異なりますが、最も驚くべき機能の1つは、画像を可逆的に（ピクセルを失うことなく）圧縮できることです。

TIFF-（タグ付き画像ファイル形式）このファイル形式は1992年以降更新されておらず、現在はAdobeが所有しています。画像とデータ（タグ）を1つのファイルに保存できます。TIFFは圧縮できますが、標準のJPEGファイルとは異なり、可逆圧縮を使用する（またはなし）TIFFファイルは編集および再編集できるため、TIFFファイルを有用な画像アーカイブにするのは、むしろ画像データをロスレス形式で保存する能力です-画質を損なうことなく保存。このファイルは、スキャン、ファックス、ワープロなどによく使用されます。jpegは優れた品質であり、必要なスペースも少ないため、デジタル写真で使用する一般的なファイル形式ではなくなりました。

lbrandy.comの xkcdスタイル：

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

最初に、LosslessとLossyの 2種類の圧縮があります。

• ロスレスとは、画像を小さくすることを意味しますが、品質を損なうことはありません。
• ロッシーとは、画像が（均一に）小さくなりますが、品質が低下することを意味します。画像をLossy形式で何度も保存すると、画質は次第に悪化します。

異なる色深度（パレット）もあります：インデックスカラーとダイレクトカラー。

• インデックス付きとは、作成者が制御する限られた数の色（通常256色）のみをイメージがカラーマップと呼ばれるものに保存できることを意味します。
• 直接は、著者が直接選択していない何千もの色を保存できることを意味します

BMP-ロスレス/インデックス付きおよびダイレクト

これは古い形式です。ロスレスです（保存時に画像データは失われません）が、圧縮はほとんどまたはまったくありません。つまり、BMPは非常に大きなファイルサイズになるため、保存を意味します。IndexedとDirectの両方のパレットを持つことができますが、それは小さな慰めです。ファイルサイズが不必要に大きいため、この形式を実際に使用する人はいません。

用途：本当にありません。BMPが優れているものはありません。また、他の形式では改善されていません。

GIF-ロスレス/インデックスのみ

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

GIF画像もアニメーション化でき、透明度があります。

用途：ロゴ、線画、および小さくする必要があるその他のシンプルな画像。Webサイトにのみ実際に使用されます。

JPEG -非可逆/ダイレクト

JPEG画像は、人間の目が気付かない情報を削除することで、詳細な写真画像をできるだけ小さくするように設計されました。結果として、それは損失の多い形式であり、同じファイルを何度も保存すると、より多くのデータが時間の経過とともに失われます。何千もの色のパレットがあり、写真には最適ですが、非可逆圧縮は、ロゴや線画に悪影響を及ぼすことを意味します。

用途：写真。また、グラデーション。

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

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

目的：PNG-8が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です。これはベクターファイル形式であるという点で上記とは異なります（上記はすべてラスタです）。つまり、実際にはピクセルではなく線と曲線で構成されています。ベクトル画像を拡大しても、曲線または線が表示されます。ラスターイメージを拡大すると、ピクセルが表示されます。

例えば：

これは、SVGがRetinaスクリーン上または異なるサイズでシャープネスを保持したいロゴとアイコンに最適であることを意味します。

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

それがお役に立てば幸いです！

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

• 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には、各ピクセルを不透明なガラス、透明なガラス、または部分的に透明なガラスのようにマークする機能があります。最も一般的には、PNGには実際に最大65,536のレベルがありますが、256のレベルの透明度があります。JPEGは透明度をサポートしていません。

アニメーション

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

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

BMP：

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

JPG：

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

PNG：

• ロスレス圧縮（ええ、両方のWORDS / worldのベスト）
• 透明性と半透明性をサポートしますが、両方とも異なります
• 写真ではなく、静的なグラフィック/アイコンに推奨

GIF：

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

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

シンプルなガイド：

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