gulp-imageminを使って画像を圧縮する【gulp4】

html/css
2021.05.19
この記事は約13分で読めます。
スポンサーリンク

はじめに

画像はそのまま使用すると容量が大きすぎるため画像を圧縮して使用する必要があります。

かといって手動で画像圧縮するのも面倒ですよね。

今回はgulp-imageminというプラグインを使って画像を圧縮する方法について説明していきます。

対象者
  • gulpを使って画像圧縮をしたい方
  • 手動で画像を圧縮するのを手間に感じている方

その他gulpのおすすめのプラグインはこちら

gulp おすすめ プラグインまとめ 2022年度版【gulp4】
2021年度時点でgulpのおすすめプラグインについてまとましたので紹介していきます。gulpを扱えるようになるとweb制作でのできる幅が広がるのでぜひ導入を検討してみてください。今回紹介するプラグイン以外にも便利なプラグインがたくさんありますのでご自身に合ったものを使用してください。
shuu1104.com
2021.06.25

gulpの使い方まとめについてはこちら。

【gulp4】使い方まとめ ~インストールから導入まで~【web制作#9】
web制作ではコーディング以外にたくさんの面倒な作業があります。gulpを導入すればその面倒な作業を全て自動化させることができるかもしれません。gulpのインストールから導入までまとめています。どういったプラグインを導入したらいいか分からないといった方にもおすすめのプラグインを紹介しています。
shuu1104.com
2021.06.26

gulpfile.jsのテンプレート紹介についてはこちら。

【gulp4】gulpfile.jsのテンプレートサンプル紹介【web制作】
今回はgulpfile.jsのテンプレートサンプルを紹介していきます。久しぶりにgulpを触ったのでまとめておこうと思います。gulpを導入したけどどういうプラグインを導入すればいいか分からない、どのように構築していけばいいか分からないといった方に見ていただけるとうれしいです。web制作をしている方はgulpを使えるようになるとできる幅が広がるのでぜひ参考にしてください。
shuu1104.com
2021.06.24

それではgulpを使って画像を圧縮する説明をします。

スポンサーリンク

解決できること

画像の圧縮をするだけであればTinyPNG等のオンラインのサービスを使うだけで事足ります。

しかし画像の数が何十、何百にもなればオンラインサービスを使って圧縮を行うのにも一苦労です。

gulpを使えば大量の画像でも手軽に圧縮をすることができます。

今回は以下4つのプラグインを使って画像の圧縮をしていきます。

プラグイン名内容
gulp-imagemin画像を圧縮する
imagemin-mozjpeg.jpegを圧縮できるようにする
imagemin-pngquant.pngの圧縮率が高い
gulp-changed圧縮済みの画像ファイルに対して再度画像を圧縮しないようにする
スポンサーリンク

ディレクトリ構成

今回のディレクトリ構成は下記になります。

test
├ node_modules
├ dist
│ └ image
├ src
│ └ image
│ 　 ├ sample.gif
│ 　 ├ sample.png
│ 　 └ sample.jpg
├ gulpfile.js
├ package-lock.json
└ package.json

src/image の中に圧縮前の画像ファイル入れます。

gulp-imageminプラグインを使ってdist/image に圧縮後の画像ファイルを出力します。

スポンサーリンク

gulp-imageminをインストールする

それではgulp-imageminをインストールしていきましょう。

npm i -D gulp-imagemin

画像を圧縮するためのプラグインをインストールします。

// CommonJS形式で記述する場合 (本記事はこちら)
npm i -D gulp-imagemin@7.1.0

// ES Module形式で記述する場合
npm i -D gulp-imagemin

gulp-imageminの中身を見てみるとバージョンがver.7.1.0以降はES Module形式で記述されているため、本記事で紹介する書き方ではエラーが発生します。
本記事のようなCommonJSで記述している方はver.7.1.0を、
ES Moduleで記述されている方は最新バージョンをインストールしてください。

gulp-imagemin公式

gulp-imagemin

プラグインのインストールが完了したらgulpfile.jsを編集していきましょう。

//----------------------------------------------------------------------
//  モード
//----------------------------------------------------------------------
"use strict";

//----------------------------------------------------------------------
//  モジュール読み込み
//----------------------------------------------------------------------
const gulp = require("gulp");
const { src, dest, series, parallel, watch } = require("gulp");

const imageMin = require("gulp-imagemin");

//----------------------------------------------------------------------
//  関数定義
//----------------------------------------------------------------------
function imagemin(done) {
  src("./src/image/**")
    .pipe(
      imageMin([
        imageMin.svgo(),
        imageMin.optipng(),
        imageMin.gifsicle({ optimizationLevel: 3 }),
      ])
    )
    .pipe(dest("./dist/image/"));
  done();
}

//----------------------------------------------------------------------
//  タスク定義
//----------------------------------------------------------------------
exports.imagemin = imagemin;

/************************************************************************/
/*  END OF FILE                                                         */
/************************************************************************/
スポンサーリンク

imageminプラグインを追加インストールしよう

