画像のWebP変換作業をnode.jsでスクリプト化する

もはや当たり前に採用されている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では、高い品質の仕事を常に提供し続けるための取り組みをこれからも続けていきたいと考えています。

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

タグ


投稿者 Nakamura Yuki

フロントエンドエンジニア。
受託制作会社を経てスタートアップへ参画、経営・組織づくり・事業開発・プロダクト実装と幅広く経験。のち、Gaji-Labo入社。
得意なことは何かといい具合にすることで、よしなにお願いされることが多く、度々よしなにしている。
元編集者でもあり、ドキュメントを書くことが好き。ダーツも好き。