アニメーション画像の歴史 APNG-WebP戦争

かつて、インターネット上ではアニメーション画像フォーマットの統一のための戦争が行われていました。当記事はそれらの経緯や「GIF」「APNG」「WebP」の事情について記します。

1984～2004年:「GIF」という画像フォーマット

GIFはパラパラ漫画のようにアニメーションすることができる画像フォーマットです。ページ上に配置した画像に動きをつけたいというニーズを大いに満たしました。

当時はダイヤルアップ接続が主流だったため、「LZW」と言われる圧縮技術によりファイルサイズも小さく済んだことは大きなことでした。可逆圧縮なので画像を編集しても画質が劣化しません。便利であるとともにインターネットそのものが普及する以前からあったため、好んで使われました。

しかし、とある事件が起きてしまいます。そのLZWには特許が取得されていましたが、GIFを扱うソフトウェアの製作者に対して特許料を請求し始めたのです。商用目的のソフトウェアからは以前から徴収していましたが、「無料のフリーソフトウェアの製作者からは徴収しない」と宣言していたのにも関わらず、後から手のひらを返したことが問題になりました。GIFを扱うホームページが閉鎖するなどの混乱も沸き起こり、ネットユーザーはこの事件に大きく反発し、「GIFの代わりになるフォーマットを使おう」という運動が世界中で湧き起こりました。
これは「GIFの特許問題」や「LZWの特許問題」などと呼ばれています。

1999年の記事: GIFの特許問題について - とほほのWWW入門
2003年の記事: GIF問題の常識

この頃には既にJPEGが存在しましたが、JPEGはGIFと比較して以下の相違点があり、GIFに置き換えられるものではありませんでした。

• カメラで撮影した写真向きのフォーマットである
• 可逆圧縮ではなく不可逆圧縮である
• アニメーション機能がない

Webの標準化団体W3C(PNG Development Group)は既存の特許に触れないPNGを策定・開発し、これをGIFの代わりに使う人が出てきます。ただしPNGにはアニメーション機能がなかったため、PNGを拡張した「MNG」も考案されましたが、様々な機能を盛り込んだ結果、複雑になりすぎたことから仕様が定まるまで約4年半を要し、ようやくできた仕様書は実装が困難なものだったので、MNGは普及しませんでした。

実質的な代わりとしては画像にはJPEGとPNG、アニメーションにはFlashが使われていたようです。しかし後者はアニメーションというより動画としての意味合いが強く、GIFのような気軽さで使えるものではありません。
さらに当時はCSSによるアニメーション機能がなく、JavaScriptも登場したばかりで選択肢としては現実的ではありませんでした。

結局のところ、GIFの代わりは存在しませんでした。しばらくしてLZWの特許が失効し、Web上で自由に使えるようになったので、特許料の支払いを恐れていたソフトウェアの開発者も実装を始めたのです。ネットユーザーも再びGIFを使い始めました。

2004～2008年:「APNG」の誕生とMozilla

しかし、その頃にはGIFが時代遅れになっていたのです。上記の事件によって急速に普及したJPEGとPNGはフルカラー（16777216色）対応なのに、GIFは256色のみにしか対応していません。色の細かな表現ができないのです。これはフルカラーの画像をアニメーション化(GIFに変換)すると256色に落ちてしまうことを意味していました。

そこで、Mozilla Foundationという非営利団体がAPNG（Animated PNG）を作りました。

APNGは革新的でした。文字通りPNGにアニメーション機能を追加したもので、フルカラー対応などPNGの良い点を全て引き継いでいます。失敗作と言われていたMNGの反省を踏まえて実装も簡素なものにしていました。

また移行期における普及のしやすさについても配慮していました。PNGが作られたばかりの当時は対応しているブラウザや画像ソフトが少なく、移行期には「自分には見えるのに他のユーザーには見えない」といった問題が起こっていました。
APNGはこの問題に対して機能で答えています。対応しているブラウザには「動くPNG」に見えるのですが、対応していないブラウザには「静止画のPNG」に見えるのです。通常ならば見えすらしない画像がとりあえずは見れるのですから、Webページの制作側からすれば幾分か使いやすいでしょう。

これを策定・開発したMozilla Foundationの子会社であるMozilla社は「Mozilla Firefox」というブラウザを開発しているので、Firefoxがいち早く対応することになりました。さらに、Firefoxに続いてOpera Software社の「Opera」も対応します。
2008年8月当時、残りの主要ブラウザは「Internet Explorer」と「Safari」の2つでしたから、APNGがデファクトスタンダートになる日はもう少しだったのです。