上記コードのまま使用してもいいのですが、.jpeg に対応していなかったり.png の圧縮率が低かったりします。

それらを補うimageminプラグインを追加でインストールしていきましょう。

npm i -D imagemin-mozjpeg imagemin-pngquant

こちらがimageminのプラグインです。

.jpeg の圧縮ができるようになるプラグインと.png の圧縮率が高いプラグインです。

こちらもimagemin-mozjpegはバージョンによって記述が違いますので、ご自身の環境に合わせてインストールしてください。

// CommonJS形式で記述する場合 (本記事はこちら)
npm i -D imagemin-mozjpeg@9.0.0 imagemin-pngquant

// ES Module形式で記述する場合
npm i -D imagemin-mozjpeg imagemin-pngquant

imagemin-mozjpeg 公式

imagemin-mozjpeg

imagemin-pngquant公式

imagemin-pngquant

それでは追加したプラグインを使用したいので、gulpfile.jsを編集していきましょう。

//----------------------------------------------------------------------
//  モード
//----------------------------------------------------------------------
"use strict";

//----------------------------------------------------------------------
//  モジュール読み込み
//----------------------------------------------------------------------
const gulp = require("gulp");
const { src, dest, series, parallel, watch } = require("gulp");

const imageMin = require("gulp-imagemin");
const mozjpeg = require("imagemin-mozjpeg");    // 追加
const pngquant = require("imagemin-pngquant");  // 追加


//----------------------------------------------------------------------
//  関数定義
//----------------------------------------------------------------------
function imagemin(done) {
  src("./src/image/**")
    .pipe(
      imageMin([
        pngquant({                // 追加
          quality: [0.6, 0.7],
          speed: 1,
        }),
        mozjpeg({ quality: 65 }), // 追加
        imageMin.svgo(),
        imageMin.optipng(),
        imageMin.gifsicle({ optimizationLevel: 3 }),
     ])
    )
    .pipe(dest("./dist/image/"));
  done();
}

//----------------------------------------------------------------------
//  タスク定義
//----------------------------------------------------------------------
exports.imagemin = imagemin;

/************************************************************************/
/*  END OF FILE                                                         */
/************************************************************************/
スポンサーリンク

gulp-changedで再圧縮の処理時間を無くそう

ここまでで画像を圧縮するための記述が完了しました。

続いて画像の再圧縮を無くして画像圧縮全体の処理時間を減らすプラグインをインストールしていきましょう。

npm i -D gulp-changed

gulp-changedをインストールします。

npm i -D gulp-changed

distフォルダ を監視し、圧縮済みの画像ファイルに対して再度画像を圧縮させないようにします。

gulp-changed 公式

gulp-changed

それではgulp-changedをgulpfile.jsに反映させていきましょう。

//----------------------------------------------------------------------
//  モード
//----------------------------------------------------------------------
"use strict";

//----------------------------------------------------------------------
//  モジュール読み込み
//----------------------------------------------------------------------
const gulp = require("gulp");
const { src, dest, series, parallel, watch } = require("gulp");

const imageMin = require("gulp-imagemin");
const mozjpeg = require("imagemin-mozjpeg");
const pngquant = require("imagemin-pngquant");
const changed = require("gulp-changed");        // 追加

//----------------------------------------------------------------------
//  関数定義
//----------------------------------------------------------------------
function imagemin(done) {
  src("./src/image/**")
    .pipe(changed("./dist/image/"))   // 追加
    .pipe(
      imageMin([
        pngquant({
          quality: [0.6, 0.7],
          speed: 1,
        }),
        mozjpeg({ quality: 65 }),
        imageMin.svgo(),
        imageMin.optipng(),
        imageMin.gifsicle({ optimizationLevel: 3 }),
      ])
    )
    .pipe(dest("./dist/image/"));

  done();
}

//----------------------------------------------------------------------
//  タスク定義
//----------------------------------------------------------------------
exports.imagemin = imagemin;

/************************************************************************/
/*  END OF FILE                                                         */
/************************************************************************/
スポンサーリンク

コマンドを実行しよう

以下コマンドを実行しましょう。

npx gulp imagemin

「npx」のコマンド使用時にエラーが出る方はこちらを参照してください。

gulpのインストール先が異なる可能性があります。

【gulp4】gulpとはなにか? 環境構築してみよう windows10版
web制作にある程度慣れてきた方向けにgulpとはなにか、メリット・デメリットを説明しています。またgulpの環境構築についても記載していますのでgulpに興味のある方はぜひ導入を検討してみてください。
shuu1104.com
2021.05.09

以下のようになれば画像が圧縮されています。

[00:00:00] Starting 'imagemin'...
[00:00:00] Finished 'imagemin' after 351 ms
[00:00:00] gulp-imagemin: Minified 3 images (saved 725 kB - 26.3%)
スポンサーリンク

おわりに

以上gulp-imageminを使って画像を圧縮する方法を説明しました。

いかがだったでしょうか。

画像を手動で圧縮するのが手間に感じるようであれば、gulpで自動圧縮することも検討してみてください。

コメント

タイトルとURLをコピーしました