npmで画像の最適化をする

2023.08.25 09:00

2023.08.14 21:24

「npm scripts」と「imagemin」を使って、コマンドラインで画像の最適化をしてみました。前回もMacでのJPG圧縮にチャレンジしましたが、今回はコマンドラインでフォルダのjpg画像とpng画像を一括圧縮してみました。

今回の方がより実用的で、Webサイト構築などにはこれを使ったほうが捗りますね。

まずはインストールです。

npm install --save-dev imagemin imagemin-mozjpeg imagemin-pngquant

次に最適化を実行するスクリプトを書きます。
「index.mjs」というファイルを作ってその中に書いていくようですね。

import imagemin from 'imagemin';
import imageminMozjpeg from 'imagemin-mozjpeg';
import imageminPngquant from 'imagemin-pngquant';

imagemin(['img/*.{jpg,jpeg,png}'], {
  plugins: 
    [
      imageminMozjpeg({
        quality: 65,
        progressive: true,
      }),
      imageminPngquant({
        quality: [.6, .8]
      })
    ],
  destination: 'img2'
}).then(() => {
  console.log('done!');
});

jpgとpngの圧縮設定がそれぞれ書かれています。

「imagemin([‘img/*.{jpg,png}’], {」の部分は、「imgディレクトリの中の.jpgと.pngの拡張子のファイルが処理対象」という設定です。

「quality」が圧縮率ですが、jpgとpngで違うので注意です。jpgは単純に%を書きますが、pngは0〜1の間の小数点で最低値と最高値を配列にいれて表現するみたいです。また、jpgはプログレッシブ設定もできます。画像を読み込むときに少しずつ表示するか、モザイクから鮮明になるように表示するかの違いです。

「destination: ‘img2’」は出力先ですね。

「then」部分は処理終了後に行うことを指定できます。ここでは「done!」とメッセージを吐くようにしています。

次に実行スクリプトを「package.json」に書いていくみたいですね。
「scripts」の行に書きましょう。

"scripts": {
    "imagemin": "node index.mjs"
}
// 他省略

これで設定は完了です。

2. 実行

では実行してみます。

npm run imagemin

> test@0.0.0 imagemin
> node index.mjs

done!

無事実行されました。
jpg、pngそれぞれが軽くなっていますね。成功です！

今回は以上です！

npmで画像の最適化をする

2. 実行

Category

Tag