Gulp で Imagemin を使用する

Katie Hempenius 氏
Katie Hempenius
X

Imagemin Gulp プラグインを設定する

この Glitch には、すでに gulp、gulp-cli、gulp-imagemin プラグインが含まれています。Imagemin の構成を追加するには、gulpfile.js ファイルを編集する必要があります。

  • [Remix to Edit] をクリックしてプロジェクトを編集可能にします。
  • まず、gulpfile.js の先頭に次のコードを追加して、gulp-imagemin プラグインを初期化します。
const imagemin = require('gulp-imagemin');
  • 次に、gulpfile.js の //Add tasks here コメントを次のコードブロックに置き換えます。
gulp.src('images/*')
  .pipe(imagemin())
  .pipe(gulp.dest('images/'))

このコードは、Imagemin を使用して images/ ディレクトリ内の画像を圧縮する Gulp タスクを追加します。元の画像が上書きされ、同じ images/ ディレクトリに保存されます。

✔️ チェックイン

gulpfile.js ファイルは以下のようになります。

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

gulp.task('default', () => {
  gulp.src('images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('images/'))
});

これで、画像を圧縮できる gulpfile.js が作成されました。

Gulp を実行

  1. [ツール] ボタンをクリックします。
  2. 次に、[Console]（コンソール）ボタンをクリックします。
  3. コンソールに次のコマンドを入力して、Gulp を実行して画像を圧縮します。
gulp

Gulp が完了すると、ターミナルに次のようなメッセージが表示されます。

gulp-imagemin: Minified 6 images (saved 50 kB—14.8%)

ファイルサイズが 15% 改善されたのは良いスタートです。ただし、圧縮設定を変えることで、さらに改善が可能です。

Imagemin 構成をカスタマイズする

imagemin-pngquant は、圧縮品質レベルを指定するプラグインです。このプロジェクトの package.json ファイルにはすでに imagemin-pngquant が追加されているため、これを使用して PNG を圧縮できます。これを使用するには、プラグインを宣言し、gulpfile で圧縮品質レベルを指定します。

  • gulpfile.js の先頭に次の行を追加して、imagemin-pngquant プラグインを宣言します。
const pngquant = require('imagemin-pngquant');
  • 次の配列を ImageminPlugin() に渡して、imagemin-pngquant プラグイン（およびその設定）を追加します。
[pngquant({quality: [0.5, 0.5]})]

このコードは、Pngquant プラグインを使用して PNG を圧縮するように Imagemin に指示します。quality フィールドは、min と max の値の範囲を使用して圧縮レベルを決定します（0 が最小、1 が最高）。すべての画像を 50% の品質で強制的に圧縮するには、最小値と最大値の両方で 0.5 を渡します。

✔️ チェックイン

gulpfile.js ファイルは以下のようになります。

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

gulp.task('default', () => {
  gulp.src('images/*')
    .pipe(imagemin([
      pngquant({quality: [0.5, 0.5]})
    ]))
    .pipe(gulp.dest('images/'))
});

JPG の場合はどうでしょうか。プロジェクトには JPG 画像も含まれているため、これらも圧縮する必要があります。

Imagemin 構成をカスタマイズする（続き）

インストール済みの imagemin-mozjpeg プラグインを使用して JPG 画像を圧縮します。

  • imagemin-mozjpeg プラグインを宣言するために、この行を gulpfile.js の先頭に配置します。
const mozjpeg = require('imagemin-mozjpeg');
  • 次に、ImageminPlugin() に渡される配列に mozjpeg({quality: 50}) を追加します。
[
  pngquant({quality: [0.5, 0.5]}),
  mozjpeg({quality: 50})
]

✔️ チェックイン

gulpfile.js ファイルは以下のようになります。

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

gulp.task('default', () => {
  gulp.src('images/*')
    .pipe(imagemin([
      pngquant({quality: [0.5, 0.5]}),
      mozjpeg({quality: 50})
    ]))
    .pipe(gulp.dest('images/'))
});

Gulp を再実行し、Lighthouse で結果を確認する

  • Gulp を再実行します。
gulp

Gulp が完了すると、ターミナルに次のようなメッセージが表示されます。

gulp-imagemin: Minified 6 images (saved 667 kB—66.5%)

今回は、結果ははるかに優れています。

最後に、Lighthouse を使用して、行った変更を確認することをおすすめします。

Lighthouse の「画像の効率的なエンコード」パフォーマンス監査では、ページ上の JPEG 画像が適切に圧縮されているかどうかを確認できます。

  • サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 全画面表示 を押します。
  • ライブ版の Glitch で Lighthouse のパフォーマンス監査（[Lighthouse] > [Options] > [Performance]）を実行し、「画像の効率的なエンコード」の監査に合格したことを確認します。

Lighthouse での「効率的な画像のエンコード」の監査に合格する

Success! これで、Imagemin を使用してページ上の画像を最適に圧縮できました。