ここで重要なことは、各画像ファイル形式が特定の目的に最適であるということです。
JPEGは「Joint Photographic Experts Group」の略です。.JPG ファイル形式が写真用に最適化されていることがわかります。線画、ロゴ、グラデーション、タイル/パターンの背景などにはあまり適していません。.JPG の DCT (Discreet Cosine Transform) アーティファクト (誰もが知っていて嫌いな「ブロック状」のアーティファクト) は、写真よりも線画やロゴの方がはるかに目立ちます。
PNG は、アニメーションという明確な基準が現れていないという理由だけで、GIF がこれまで有効だったすべてのものを GIF に置き換えました。アニメーション化された .GIF は Web でよく知られています。アニメーション化された .PNG には、APNG と MNG という 2 つの競合する標準があります。
APNG は最新のほとんどのブラウザーでサポートされており、完全な後方互換性もあります (ファイル拡張子は .APNG ではなく .PNG です。.PNG を表示できるが APNG を知らないプログラムが APNG を「フィード」している場合、それは開発者が選択した代用画像、またはそのような代用が提供されていない場合はアニメーションの最初のフレームのいずれかを表示します。古いプログラムに関する限り、それはその 1 つの画像を含む通常の単一フレーム .PNG です。残りは安全に無視されます)。Gecko (FFなど) や Presto (Opera) はネイティブでサポートされており、Google Chrome (Webkit を使用) はアドオンでサポートされています。
MNG は実際の PNG 形式の開発チームの支援を受けていますが、独自の形式で後方互換性はありませんが、より強力で柔軟です。現在、KHTML ベースのブラウザー (Konquerer) のみがサポートしています。Trident (IE)、Gecko、Webkit (Chrome、Chromium、Safari)、Presto はサポートしていません。
PNG は、GIF が行うすべてのこと (APNG で強化されていない限り、アニメーションを除く) を行います。他のすべてが等しい場合、.PNG はほとんどの場合、同じ解像度とビット深度で .GIF よりも小さくなります。.GIF と同様に、.PNG はインデックス付きカラー (パレット) モードでピクセルあたり最大 8 ビットの色深度をサポートできますが、.GIF とは異なり (.JPEG と同様)、ピクセルあたり 24 ビットのダイレクト カラー モードもサポートします。
どちらのモードでも、8 ビットのアルファ透明度を追加できます。.GIF とは異なり、.GIF (インデックス付きの色の透明度のみを行うことができます [パレットから色を選択して、100% の透明度、別名非表示に置き換えます] — .PNG もそれを行うことができます)。 ）。アルファ透明度は、インデックス付き透明度よりもはるかに優れた結果を生成します。透明ですが、インデックス付きの透明度 (.GIF で使用できる唯一の種類) では、不透明または非表示のいずれかを選択できます。これにより、.GIF またはインデックス付きの .PNG が元々「つや消し」されていた背景色以外の背景色に対して配置された場合、非長方形オブジェクトの周囲に「光輪」ができます。また、グロー、ドロップ シャドウ、およびもちろん、シースルー色のオブジェクト (ディザリングなし) などの効果を実行することもできなくなります。アルファ透明度は、ほぼすべての背景に対してこれらすべてを簡単に行うことができます (グローは白い背景ではほとんど見えず、ドロップ シャドウは黒い背景ではほとんど見えませんが、言いたいことはわかります)。
はい、インデックス付きカラーの.PNGで8 ビットのアルファ透過を行うことができます! そして、何を推測しますか？Microsoft Internet Explorer 6 でさえ、完全に透過的に表示できます。IE6 が窒息して灰色で表示されたのは、32 ビットの .PNG (24 ビットの RGB カラー + 8 ビットのアルファ) だけです!
アルファ透明度を使用して PNG8 (インデックス付きカラー) をエクスポートできる最も有名なプログラムは、Adobe (以前の Macromedia) Fireworks です。Adobe が Macromedia を買収したときに、基本的に Fireworks からこの機能を削除したにもかかわらず、Photoshop の「Web およびデバイス用に保存」(少なくとも CS3 では) はそれを行うことができませんでした。PNG8 を保存できますが、インデックス付きの色の透明度のみです。
とにかく、フル 32 ビット (または 24 ビット) の PNG はかなり大きくなりますが、通常、最も近い同等の .BMP または .TGA または非圧縮の .TIFF などよりもはるかに小さくなります (それ — それが JPEG の目的です!)。通常は、.RLE (無損失圧縮の .BMP) または無損失圧縮の .TIF よりもいくらか小さくなります。他のすべては同じです。
これらの他のほとんどの形式とは異なり、PNG は 48 ビットの RGB カラーもサポートし、オプションで 16 ビットのアルファ透明度を使用して、非常に高品質 (ほとんどのモニターが表示できるよりもはるかに高い) を実現します。これらは、高ビット深度のスキャナやカメラ (RAW モード) などからの情報を保持するための中間ストレージ形式として使用するのに最適です。ロスレス圧縮にもかかわらず、ファイル サイズはかなり大きくなります。
.PNG が現在実行できないことの 1 つは、CMYK や L*a*b などの非 RGB カラー スペースの処理です。
要するに：
- 写真の場合は、.JPG を使用します。
- 限られた色のライン アートとロゴには、必要に応じてアルファ透明度を使用して、インデックス付きカラーの .PNG (PNG8) を使用します。
- 豊富な色の線画とロゴ (多数のグラデーション塗りつぶし、メタリック クローム タイプの反射効果など) の場合、最高の品質が必要な場合や透明度が必要な場合は、必要に応じて直接色の .PNG (PNG24) をアルファ付きで使用します ( IE6 で動作しないことや、透過 PNG 用のさまざまな IE6 回避策のいずれかを使用することを気にしないでください)。また、より大きなファイルと帯域幅の使用を気にしません。それ以外の場合は .JPG を使用しますが、品質が低下することに注意してください。特にロゴやその他の「テキスト」を含むグラフィックの場合は、JPEG の品質をかなり高くする必要がある場合があります。これにより、ファイル サイズの節約が減少します。
- 非 Flash/Silverlight/video/HTML5 Canvas アニメーションの場合、現時点では .GIF が主な選択肢ですが、APNG に切り替える準備をしておいてください (JPEG からのより公式なサポートにもかかわらず、MNG がそれに勝るとは思いません開発者)。