しかし、APNGには大きな懸念材料が1つありました。FirefoxがAPNGに対応する前に、W3CからAPNGの公式仕様としての採用を却下されていたのです。
標準仕様として却下されたのにも関わらず、FirefoxとOperaは実装を強行したことになります。
MNGの策定を公言しながらも策定までに約4年半もの歳月をかけた挙句、実装が困難な仕様書を出してきたW3Cに従う道理はありませんでした。

W3CとしてもAPNGを公式仕様に取り入れるか否かの投票を行っており、賛成8/反対10という結果で却下された事情があります。（僅差ですね……）
つまりW3CはMNGのみが公式仕様であり、APNGは非標準の仕様であると位置づけていました。MNGがある手前、後発のAPNGを認めるわけにはいかなかったのです。
とはいえMNGが失敗作であることは薄々感づいており、MozillaがAPNGを提案した後、W3C内では「mPNG」「PNG in GIF」「RGBA in GIF」などの簡素な仕様も提案されましたが、W3C自身が否決し、これらが世に出回ることはありませんでした。

このようなW3Cの迷走はPNGだけではなく、HTMLの規格においても同様でした。2004年頃には既に「W3Cには任せられない」という認識があり、会社の垣根を超えて集まったApple、Mozilla、Operaの開発者によりW3Cの対抗組織であるWHATWGを設立します。

しかしながら、強行に走ったのはMozillaとOperaのみです。
W3Cに仕様として否決されたということは、PNG公式ライブラリであるlibpngはAPNGに対応しないということであり、各社がAPNGの実装に責任を持たなければなりませんでした。

そういった事情から、残りのブラウザは対応に二の足を踏んでいました。

2008～2014年:「WebP」の誕生とGoogle

FirefoxとOperaがAPNGに対応してから数か月後、Google社が「Google Chrome」をリリースしました。このブラウザは瞬く間に主要ブラウザへのし上がります。
リリースから約2年半後の2011年に入る頃にはFirefoxの約半数ものシェアを獲得しているほどです。
そのChromeもAPNGには対応せず、APNGの普及はいまいち進みませんでした。

ところがChromeのリリースから3年後、Google社は新しい規格を投入します。WebPの誕生です。

WebPはGoogle社が策定・開発した画像フォーマットで、JPEGの非可逆圧縮とPNGの可逆圧縮に対応しており、この両方よりも画質が良くファイルサイズも小さく済むという次世代規格です。そして何よりWebPはアニメーションに対応しています。この記事中に今まで挙げた全ての画像フォーマットの代わりにできる夢のような規格です。

当然ながらChromeが先駆けてWebPに対応します。主要ブラウザの1つが対応したのですから、無視はできません。
またこの頃から、スマートフォンの普及によりGoogle社が開発した「Android」が世の中に出回るようになります。AndroidのスマートフォンはWebPに対応しているものの、APNGには対応していません。Mozilla社も対抗馬として「Firefox OS」を開発していましたが、普及はせず、後に開発終了となってしまいます。

追い打ちをかけるようにブラウザ界隈を揺るがす大事件が起こります。主要ブラウザの1つであるOperaが「Chromium」ベースのブラウザになったのです。ChromiumとはGoogleが主導するオープンソースプロジェクトのことで、これをベースにして色々なブラウザを作ることが可能です。簡単に言えば、Chromeはそのベースをほぼ変更せずに作られたものです。Chromiumのソースコードをベースにして作れば、全ての仕様がそちらに引っ張られることになります。Opera Software社は負担が大きな自社開発よりもGoogle社に依存することを選びました。

こうしてOperaはAPNGに非対応となり、WebPに対応します。Mozilla社にとっての唯一の味方が敵に回ったのです。さらに、2014年に入る頃には他の主要ブラウザに大差をつけてChromeがシェア1位になりました。

この時期のAPNGはFirefoxでしか再生できませんから、息をしていないも同然です。
「GIFの後釜はWebPになるだろう」と思われたその時、思わぬ刺客が入ります。

それはApple社でした。

2014～2017年: 大企業たちの代理戦争

Androidの対抗馬はApple社が開発する「iOS」です。Apple社も「Safari」という主要ブラウザの1つを作っていますが、APNGにもWebPにも対応していませんでした。
ところが、2014年にiOSとSafariがAPNGへ対応しました。

