コミット前に画像を圧縮させる

2024-12-10

Tech

lefthook

/

sharp

画像を圧縮するスクリプト#

画像を圧縮するライブラリに今回はsharpを利用した。

本当は WebP などに変換した方が圧縮効率は遥かに高いが、Markdown に画像を埋め込んでおりパスを書き換えさせるスクリプトも作るのが面倒だったので、今回は 1200x1200px 以内に画像をリサイズするだけに留めている。

1
import { readFile } from "node:fs/promises";
2
import sharp from "sharp";
3

4
const minifyFile = async (filename) => {
5
  try {
6
    const sourceData = await readFile(filename);
7
    const info = await sharp(sourceData)
8
      .resize({
9
        width: 1200,
10
        height: 1200,
11
        fit: sharp.fit.inside,
12
        // このオプションをtrueにすると、元画像よりも小さい場合はリサイズしない
13
        withoutEnlargement: true,
14
      })
15
      .toFile(filename);
16

17
    console.log({
18
      filename: filename,
19
      beforeSize: sourceData.length,
20
      afterSize: info.size,
21
    });
22
  } catch (error) {
23
    throw error;
24
  }
25
};
26

27
try {
28
  const files = process.argv.slice(2);
29
  const promises = files.map(minifyFile);
30
  await Promise.all(promises);
31
} catch (error) {
32
  console.log(error);
33
  process.exit(1);
34
}

Lefthook でコミット前に画像を圧縮させる#

Lefthookは Git フックを管理するツールで、コミットなどをトリガーに特定のスクリプトを実行させることができる。

同種のツールとしては Husky + Lint Staged がある。個人的には Node.js 以外の環境でも導入しやすく、比較的エッジケースの少ないと思われる Lefthook の方を好んで利用している。

lefthook.ymlで次のような設定を行い、コミット前に画像を圧縮させるようにした。

1
pre-commit:
2
  parallel: true
3
  commands:
4
    compress-images:
5
      tags: frontend
6
      glob: "*.{png,jpg,jpeg,webp}"
7
      run: node ./scripts/compress-image.js {staged_files} && git add {staged_files}