More than 5 years have passed since last update.

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

Last updated at 2019-04-15Posted at 2019-04-14

はじめに

自サイトでは彩りのため、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);
    }
  );
});