はじめに

自サイトでは彩りのため、gifアニメを載せている。しかし元々ブログやtwitter紹介用に大きめに録画したものを、特に何の加工もせずCSSで小さく表示していただけだったので、無駄にファイルサイズがでかく（ものによっては1MB超えだったり）、訪問者に全く優しくなかった。

さすがにどうにかしようと思ったが、いちいちアニメを撮り直す元気もない。
バッジ処理でまとめて最適化できないだろうかとネットを巡って見つけたのが以下のgifsicleというツール。
https://www.lcdf.org/gifsicle/

npmにNode.js用にラップされたパッケージがあったのでそちらを利用し、最適化スクリプトを書いた。

optimize-gif.js

const { execFile } = require('child_process');
const gifsicle = require('gifsicle');
const fs = require('fs');
const path = require('path');

const RESIZE_WIDTH = "150";
const COLOR_NUM = "64";

const baseDir = path.resolve('./assets/images/works-thumbnail');
const inputFileDir = path.resolve(`${baseDir}/rawgif`);

fs.readdirSync(inputFileDir).forEach(file => {
  execFile(gifsicle,
    [
      '--resize-fit-width', RESIZE_WIDTH,
      '--colors', COLOR_NUM,
      'optimize=3',
      '-o', `${baseDir}/${file}`, // 出力先
      `${inputFileDir}/${file}` // 入力
    ],
    (err) => {
      console.log('minified!: ', file);
    }
  );
});

execFileで第二引数にオプションを渡して実行する。
入出力オプションを除くと、今回は以下を設定。

アスペクト比を保ちながらリサイズ（--resize-fit-widthオプション）
色数の制限（--colors）
最適化レベル（--optimize：ただしこれはいまいち効果が実感できず）

結果

オリジナルと比較すると、さすがに劣化が目立つけど、サイト上で縮小表示するとあまり気にはならない程度ではある。

オリジナル

縮小版

何かわちゃわちゃしているなぁ感ができていればよいので良しとする。

ダイエット結果の一例

787KB（407x293） → 236KB（150x108）
465KB（210x165） → 167KB（150x118）
1040KB（472x416） → 138KB（150x132）

ファイルサイズ縮小率は基本的には1/3 ~ 1/4弱だが、中にはガクッと減ったものも。

フレーム数を落とすなど、もうちょっとチューニングできそうな気もするけど、とりあえずこれで妥協します。

参考

https://github.com/pentamania/portal （自サイトのリポジトリ）

Gifsicle+node.jsでgifアニメをまとめて最適化

はじめに

結果

オリジナル

縮小版

ダイエット結果の一例

参考