imageminを使用して画像を圧縮するnpmスクリプトを作成して見た

2018.07.10Node.js yarn npm

Article

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

サイトを高速化、パフォーマンスの改善をおこなっていくために画像の容量を極力小さくする必要があります。

そこで imagemin というパッケージを使用して画像圧縮するスクリプトを作って行きたいと思います。

imageminで検索するとgulpを使用した画像圧縮の記事が多く出てきたため
あえてgulpを使用せずnpmスクリプトとtypescriptを使用して作って見ました。

要件としては現状のディレクトリ構成を保持しつつ画像だけ圧縮させたかったため
処理を走らせると既存の画像が圧縮されて上書するようにしています。

環境

yarn 1.7.0
typescript 2.9.2

早速作ってみる

パッケージのインストール

必要なパッケージをまとめてインストールします。
今回は jpg png gif svg の圧縮を対象にしています。

terminal
$ yarn add glob imagemin imagemin-cli imagemin-gifsicle imagemin-jpegtran imagemin-pngquant imagemin-svgo

実行環境として typescript で書いたコードを ts-node で実行します。

terminal
$ yarn add -D typescript ts-node

インポート

パッケージをインポートします。

index.ts
import * as imagemin from 'imagemin';
import * as imageminJpegtran from 'imagemin-jpegtran';
import * as imageminPngquant from 'imagemin-pngquant';
import * as imageminGifsicle from 'imagemin-gifsicle';
import * as imageminSvgo from 'imagemin-svgo';
import * as glob from 'glob';

対象ファイルの一覧を配列に格納

imagemin は再帰的にディレクトリを辿ってくれなかったため
あえて glob で対象のファイルをリスト化しました。

index.ts
const baseDir = './files';
const imagesjpg = glob.sync(`${baseDir}/**/*.jpg`);
const imagesPng = glob.sync(`${baseDir}/**/*.png`);
const imagesGif = glob.sync(`${baseDir}/**/*.gif`);
const imagesSvg = glob.sync(`${baseDir}/**/*.svg`);

一覧化したリストから処理を実行

あとはドキュメント通りにそれぞれの処理を実行します。
今回は順番に処理を実行する形で雑に縦に書いていますが
うまくまとめちゃっていいと思います。

index.ts
imagesjpg.forEach((files: string): void => {
  const dir = files.split('/');
  dir.pop();
  imagemin([files], dir.join('/'), {
    use: [imageminJpegtran()],
  }).then(() => {
    console.log(`${files} optimized`);
  });
});

imagesPng.forEach((files: string): void => {
  const dir = files.split('/');
  dir.pop();
  imagemin([files], dir.join('/'), {
    use: [imageminPngquant()],
  }).then(() => {
    console.log(`${files} optimized`);
  });
});

imagesGif.forEach((files: string): void => {
  const dir = files.split('/');
  dir.pop();
  imagemin([files], dir.join('/'), {
    use: [imageminGifsicle()],
  }).then(() => {
    console.log(`${files} optimized`);
  });
});

imagesSvg.forEach((files: string): void => {
  const dir = files.split('/');
  dir.pop();
  imagemin([files], dir.join('/'), {
    use: [
      imageminSvgo({
        plugins: [
            { removeViewBox: false },
        ],
      }),
    ],
  }).then(() => {
    console.log(`${files} optimized`);
  });
});

package.json に実行ようのスクリプトを記述します。

package.json
"scripts": {
  "start": "ts-node index.ts"
},

yarnコマンド で処理を実行します。

terminal
$ yarn start

もともと圧縮していないファイルであれば約半分（50%）近く容量が圧縮できると思います。

import * as imagemin from 'imagemin';
import * as imageminJpegtran from 'imagemin-jpegtran';
import * as imageminPngquant from 'imagemin-pngquant';
import * as imageminGifsicle from 'imagemin-gifsicle';
import * as imageminSvgo from 'imagemin-svgo';
import * as glob from 'glob';

const baseDir = './files';
const imagesjpg = glob.sync(`${baseDir}/**/*.jpg`);
const imagesPng = glob.sync(`${baseDir}/**/*.png`);
const imagesGif = glob.sync(`${baseDir}/**/*.gif`);
const imagesSvg = glob.sync(`${baseDir}/**/*.svg`);

imagesjpg.forEach((files: string): void => {
  const dir = files.split('/');
  dir.pop();
  imagemin([files], dir.join('/'), {
    use: [imageminJpegtran()],
  }).then(() => {
    console.log(`${files} optimized`);
  });
});

imagesPng.forEach((files: string): void => {
  const dir = files.split('/');
  dir.pop();
  imagemin([files], dir.join('/'), {
    use: [imageminPngquant()],
  }).then(() => {
    console.log(`${files} optimized`);
  });
});

imagesGif.forEach((files: string): void => {
  const dir = files.split('/');
  dir.pop();
  imagemin([files], dir.join('/'), {
    use: [imageminGifsicle()],
  }).then(() => {
    console.log(`${files} optimized`);
  });
});

imagesSvg.forEach((files: string): void => {
  const dir = files.split('/');
  dir.pop();
  imagemin([files], dir.join('/'), {
    use: [
      imageminSvgo({
        plugins: [
            { removeViewBox: false },
        ],
      }),
    ],
  }).then(() => {
    console.log(`${files} optimized`);
  });
});