アニメーションっぽく画像が動く「レグレッシブJPEG」とは？

「レグレッシブJPEG」とはJPEGのプログレッシブ表示機能とスキャン範囲の制御を利用して単一の画像ファイル内に複数の画像を埋め込み、アニメーションやビデオのように見せる技術です。レグレッシブJPEGとはどんなものかについては以下のブログサイトで解説しています。

Regressive JPEGs: (Maurycy's blog)
https://maurycyz.com/projects/bad_jpeg/

◆レグレッシブJPEGの仕組み
JPEGは画像データを8×8ピクセルのブロックに分け「離散コサイン変換(DCT)」という処理を行い、通常はブロックの基礎データとなる左上ピクセルの実データ「DCデータ」と残り63ピクセル分の差分データ「ACデータ」を取得し、別個にハフマン圧縮することにより効率的にデータを管理しています。

レグレッシブJPEGは画像を低周波成分(大まかな色合いや形)から高周波成分(細かいディテール)へと段階的に表示する「スキャン」単位に分割して保存します。各スキャンのヘッダーにはカラーチャンネル(YCbCr)・周波数帯域(DCTビン)・ハフマンテーブルのインデックスなどが記録されます。代表的な画像の最初のスキャンは以下のようになっています。

FF DA- 「start of scan」マーカー
00 0C- ビッグエンディアンで長さを示すフィールド(12バイト)　※フィールド自身の長さを含む
03- スキャン対象チャンネル数 (3)
  01- 最初に含まれたチャンネルのグローバルID
  00- ハフマン表インデックス#1 (DC：0・AC：0)
  02- 2番目に含まれるチャンネルのグローバルID
  10- ハフマン表インデックス#2 (DC：1・AC：0)
  03- 含まれる3番目のチャンネルのグローバルID
  10- ハフマン表インデックス#2 (DC：0・AC：0)
00- DCTビンの開始(DC)
00- DCTビンの終了(DC)
01- 精度：Half・既存データなし

f8ad 512d d3f1 cd96　※ハフマン符号化DCT係数
bcb0 58df 53d5 5d97
         :
         :

・カラーチャンネル
3つのカラーチャンネルは通常のRGBではなくYCbCr形式が使用されています。輝度(Y)は高画質で、色差(Cb・Cr)は多少粗くても影響が少ないため低解像度で保存されることが多いです。

・スキャンの順序と役割
各スキャンの構成は以下の通りとなっています。

・スキャン#0：低解像度のプレビュー画像
・スキャン#1：輝度(Y)のディテール追加
・スキャン#2～#5：低精度のフルデータ、特にスキャン#4がスペクトル範囲を埋めた上にスキャン#5が構築される
・スキャン#6～#9：最終的な欠落ビットを追加しフルクオリティにする

なお色情報は解像度が「Half」、つまりピクセル数の4分の1で保存されています。よって、完全な色情報(Cb・Cr)は輝度(Y)の半分の重みしか持ちません。

◆複数画像の埋め込み
レグレッシブJPEGを作成するには、同じ解像度の複数のJPEG画像を連結して画像開始(SOI)・フレーム開始(SOF)・画像終了(EOI)マーカーを除去し、単一ファイル化します。レグレッシブJPEGファイルをローカルで開いてもただのJPEG画像ですが、ローカルに比べて低速なネットワークを経由すると、ファイルが部分的にダウンロードされる際に複数の画像が順番に表示されるためアニメーションのように見えます。

※画像をクリックすると「アニメーションのように見える」動作を確認できます。

ただし、レグレッシブJPEGには以下のような制約があります。

・フレーム数に制限がある
一般的なデコーダーは無限ループやZIP爆弾防止のため、一定のスキャン数(通常9フレーム程度)で処理を停止してしまうため、本格的なアニメーションを実装するには不十分です。

・アニメーション化に工夫が必要
アニメーションを実現するには各フレームのスキャン数を最小限に抑える必要があります。

上記のうち、スキャン数を最小限にする最も簡単な方法は単一スキャンのみを持つベースラインモードJPEGを使用することですが、ベースラインデコーダーは最初のスキャンのみを処理した後に停止してしまいます。一方、プログレッシブモードでは停止することはありませんが、1つのスキャンにACデータ(0より大きいビン)とDCデータ(ビン0)の両方を含めることはできないという別の制約があります。またDCデータはACデータの前に来る必要があるので、最小のプログレッシブJPEGにはDCのみのスキャンが1つ含まれるということになります。

DCのみのスキャンを持つフレームはJPEGの標準規格に準拠した画像であり特別な処理なしで作成できます。

cat > frame.scans<<EOF
# DC only scan:
0,1,2:0-0,0,0;
# and nothing else
EOF
jpegtran -scans frame.scans -outfile out.jpg in.jpg

さらにDCのみのスキャンで構成されたJPEGは、ACスキャンが古いデータを上書きすることによる「ゴースト」現象が発生しないという利点もあります。DCデータのみで作成されたレグレッシブJPEGはChromeが処理を停止するまでに約100フレームをレンダリングさせることができます。Firefoxなどの他のブラウザはさらに多くのフレームを表示できますが、90フレーム程度のスキャン画像ならほぼどこでも動作するようです。

※画像をクリックすると「アニメーションのように見える」動作を確認できます。

◆実用性
レグレッシブJPEGに実用性があるか考えてみると、ちょっとしたいたずらに使用できるぐらいで実用的な用途はありません。タイミング情報を追加する方法がないため、再生速度がネットワークの遅延に完全に左右されてしまうからです。ただし、純粋なHTMLビデオやCSS/JavaScriptを使用しないインタラクティブなシングルページアプリケーションなどで、部分的なレンダリングを利用した楽しみ方があるかもしれません、とレグレッシブJPEGを解説していたブログは締めくくっています。