PNG、GIF、JPEG、SVG のそれぞれの使用例は何ですか? [closed] 質問する

いくつかの重要な要素を知っておく必要があります...

まず、圧縮には 2 つの種類があります。無損失のそしてロスレス。

• ロスレスとは、画像が小さくなっても品質が損なわれないことを意味します。
• 非可逆圧縮とは、画像が（さらに）小さくなるが、画質が損なわれることを意味します。画像を非可逆形式で繰り返し保存すると、画質は次第に悪化していきます。

さまざまな色の深度（パレット）もあります。インデックスカラーそして直接色。

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

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

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

適している用途: 特にありません。BMP が優れている点や、他の形式の方が優れている点はありません。

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

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

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

適している用途: ロゴ、線画、その他小さくする必要のあるシンプルな画像。実際には Web サイトにのみ使用されます。

JPEG - 非可逆 / 直接

JPEG 画像は、人間の目には見えない情報を削除することで、詳細な写真画像をできるだけ小さくするように設計されています。そのため、これは非可逆形式であり、同じファイルを何度も保存すると、時間の経過とともに失われるデータが増えます。数千色のパレットがあるため、写真には最適ですが、非可逆圧縮のため、ロゴや線画には適していません。ぼやけて見えるだけでなく、このような画像は GIF と比較してファイル サイズが大きくなります。

適している用途: 写真。グラデーションにも最適です。

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

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

適している用途: PNG-8 が GIF よりも優れている主な点は、アルファ透明度をサポートしていることです。

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 ロゴを、画像品質を低下させることなく、はるかに大きなサイズで使用できることも意味します。画質を低下させるには、ラスター形式の別の大きな (ファイルサイズの点で) ファイルが必要になります。

SVG ファイルのサイズは、見た目には非常に大きくても、非常に小さい場合が多く、これは素晴らしいことです。ただし、使用される図形の複雑さによってサイズが変わることを覚えておく必要があります。曲線や直線の描画には数学的計算が関係するため、SVG ではラスター画像よりも多くの計算能力が必要です。ロゴが特に複雑な場合は、ユーザーのコンピューターの速度が低下し、ファイル サイズが非常に大きくなる可能性があります。ベクター図形をできるだけ単純化することが重要です。

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

全体として、ロゴやグラフなどの単純な平面形状に最適です。