静止画のはずのJPEGが動く――1枚の画像にアニメを仕込む遊び

テクノロジー
スポンサーリンク

JPEGといえば、ウェブでもスマホでも毎日目にする、いちばんありふれた画像形式です。もちろん静止画なので、動いたりはしません。ところが最近、この「動かないはずのJPEG」1枚の中に複数のコマを仕込んで、パラパラ漫画のように見せてしまうプロジェクトが話題になりました。GIFも動画ファイルも使わず、JPEGの仕様に昔からある機能だけで「動き」を作ってしまったのです。

手がけたのはMaurycyさんという開発者で、自身のブログで「Regressive JPEGs(逆進するJPEG)」というタイトルで公開しています。テックメディアのHackadayも「JPEGの隠れた機能」として取り上げました。

プログレッシブ表示という下地

種明かしの前に、使われている機能の話から。JPEGには「プログレッシブ表示」という保存方式があります。画像のデータを一気に上から順に並べるのではなく、まず全体のぼんやりした低解像度データを先頭に置き、その後ろに細部のデータを何段階かに分けて追加していく方式です。

この方式で保存された画像をブラウザで開くと、まず全体がぼやけた状態で表示され、データが届くにつれてだんだん鮮明になっていきます。回線が遅かった昔のインターネットでは、これがとてもありがたい仕組みでした。全部ダウンロードし終わるのを待たなくても、「どんな写真か」のあたりだけは先につかめるからです。

ポイントは、1枚のJPEGファイルの中身が「段階(スキャン)」の積み重ねでできている、という点です。ブラウザは届いた段階から順番に画面へ反映していきます。普通は、どの段階も「同じ絵」を少しずつ鮮明にするためのデータです。

段階ごとに別の絵を仕込む発想

ここでMaurycyさんが目をつけたのが、「各段階に入れるデータが、同じ絵の続きである必要はないのでは?」という点でした。最初の段階には1コマ目の絵を、次の段階には2コマ目の絵を……という具合に、まったく別の絵のデータを順番に詰め込んでいきます。

するとブラウザは、いつも通り「届いた段階から順に表示を更新する」だけなのに、見た目には絵が次々と切り替わっていきます。つまり、読み込みの過程そのものがアニメーションになるわけです。Hackadayはこれを「一方通行のGIFのようなもの」と表現しています。一度最後まで読み込めば最後のコマで止まり、GIFのようにループはしません。

ファイル自体はあくまで普通のJPEGなので、特別なプラグインも、JavaScriptも要りません。JPEGが表示できる場所なら、理屈の上ではどこでも動きます。

コマ数の壁と力技の突破

ただし、そう簡単に長いアニメが作れるわけではありません。多くのブラウザは、段階の数が一定を超えると読み込みを打ち切ってしまうためです。Maurycyさんによると、これは細工されたファイルで処理を延々と続けさせられるのを防ぐための安全策とみられます。普通のやり方では9コマほどが上限で、アニメと呼ぶにはかなり心もとない数です。

そこでMaurycyさんは、1コマあたりのデータを極限まで削る工夫をしました。JPEGのデータには、絵のおおまかな明るさを決める成分と、細部を描き込む成分があるのですが、このうち「おおまかな成分」だけで1コマを構成すれば、1段階のデータ量を最小にできます。当然、各コマはブロックの粗いモザイク状の絵になりますが、そのぶん段階の数を稼げます。この方法で、Chromeでは90コマ前後まで表示できたそうです。テレビアニメがだいたい1秒24コマなので、90コマは4秒弱ぶん。粗いながらも「アニメーション」と呼べる長さに届きました。

タイミングを制御できない弱点

もっとも、この技には根本的な弱点があります。JPEGには「1コマを何秒表示するか」というタイミング情報を入れる場所がないのです。コマが切り替わる速さは、データが届く速さ、つまり回線とパソコンの性能に完全に依存します。高速な環境では、全コマが一瞬で読み込まれてしまい、アニメと認識する間もなく最後のコマだけが表示されて終わり、ということも起こります。

Maurycyさん自身も、実用性はないと認めたうえで、変則的なイタズラ(相手を油断させておいて別の絵に切り替える、いわゆる「リックロール」の亜種など)くらいにしか使い道はない、と書いています。

仕様の隙間で遊ぶ面白さ

役に立たないと分かっていて、それでもこのプロジェクトが面白いのは、「静止画のフォーマットで動きを表現する」という発想の転換にあります。JPEGは1990年代前半から使われ続けている、30年選手の枯れた規格です。新しい画像形式が何度も「JPEGの後継」を名乗って登場してきましたが、いまだにウェブの画像の主役の座は揺らいでいません。

それだけ長く、それだけ大勢に使われてきた仕様の中に、まだこんな遊び方の余地が残っていた。毎日何十枚と目にしている画像形式にも、仕様書を読み込んで手を動かす人にしか見えない「隙間」がある、というのがこの話のいちばんの収穫かもしれません。

出典・もっと知りたい人へ

元のプロジェクトは、Maurycyさんのブログ記事「Regressive JPEGs」で公開されています。実際に動くサンプル画像や、生成に使ったCのコードも置かれています。なお、このサイトは自動収集プログラム(クローラー)に対してダミーの文章を返す仕掛けがあるため、ブラウザで直接開いて読むのがおすすめです。

紹介記事は、Hackadayの「Exploring Hidden JPEG Features」(2026年7月24日)です。

コメント

タイトルとURLをコピーしました