この出来事で勢力図が一気に変わります。

これはかなり大きな出来事です。国によっても異なりますが、例えば2014年10月の日本のiOSとAndroidのシェアは両方とも約半数であり、均衡しています。この頃にはスマートフォンやタブレットユーザーはかなり大きな存在になっていますから、もはや風前の灯だったAPNGが一気に息を吹き返したことになります。

また、AndroidとiOSが激しいシェア争いを行っていることも分かります。
Apple社からすれば、Mozilla社とはWHATWGの繋がりがありますし、対抗企業であるGoogle社が開発したフォーマットを採用することに抵抗があったのでしょう。

そして、主要ブラウザの中で静観を決め込んでいるのはMicrosoft社が開発する「Internet Explorer」のみになりました。古くから使われてきたブラウザですから、もしMicrosoftがAPNGかWebPを採用すれば勢力を大きく揺るがすことになります。

しかし、この頃のMicrosoftはWebブラウザにおいて他企業と対立していました。かつてのNetscapeを抑えてダントツのシェア1位を獲得したInternet Explorerは、その立場を活用してActiveXといったW3Cなどの標準を完全に無視した独自仕様をたくさん搭載していたからです。その状態でFirefoxやChromeにシェアを奪われたのですから、Web分野において一社孤立した状況になるのは時間の問題でした。
ユーザーからも見限られ始めたMicrosoftはイメージを払拭するために、後継ブラウザとなる「Microsoft Edge」をリリースします。

Internet Explorerの反省を踏まえてリリースされたEdgeは独自仕様をそぎ落としており、W3Cの仕様に従う方針のブラウザになりました。だからこそEdgeはAPNGとWebPに非対応でした。どちらも標準仕様ではないからです。

この状態はしばらく続くことになります。
そしてこの約3年間の冷戦の末、ついに歴史が動きました。

2017～2020年: WHATWGの台頭とW3Cの弱体化

2017年にGoogle ChromeがAPNGに対応しました。
翌年の2018年にはEdgeがアニメーション未対応という不完全ながらもWebPに対応しました。

そしてEdgeのWebP対応の動きを見たFirefoxも続けてWebP対応を発表し、2019年にFirefoxがWebPに対応します。

さらに、Operaを彷彿とさせる大事件が発生します。
とうとうユーザーを取り戻すことができなかったEdgeはChromiumベースになることが発表され、2020年にリリースされることになります。つまりEdgeはAPNGとWebPの両対応になります。
MicrosoftはWebブラウザという土俵において、Googleに委ねることにしたのです。

その2020年にはiOS/SafariもWebPに対応しました。

結果的に以下の状況になりました。

ChromeがAPNGに対応するというオウンゴールを皮切りに、各社の対応状況が一気に統一されてしまいました。
この背景には、各社がW3Cに対して抱いていた不信感から、各社の距離が近づいたことが挙げられます。

WHATWGを作ったときに会社の垣根を超えたのは、開発者を無視したW3Cの方向性に賛同できないという思いでした。
ノートPCやスマートフォンといった、時代とともに様々な仕様の端末が登場する中、HTMLの仕様決めをスムーズに進めなかったW3Cに対する反発がきっかけでした。 仕様だけの存在で一切普及しなかったMNGを頑なに公式仕様から外さずに他の仕様は認めなかった1点だけを見ても、W3Cが万能な組織ではないことは明白です。

このWHATWGの働きかけにより、2014年にはW3CとWHATWGが共同で策定したHTML 5が誕生します。
実績を得たWHATWGは勢力を増し、2017年にはGoogleとMicrosoftもWHATWGの一員になります。
WHATWGによる脱W3Cが進み始めたのがこの時代でした。

つまりW3Cが策定したMNGを無視する理由ができたのです。
FirefoxやiOS/Safariの対応によって既成事実化したAPNGをChromeが採用、という流れだけでもW3Cが組織として弱体化していたことが分かります。

2015年前後まではInternet Explorer以外のブラウザは不満を抱えつつもW3Cに従う構図になっていました。同じ指針がなければ「端末やブラウザによって見え方が違う」という事態が発生してしまうからです。
Microsoftが舵の切り方を変えてからは「W3Cに従うのではなく自分たちが主導した方が早い」という考えにシフトしていきました。

