現代のウェブで有用とは言えませんが、GIF（Graphics Interchange Format）は画像エンコードの主なコンセプトを理解するのに役立ちます。
GIF は、画像データのラッパーと考えることができます。「論理画面」と呼ばれるビューポートがあり、そこに画像データの個々のフレームが描画されます。これは、Photoshop ドキュメントのレイヤのようなものです。GIF では、これがフリップブックのようなアニメーションをサポートします。1 つのフレームが論理画面に描画され、別のフレームと置き換えられてから、別のフレームと置き換えられます。もちろん、論理画面に描画される単一のフレームで構成される静的 GIF の場合は、この区別は重要ではありません。
GIF では、可逆データ圧縮方式が使用されます。これは、「Lempel-Ziv-Welch」アルゴリズムのバリエーションです。このアルゴリズムの仕組みについては、もう少し詳しく説明しますが、大まかに言うと、「Uglifying」JavaScript に似ています。これは、ファイル全体で繰り返される文字の文字列が一種の内部辞書に保存され、表示されるたびに繰り返されるのではなく参照できる仕組みです。
確かに、このアルゴリズムは数値で描画するほど単純ではありません。生成されたカラーコード テーブルを再度処理してピクセル色の繰り返しシーケンスを見つけ、参照可能なコードの 2 つ目のテーブルを作成します。ただし、画像データが失われることはありません。根本的な変更を行わずに読み取れるように並べ替えて再編成しただけです。
技術的には、GIF では可逆圧縮を使用しますが、画像の品質に重大な影響を及ぼす大きな制限があります。GIF として画像を保存すると、画像ですでに 256 色以下を使用している場合を除き、常に忠実度が低下します。
GIF の論理画面に描画される各フレームに含めることができる色は 256 色までです。GIF は「インデックスの透明度」もサポートしています。この場合、透明なピクセルは、カラーテーブル内の透明な「色」のインデックスを参照します。
値の範囲を小さく近似した出力値のセットに減らす手法は「量子化」と呼ばれ、画像エンコードについて学ぶ際によく耳にする用語です。このパレットの量子化の結果は、通常、明らかです。
このプロセスをより深く理解するために、先ほど説明した内容から再作成できたラスター画像グリッドを思い出してください。
今回は元の画像にもう少し細かいピクセルを追加します。そのうちの 1 つは少し濃い青の色合いです。
いわゆる圧縮がないので、このグリッドは次のように説明できます。
行 1、列 1 は #0000FF です。行 1、列 2 は #0000FF です。行 1、列 3 は #0000FF です。行 1、列 4 は #FF0000 です。行 2、列 1 は #0000FF です。行 2、列 2 は #000085 です。行 2、列 3 は #0000FF です。行 2、列 4 は #FF0000 です。
GIF の可逆データ圧縮やカラー インデックスに似たものを使用すると、次のように説明できます。
A: #0000FF、B: #FF0000、C: #000085。行 1、列 1 ～ 3 は A です。行 1、列 4 は B です。行 2、列 1 は A です。行 2、列 2 は C です。行 2、列 3 は A です。行 2、列 4 は B です。
これにより、ピクセルごとの説明をいくつかの場所に集約し（列 1 ～ 3 は...）、辞書で繰り返される色を前もって定義することで数文字を節約します。視覚的な忠実度に変更はありません。情報は損失なく圧縮されています。
しかし、ご覧のとおり、暗い青色 1 ピクセルがエンコードのサイズに大きく影響しています。量子化されたカラーパレットに制限すると、さらに低減できます。
A: #0000FF、B: #FF0000。行 1、列 1 ～ 3 は A です。行 1、列 4 は B です。行 2、列 1 ～ 3 は A です。行 2、列 4 は B です。
残念なことに、保存されたバイト数の積み重ねによって、ピクセル単位の完成度が失われてしまいます。
もちろん、レンダリング エンジンでは、このことはわかりません。ソース画像のエンコード方法から、濃い青色のピクセルの細部が省略されています。使用する色に関する共通の理解に基づいて、エンコードしたとおりに画像がレンダリングされました。
この誇張表現の例では、3 色を 2 色に減らすことで画質に明らかな違いが生じます。より大きく詳細な画像では、それほど目立たない場合がありますが、影響は確認できます。
GIF としてエンコードすると、影などの微細なグラデーションが斑点状になり、個々のピクセルが周囲から目立つように表示されます。
実際には、可逆圧縮とパレット量子化の組み合わせは、GIF が最新のウェブ開発ではあまり役に立たないことを意味します。可逆圧縮ではファイルサイズを縮小できるわけではなく、パレット数を減らすと画質は明らかに低下します。
結局のところ、GIF は、すでに限られたカラーパレット、アンチエイリアスではなくハードエッジ、グラデーションではなく単色を使用している、シンプルな画像をエンコードするための効率的な形式に過ぎません。いずれのユースケースも、他の形式の方がはるかに優れています。多くの場合、ラスター画像には、サイズが小さく、特徴の大きい PNG が適しています。ただし、アイコンやラインアートなど、ベクターが際立つユースケースでは、ファイルサイズと視覚的忠実度の点で、どちらの PNG も SVG よりはるかに劣ります。GIF の最も一般的なユースケースはアニメーションですが、その目的を達成するための、はるかに効率的で利用しやすい最新の動画形式があります。