GIFアニメをCSS3のanimation-timing-functionに置き換えて容量を削ろう

GIFアニメーションって結構サイズがでかいです。
2chまとめとかに貼ってある画像はどれも2MB以上あったりします。

正直動画にしてvideoタグで読み込むほうが小さくなるのですが、
ブラウザによって読めるファイル形式が違うし、スマホでの再生が面倒です。

これまではJSやCanvasで工夫してなんとか見せていましたが、
CSSアニメーションで楽に実装できます。

animation-timing-functionのstepsを使うとstep数に応じてアニメーションが進むようになります。
stepsの数は（フレーム数 - 1）

css

.flip {
  width: 240px;
  height: 240px;
  background-image: url(image.jpg);
  animation: flip 1500ms steps(43) infinite;
}

@keyframes flip {
  from {
    background-position: 0 top;
  }
  to {
    background-position: 0 bottom;
  }
}

サンプル

WikipediaにあったこのGIFファイル（420KB）

１コマ１コマ縦に繋げていきます（結合方法）

jpegファイルに書きだした結果 350KBでした。２割くらい削減できました。
書き出し設定の調整、色数の多いファイルだともっと削減できると思います。

-webkit-のプレフィックスをつければスマホでも動作します。
GIFアニメ作るのと手間もあまり変わらないし、JSとの連携もこっちのほうが楽ですよ！

ちなみに全部つなげるとこんな感じのjepgになります。