こうしてW3Cよりも強い影響力を獲得した各社は、互いに歩み寄る動きを見せ、APNGに続いてWebPも採用することになっていきました。

これがAPNG-WebP戦争の結末です。

1996年のUnisys社によるGIFの特許問題から約24年後の2020年、GIFの後釜はAPNGとWebPという2つの画像フォーマットになることで落ち着きました。

2020年～: APNGとWebPの共存時代

決着の機会はたくさんあったものの、それぞれの団体や企業の思想・思惑がそれを許さず、長らく横着状態だったことが分かります。元凶となったUnisys社の罪は重いですが、結果としてPNGという優秀なフォーマットが生まれたのはよかったですね。

W3Cが策定したHTML5が2021年1月28日に廃止され、今後はWHATWGによるHTML5が正になるというニュースもありました。
経緯は以下が分かりやすかったです。
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
W3Cの今後は発言力が低下していく一方ではないかと思います。未発達だったインターネットの成長においては間違いなく必要な組織でしたが、今は各社が同じ方向を向いているので、まとめあげる必要がありません。

さて、ユーザーとしてはようやくAPNGとWebPの両方が憂いなく使えるようになったわけですが、果たしてそれぞれ何が異なるのでしょうか？
それぞれの特徴をまとめてみました。

3つの画像フォーマットの特徴

共通点

透明な画像を作れること、可逆圧縮が可能なので画質が劣化しないことは全てに共通しています。

画質

APNGとWebPの2択です。画質を優先するならフルカラー対応でないGIFは選択肢に入りません。

ファイルサイズ

写真であればWebP一択です。WebPで選べる非可逆圧縮はJPEGの特徴でもあり、JPEGを兼ね備えたWebPに分配が上がります。
APNGが写真に向いていない点は変わりませんが、TinyPNGやOptiPNGのような優秀な圧縮アルゴリズムを採用したツールが発達していることから、絵であればファイルサイズはWebPよりもAPNGの方が勝っている印象です。

対応状況

古い環境もサポートするならGIF一択です。
GIFを使いたくない場合、2021年時点ならAPNGに分配が上がります。実装が簡素ということもあり、APNGは対応しているアプリケーションが多い印象です（PhotoshopとかLINEスタンプとか）。拡張子が通常のPNGと同じなのも扱いやすいポイントです。
ただGIFも現役選手で、インターネット上の広告なんかは全ての環境に対応するために今でもGIFが使われる印象です。

WebPは2020年に実質的な利用が開始されたも同然なので、ブラウザではないサーバーアプリケーションやクライアントアプリケーション側では対応しきれていないこともあります。
サーバーアプリにあたるWordPressで例えると5.8 (2021年リリース)で対応しました。
クライアントアプリにあたるPhotoshopで例えると2021年時点でAdobe公式で対応していないものの、WebP公式からダウンロードできる対応用プラグインでようやく対応できるような感じです。
→Photoshopは23.2 (2022年リリース)で対応しました。

WebPは優秀なフォーマットなので、この辺の事情は時間が解決すると思います。

APNGとWebPを両対応するHTML

古い環境も視野に入れつつAPNGとWebPを表示させる場合、以下のHTMLで対応します。

<picture>
  <source srcset="./img/something.webp 1x" type="image/webp" />
  <img src="./img/something.png" /> <!-- 画像はAPNG -->
</picture>

上から順に、それぞれ以下に見えます。

• WebPに対応している→WebP
• APNGに対応している→APNG
• どちらにも対応していない→PNG（APNGの最初のフレーム）

2014年頃には既に存在する記述です。移行期だからこその対応ですね。
こんなことをしたくないので大半の方はGIFを使っていました。

歴史表まとめ

簡単にまとめてみました。ググりながら書いたので間違っていたらTwitterとかでご指摘ください。

おまけ: 当時のChrome/Firefoxの開発者たちの反応

各社の思惑とは別に、ChromeとFirefoxの双方の開発者もそれぞれで意見を交わしていたことが分かります。

Chromeサイド

APNGについての2013年のスレッドがあります。

https://groups.google.com/a/chromium.org/g/chromium-dev/c/2xvXNJMsgxc/m/2CJ9jl-jItcJ

開発者が何人もいるスレッドなので一枚岩ではありませんが、要約すると以下のような感じかと。

