gulpで画像を軽量化、gulp-imageminを使ってコマンドラインから画像を圧縮する（インストール編）

2022.03.16

WEB

Webデザイン

先日、「WebPへの変換をもっと簡単に、gulp-webpを使ってWebP画像を生成する方法」では、gulpを使ってWebP形式に画像を変換する方法をご紹介しました。

IE（Internet Explorer）11がサポート対象外になり画像の圧縮形式にWebPを利用する機会が増えたとお伝えしましたが、お客様のご要望や諸般の事情によりレガシーブラウザに対応しなければならないこともあります。

そういったケースに対応するためには従来通りPNGやJPEG形式の画像を利用しますが、その場合でもファイルサイズを軽減するために画像の圧縮は必要です。

今回も前回の記事同様、gulpを使って画像を圧縮する方法をご紹介したいと思います。gulpを利用するにはNode.jsの実行環境が必要です。実行環境の導入については下記の記事を参照してください。

Sassの利用環境を構築しよう！gulpを使ってCSSにコンパイルする手順を解説

INDEX

gulp-imageminとは
gulp-imageminのインストールと実行(8.x系)
gulp-imageminのインストール(7.x系)
さいごに

gulp-imageminとは

gulpで画像を圧縮するには「gulp-imagemin」というパッケージを利用します。

「imagemin」という画像圧縮ツールをgulpから利用するためのパッケージで、PNG、JEPG、GIF、SVG形式の画像の圧縮に対応しています。

gulp-imageminは弊社でもHTMLコーディングを行う際に利用しているパッケージですが、2021年に行われたアップデートによりメジャーバージョンが8系となりgulpでのタスクの記述がESM形式に変更になったようです。

Pure ESM package

当記事執筆時点（2022年1月18日）では導入している他のタスクとの兼ね合いで7系のパッケージを利用していますが、今後8系での利用が主流となると思いますので、8系、7系両方のインストールと実行タスクを紹介します。

gulp-imageminのインストールと実行(8.x系)

最新バージョンの8系をインストールする際には下記のコマンドを実行します。

npm init -y
npm install --save-dev gulp gulp-imagemin

インストールが完了したらgulpタスクをgulpfile.jsに記載します。v8系からはESM形式でタスクを書かなければいけません。

import gulp from 'gulp';
import imagemin from 'gulp-imagemin';

export default () => (
	gulp.src('src/images/*')
		.pipe(imagemin())
		.pipe(gulp.dest('dist/images'))
);

「src/images」フォルダ内の画像を圧縮して「dist/images」フォルダに生成する、というタスクになります。（GitHub参照）タスクの準備ができたら実行してみます。

npx gulp

今までの7系のgulp-imageminを利用していればこれで画像が圧縮されるところですが、8系で実行すると下記のようなエラーが表示されました。

C:\path\to\gulp-imagemin\v8> npx gulp
C:\path\to\gulp-imagemin\v8\gulpfile.js:32
import gulp from 'gulp';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
（略）

エラー内容を見る限り、CommonJS形式からEMS形式に変更したことによるエラーのようです。GitHubのドキュメントをもう一度よく見てみると

Use import foo from ‘foo’ instead of const foo = require(‘foo’) to import the package. You also need to put “type”: “module” in your package.json and more. Follow the below guide.GitHub

package.jsonファイルでモジュールを指定する必要があるようです。

{
  "name": "artis-blog-gulp-imagemin-v8",
  "version": "1.0.0",
  // 略...
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-imagemin": "^8.0.0"
  },
  // この行を追加
  "type": "module"
}

package.jsonファイルを修正してもう一度タスクを実行してみると

C:\path\to\gulp-imagemin\v8> npx gulp
[23:50:32] Using gulpfile ~\path\to\gulp-imagemin\v8\gulpfile.js
[23:50:32] Starting 'default'...
[23:50:50] gulp-imagemin: Minified 3 images (saved 153 kB - 5%)
[23:50:50] Finished 'default' after 17 s

圧縮された画像が「dist/images」フォルダ内に生成されました。圧縮率は5%なのでデフォルトの設定ではあまり効率が良いとは言えませんが、プラグインを組み合わせることで調整も可能です。プラグインを利用した圧縮方法に関してはまた別の記事で紹介できればと思います。

gulp-imageminのインストール(7.x系)

次はv7系をインストールして実行してみます。v7系をインストールする際にはコマンドでバージョンを明示する必要があります。

npm init -y
npm install --save-dev gulp gulp-imagemin@7

package.jsonを見てv7系のgulp-imageminがインストールされたことを確認します。

{
  "name": "artis-blog-gulp-imagemin-v7",
  "version": "1.0.0",
  // 略...
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-imagemin": "^7.1.0"
  }
}

インストールが完了したらこちらもタスクを用意します。タスクはGitHubのv7.1.0tagに記載されているものをお借りしました。

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

exports.default = () => (
	gulp.src('src/images/*')
		.pipe(imagemin())
		.pipe(gulp.dest('dist/images'))
);

gulpfile.jsにタスクを記載したら実行してみます。

PS C:\path\to\gulp-imagemin\v7> npx gulp
[24:09:25] Working directory changed to ~\path\to\gulp-imagemin\v7
[24:09:25] Using gulpfile ~\path\to\gulp-imagemin\v7\gulpfile.js
[24:09:25] Starting 'default'...
[24:09:41] gulp-imagemin: Minified 3 images (saved 153 kB - 5%)
[24:09:41] Finished 'default' after 16 s

こちらも正常に画像が圧縮されました。圧縮率はv8と同様の5%なので圧縮効率にはあまり差はないようですね。

さいごに

gulp-imageminの利用方法について簡単に説明いたしました。

gulp-imageminのバージョンがv8にかわったとことによりタスクの記述を含めて多少変更する必要があることがおわかりいただけたかと思います。

インターネットに散見する記事は7系以下のバージョンに関するものが多いためエラーが出ると困惑してしまいますが、慌てずにしっかりとドキュメントを確認して対処するようにしましょう。

この記事を書いた人

なかもとソリューション事業部マークアップエンジニア: 企画・営業部を経て、システムエンジニア、マークアップエンジニアとしてweb サイト制作、webアプリケーション開発の上流から下流まで幅広く携わる。ユーザビリティ、アクセシビリティを意識したセマンティックなマークアップとより良いユーザー体験を追及して日々奔走中。三度の飯よりwebが好き。