もはや当たり前に採用されているWebP形式の画像ファイル。人によってはGUIのコンバーターや、Webサービスを利用して作っているのではないでしょうか。これらの方法は、以下の問題点があります

• 作業者によって設定が異なり、生成されるファイルの品質がばらつく
• 作業者の環境を汚す（アプリのインストールなどを強いることになる）
• いちいちファイルをドラッグアンドドロップするなど、めんどくさい作業が発生する

そこで、ワンコマンドで生成するスクリプトをリポジトリに設置することで、誰が作業しても同じ品質でWebPを生成できるようにしてみました。

手順

• Node.jsで「jpgやpngをもとに、WebP画像を生成する」スクリプトをつくる
• npm scriptで起動できるようにする

想定するケース

生成元にするファイル

• 「/public/images」に格納されたjpgおよびpng

生成先ディレクトリ

• /public/images

生成するファイル

• 元になるファイルと同じファイル名で生成

1. Node.jsで「jpgやpngをもとに、WebP画像を生成する」スクリプトをつくる

次のようなコードになりました。一例として、quality:100を設定しています。

import imagemin from 'imagemin';
import imageminWebp from 'imagemin-webp';

(async () => {
  await imagemin(['./public/images/*.{jpg,png}'], {
    destination: './public/images/',
    plugins: [imageminWebp({ quality: 100 })],
  });
})();

2. npm scriptで起動できるようにする

package.json に記述します。

{
  "scripts": {
    "image:webp": "node bin/convert_webp.js"
  }
}

以下のようにコマンドを実行することで、WebPが生成されます。

yarn image:webp

おわりに

このように作業をスクリプト化することで、画像圧縮作業をストレスのないものにするだけでなく「どのような設定で作業されているか」をコード上で作業者どうしで認識しあえるというメリットが生まれます。

Gaji-Laboでは、高い品質の仕事を常に提供し続けるための取り組みをこれからも続けていきたいと考えています。