Grunt で Imagemin を使用する

Katie Hempenius 氏
Katie Hempenius
X

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

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

  • [Remix to Edit] をクリックしてプロジェクトを編集可能にします。
  • gruntfile.js で、//Add configuration here コメントを次のコードブロックに置き換えます。
imagemin: {
  dynamic: {
    files: [{
      cwd: 'images/',
      expand: true,
      src: ['**/*.{png,jpg}'],
    }]
  }
}

このコードブロックは、Imagemin で圧縮するファイルを Grunt に指示します。

  • dynamic は、指定されたファイル パターンとファイル名を照合することで、圧縮するファイルのリストが動的に生成されることを示します。

  • ファイル パターン {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} は、images/ ディレクトリにあるすべての JPEG および PNG 画像に一致します。

  • grunt.registerTask(...) の直前に次の行を追加して、Imagemin タスクを読み込みます。
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);
  • 最後に、/* list plugins here */ コメントを 'imagemin' に置き換えて、Imagemin をデフォルトの Grunt タスクとして追加します。行は次のようになります。
grunt.registerTask('default', ['imagemin']);

✔️ チェックイン

完全な gruntfile.js ファイルは次のようになります。

const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    dynamic: {
      files: [{
        cwd: 'images/'
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

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

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

  • gruntfile.js の先頭に次の行を追加して、imagemin-pngquant プラグインを宣言します。
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...
  • imagemin オブジェクトに options プロパティを追加して、PNG 画像を圧縮するための設定を追加します。この options プロパティは次のようになります。
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

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

✔️ チェックイン

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

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

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

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

すでにインストールされている imagemin-mozjpeg プラグインを使用して、JPEG 画像を圧縮します。

  • imagemin-mozjpeg プラグインを宣言するには、この行を gruntfile.js の先頭に配置します。
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
  • 次に、options オブジェクトの配列に mozjpeg({quality: 50}) を追加します。配列は次のようになります。
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {

✔️ チェックイン

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

const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Grunt を実行し、Lighthouse で結果を検証する

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

Grunt が完了すると、コンソールに次のようなメッセージが表示されます。

Minified 6 images (saved 667 kB - 66.5%)

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

最後に、Lighthouse を使用して、行った変更を確認することをおすすめします。Lighthouse の「画像の効率的なエンコード」パフォーマンス監査では、ページ上の JPEG 画像が最適に圧縮されているかどうかを確認できます。

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

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

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