スプライトアニメ vs MP4

CSSパラパラ漫画の圧縮率は H.264 の２倍？

スプライトアニメーション

スタイルシート（CSS）には、パラパラ漫画を簡単に実現する方法が提供されている。 たとえば次のようなことができる。

これは同じ大きさのコマを１０コマをつなげた１枚の絵をつかっている。 スプライトアニメーションそのものは単純なのだが、レスポンシブ対応がちょっと面倒くさい。 yurie氏(2019)「CSS：レスポンシブ対応のCSSスプライトアニメーションを実装する」『monakanote.net』 のページを参考の上で作成した。

ファイルサイズの比較

絵を用意できるなら、もちろん、MP4 などで動画にしてもよい。 実際に H.264 で全く同じ尺の動画を作って比較してみた。 ただ、私の持っている AffterEffect では H.264 で 10fps 以下にするやり方がよくわからず、 普段から AffterEffect つかってないし、もう面倒くさいので 10fps でレンダリングした。 どうせ大して変わらんだろう。その結果、ファイルサイズは 1.9 倍くらいになった。（サンプル数１）

ということは（同一フレームレートでない点がアンフェアだが、しかも n=1 ） CSSパラパラ漫画は H.264 より約２倍の圧縮率ということになるのか。（だれかちゃんと実験してください。）

H.265 も H.264 より２倍の圧縮率というから、実際、そんなもんなんだろうなとおもう。

H.264 は、たしか 12分以下の場合はライセンス料がかからない。 それと今やほとんどのスマホがデコードできる。 リッチな演出なら、そりゃ MP4 がよいでしょう。

でも、もしかすると2024年現在ですら、 H.264 な MP4 の再生不可能率より、 CSS スプライトアニメーションの再生不可能率の方が低いんじゃないだろうか？ そして、圧縮率。２倍かぁ・・・。あとリッチな演出とか面倒くさいし。

うちでの利用

前回の記事で「静的広告生成」を作った話を書いた。

いちおう MP4 と CSS スプライトアニメの両方対応可能にはしてみた。 しかし、たぶん今後はスプライトアニメーションをメインで使うことになるだろうな、とおもった。