インターネットを見ているみなさんはGIF画像を1日1回は見ていると思います。
ブログを書いてる身としても、どうしてもアニメーションを使いたくなる時があると思います。じゃないとYouTubeに負けちゃう！
モダンA.K.I.のとりあえずこれしろコンボ集
とりあえずスト6に興味ない方でも、上の記事をスクロールしてみるとちょっと面白く見えると思います。
上記の記事ではアニメーションを29個挿入していますが、その容量はすべて合わせて13.03 MB！携帯回線にもとても優しい！出先で安心して読めるブログ！
動きが少なかったり、フレームレートが少なかったり、背景が簡単な画像だと容量の削減もそれなりに簡単です。しかし最近のHDなゲームだと動きをつけたGIFはかなり重くなりがちです。
どうやって軽くしたのか、そういう工夫を語ろうと思います。
結論から先に書くとGIFじゃなくてWebM / MP4を使った方がいいです。
今回のサンプルはこれ↓
↑これがサンプルとしてのオリジナルですが、以降はブログらしく、1MB以内に収めたものを掲載していきます。
第１話：GIFは256色の夢を見る
GIFは古くからあるアニメーション形式で、互換性が非常に高いのでどこでも再生できる。
が、古いせいで制約が多いです。
まぁ兎にも角にも、ファイルは重いし、広告ですら通信量を持っていくと嫌われるこの令和の世の中には中々厳しいフォーマットとなる。
また、Gifはあくまでも画像であって動画ではないので再生にGPU支援を受けることができない。
CPUのみで再生するので、上の画像なんかは60FPSあると言ってもぬるぬる動いてない人もいると思う（たぶんiPhoneなんかは動いてない）
第４話：透過する祈り、APNG
Gif以外にも、Gifの後継を目指したアニメーション規格はある。
まずはMozillaが作成したPNGのアニメーション版であるAPNG。
基本的にはGIFのフルカラー版と考えていい。
そのせいで圧縮効率自体はGIFより良いものの結局フルカラーならファイルサイズ大きくなるしであんまり流行らなかった。
現在でもブラウザそのものは対応してるけど、Webサービスが対応していないことが多い。WordPressも既定じゃアップロードできないしね3
第６話：WebPという転校生
- WebP: 非可逆・可逆圧縮に両対応するフォーマット。JPGでアニメーションするようなもの。APNGよりは軽い。
で、APNGの方は全く流行らなかった。重いしこれ……。
一方WebPの方は覇権とまでは言わないが、標準の一角に食い込む程度には普及した。JPGより優秀だしね。
ただこっちもやっぱり問題点はそれなりにあって、
- GIFと同じく、GPU支援を受けれないため重い
- 非可逆圧縮を使えると言っても、フレーム単位の1枚一枚の圧縮なのでファイルサイズは重くなりがち。
上記画像は1MB以下に抑えているが、なるべく画質を劣化させないとなると解像度がかなり低くなる。
なんでこんなに抑えられないかというと、パラパラまんがよろしく圧縮が1枚1枚やってるから。
逆にMP4などの動画フォーマットは1枚単位ではなく、前後のフレームも参照しながら圧縮するので、もっと軽くなるのです。
第８話：未来のきらめき！ AVIFにおまかせ！
「おい、じゃあ動画フォーマットと同じように前後のフレームを参照してまとめて圧縮するアニメーションフォーマットがあれば最強じゃないか？」←正解
あります。AVIF規格です。こいつはWebMと同じように可逆・非可逆に対応しつつ、アニメーションではVP9コーデックを使って圧縮します。そのため、GPU支援を受けて再生することが可能です。
すごい！めっちゃ画質いい！これこそ令和のアニメーションフォーマットだ！
……ただしまた完璧とも言い難い側面があって。そもそも上の画像が結局やっぱ重い人がいると思う。
具体的に言うとWebKitのブラウザで重くなる……つまりiPhoneだったりMacのSafariで重くなる。おのれアップル！4
このブログで言えば全体の32%の方がiPhoneで見てくれてるので、流石に切り捨てることはできない…！
1/3がちゃんと再生できないってなんだよ！
第10話：アニメーション画像では届かない
結局は画像として新参なAVIFではなく、普通に動画を使った方が早いです。
↑これはWebM動画です。おそらくどの環境でも安定して60FPSで動いてると思います。
結局動画を自動再生するのが一番なんだな〜〜〜〜。
動画の自動再生なんてできるの？と私も思ったのですが、mutedフラグをつけておけば再生可能なようです。
大昔は開くと音楽が自動再生されるサイトなんてありましたが、あれは大迷惑だけど音楽ならなければ迷惑じゃないよね？ということで許可されているようです。
動画の場合は<img>ではなく<video>タグを使いますが、<video autoplay loop muted playsinline>と書いておけばあたかもGif画像のように配置が可能です5。
アニメーション画像と比べるとちょっと手間な点がかなしみ😢
ちなみにWebMとMP4はWebMの方が圧縮効率が高いのですが、使ってる感じ微差なんでどっちでもいいと思います。
WebMってWebで使う分だけにはいいんだけど、MP4と比べると対応ソフトが少なくて妙に取り回しが悪い……。
最終話：わたしの、最高のJS
そういうわけでうちのブログでは
- WebMを挿入する
- WordPressのタグで
meta:webm2gifを挿入する。 - 上記のタグをトリガーにして、JavaScriptで自動再生するようにHTMLに属性を加える
meta:webm2gifをわざわざトリガーにして動画をループ形式にするのは、一律で置き換えると過去記事なんかでも反映されるし、あるいは普通のWebMとして使いたい時があるからです。こういう時、WordPressのタグって便利。
ここスクリプトは貼ってもいいのですが、あまりにもニッチすぎるので真似してChatGPTあたりにスクリプトを作らせるといいでしょう。
別にWebMかMP4はどっちでもいいと思います。圧縮効率ではWebMですが、いろんなアプリの対応状況的にはMP4です。
