アニメーションするフレームが多い。フレームレートが高い。弊社映像クリエイターの記事『平面を空間に!イージングでアニメーションに命を吹き込む!』から拝借してきたアニメーションを元に例を作ってみました。250x150pxで書き出し直したもの。それでやっと855KB)グラデーション、ブラーを使用して、色数を増やすことでオリジナルの4倍以上のサイズに。向いてないときはどうする...?GIFアニメーションにしたい動画が、GIFアニメーションに向いてなかったときはどうしたらいいんでしょうか?答えは言うまでもないですが、大事なので言います。動画を、GIFアニメーションを、最適な形にするまあ、圧縮ツールなどでやっていることを丁寧に人の手でやるみたいな感じなんですがね...。インターネットに公開されている減色ツールを使用したり、彩度を落とすなどしてみる。元素材を編集可能ならば、できるだけ8bitカラーに変更する。画像サイズが小さくなれば色数も落ちますので...。シネマグラフなどでは、全体の尺は長いが静止しているタイミングが存在する場合はフレーム数が落とせる。無理だ...の時しかし、それでもどうしようもないときが必ずきます。そんなときは、GIF以外の方法を考えましょう。JPEG、PNGのスプライトアニメーション少し手間になると思うんですが、JPEG、PNGなどでスプライトアニメーションを作るのも良いです。JavaScriptなどで制御する必要がどうしても出てくるんですが、GIFよりも綺麗な画質でアニメーションをさせることが可能になります。JPEGならば綺麗でさらに圧縮ができますし、PNGならば透過色を使ったアニメーションもできまっせ!さあ、スプライトアニメーションしようぜ!動画にしてしまう尺の長い動画、解像度の高い動画の場合は、h.264形式で圧縮してしまうのが良いでしょう。HTML5からvideoタグのサポートにより動画の埋め込みも簡単にできますし、スマホでの動画のインライン再生もサポートが進んで来ています。何と言ってもGIFに比べて圧倒的に圧縮の効率が良いので、大げさにいうとモノによってはGIFとh.264では容量が100倍くらい違ってくることも、さあ、h.264圧縮して動画埋め込みにシフトしましょう。h.264圧縮については気持ちと気合次第でいくらでも小さくできると思うので、この前書いたこちらの記事『動画圧縮する時ってみなさんどうしてます?』をご覧ください。限られた環境の人向けとかならば、良いのかも...。(個人的にはサポートブラウザが増えるのに期待...)ちなみにAPNG作成に関してはICSさんが簡単APNG変換ツールをちょうど最近リリースされているので参考にすると良いと思います。補足ちなみに上記でGIFに向いてる・向いていないと言っていた動画をh.264形式の動画、APNGに置き換えて見るとどうなるかというと...(動画は500x320px、fps25、オーディオなし、2.4秒、総フレーム数60のものです)ババン!!わかりやすいように、上記GIF比較の結果「オリジナル」「軽い」「重い」をファイル名のプレフィックスとして入れてます。綺麗!2秒の動画で1MB超えというのもちょっとどうかとは思うが、GIFに比べるとこれはすげえぜ!一方その他の動画に関しては、若干重くなっていたりします。(容量最適化を行い色数を減らすなどすれば、すごく容量が減ったりすることもあるみたいでした。今回GIF、APNG、h.264動画はAfterEffectで作成したプロジェクトを元に出力しています。GIFは最良品質でGIF出力後、meta情報を削除する系の圧縮ツールで画質そのまま圧縮しています。APNGはPNG連番で出力後、上記紹介の「アニメ画像に変換する君」を使用し変換しています。h.264はAdobeMediaEncorder経由で最適画質くらいで書き出しています。個人的には圧縮かけまくってザラザラしたノイズまみれのGIFアニメーション大好きですし、叶うことならばGIFの圧縮とか気にしない世界になってほしいなんて思ってます。「ここ、GIFアニメーションしたらいいんじゃね!?」と言える大人が増えたらいいと思います。ちなみに、GIF重いと散々言ってきましたが、小さい画像とか適切な使い方ならばPNGとかJPEGとかより圧倒的に軽いです。無茶させて綺麗で大きなアニメーションをさせようとすると重くなっちゃうのです。@nijibox_jpCONTACTお仕事のご相談はこちらからお気軽にお問い合わせください。