スレッドを立てたnewさんはlibpngのAPNG対応パッチをメンテナンスしているとてもすごい方なのですが、スレッドの序盤においてAPNG推しで意見したところ、他の方には概ねボコボコにされています。APNGに対応する流れになった時は笑顔だったことでしょう。
個人的にはkhimさんの以下の中立意見が印象的でした。

I don't particularly care if Chrome will adopt APNG or if Firefox will adopt webP (both solutions will give us a pictures animation format which can be used by majority of browsers), but the situation when people are forced to continue to use GIF89a in 2013 looks worse to me then both these alternatives.

khim

SafariがAPNGを採用した時の以下のVEGさんのコメントも面白いです。

Are Chromium developers reading this group? It's time to implement APNG!
I think immediately after this Mozilla will implement WebP support in Gecko. I think they do not support WebP because of resentment caused by the fact that Google has ignored APNG.

VEG

ジョークだと思いますが、やはり皮肉られるような状況になっていたことが伺えます。

Firefoxサイド

2010年のWebPの発表を受けたMozilla社の反応は概ね以下。消極的ですね。

一方Mozillaは、FirefoxにおけるWebPのサポートに否定的な姿勢を見せている。FirefoxにおけるWebPのサポートに関しては2010年9月30日に登録されたBug 600919 - (WebP) Implement WebP image supportに詳しい状況が掲載されている。パッチはあるもののマージは実施されておらず、その理由が4月20日のコメントに掲載されている。主な理由はJeff Muizelaar氏のブログに掲載されていると説明した後で、この状況が変わらないかぎりFirefoxにWebPのサポートが取り込まれることはないと説明されている。

Firefox、Google提案画像フォーマット「WebP」のサポートは消極的 | TECH+

しかしMicrosoft EdgeがWebPに対応したことで、2018年にはMozilla社もWebPを採用する計画を発表します。

Mozilla plans to integrate WebP support in Firefox in the first half of 2019. The organization made the decision to implement Google's WebP format in Firefox after all. One likely cause for the change of heart was Microsoft adding support for WebP to the company's Edge web browser.

Mozilla plans to add Webp support to Firefox - gHacks Tech News

それより前の2016年にも内々でWebPに対応する動きを見せていたようで、当時のBugzillaを見ると、困惑している開発者もいることが分かります。
Stijn de Wittさんが「Mozilla社がWebPに対するスタンスを何度も変えているので、現状の公式のビジョンを知りたい」というコメントをしています。

[Stijn de Witt]
Great to see you guys hard at work at adding in support for WebP! I can't wait for the day we'll get better images on the web.

I have been googling around for a/the official vision of the Firefox team about WebP support in Firefox… Is there one and if so could you post a link? From my current understanding the work you guys are doing here will end up behind a flag and be disabled by default is that true? Thanks for all your hard work!

[xzyfer]
The closest thing I'm aware of is https://platform-status.mozilla.org/ which appears to be not be actively kept up to date.

[Stijn de Witt]
Unfortunately it gives no results for 'webp'.
I think it would be good if Mozilla put out a statement on the current status of their ideas on webp. I have read through a lot of info online, but it seems Mozilla has changed it's stance on WebP multiple times and I have a hard time separating the history from the current situation.

1294490 - (WebP) Implement WebP image support

上記の引用先は技術的な話題のためのスレッドであって意見や議論を交わす場所ではないようで、残念ながら当時の反応をこれ以上探ることはできませんでした。
経緯が複雑なだけに、全員が納得している空気感ではなかったのが分かりますね。

補足追記 (2021年)

この記事は、学生時代に運営していたブログの記事を書き直したものです。

当時、この記事を書き始めた時は2017年の2月末頃だったと思います。ChromeがAPNGに対応する直前だったので「APNGもWebPも微妙な普及具合なせいで、未だにGIFを使わなければいけないのはなぜなのか？」と思ったのがきっかけで調べて書きました。なのでタイトルが「APNG-WebP戦争」なんです。
移行前のブログに「続きも書いてほしい」というコメントもあり、WordPressに移行するにあたって2020年頃までの出来事と開発者たちの反応を書き足しています。

全体的な記事の書き直しもしています。なるべく客観的な情報を用意したつもりですが、各組織の正式な表明などは存在しない以上、私の推測も入っているので、そこはご容赦ください。
たかが画像フォーマット1つとっても歴史的背景があるということが伝われば幸いです。

最後に。3つのアニメーション画像を並べてみました。
もしあなたの環境ですべて再生できているなら、それは素晴らしいことです。

※画像の引用元