webpack で Imagemin を使用する

Katie Hempenius 氏
Katie Hempenius
X

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

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

このプロジェクトの既存の webpack.config.js では、images/ ディレクトリから dist/ ディレクトリにイメージがコピーされていますが、圧縮されていません。

  • [Remix to Edit] をクリックしてプロジェクトを編集可能にします。
  • まず、webpack.config.js の先頭に次のコードを追加して、Imagemin プラグインを宣言します。
const ImageminPlugin = require('imagemin-webpack-plugin').default;
  • 次に、以下のコードを plugins[] 配列の最後の項目として追加します。これにより、webpack が使用するプラグインのリストに Imagemin が追加されます。
new ImageminPlugin()

✔️ チェックイン

完成した webpack.config.js ファイルは次のようになります。

const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
     new CopyWebpackPlugin([{
       from: 'img/**/**',
       to: path.resolve(__dirname, 'dist')
     }]),
     new ImageminPlugin()
  ]
}

これで、Imagemin を使用して画像を圧縮する webpack 構成が作成されました。

Webpack を実行する

  • [ターミナル] をクリックします（注: [ターミナル] ボタンが表示されない場合は、全画面表示オプションを使用する必要があります）。
  • イメージを圧縮するには、コンソールで次のコマンドを入力して webpack を実行します。
webpack --config webpack.config.js --mode development

しかし、Webpack を本番環境モードで実行するとどうなるでしょうか。

  • webpack を再実行します。ただし、今回は本番環境モードで実行します。
webpack --config webpack.config.js --mode production

今回は、PNG ファイルが圧縮されているにもかかわらず、推奨サイズの上限を超えているという警告が表示されます。（webpack の development モードと production モードでは優先度が異なるため、この警告は本番環境モードで webpack を実行しているときにのみ表示されます）。

この警告を解決するには、Imagemin の構成をカスタマイズします。

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

次のオブジェクトを ImageminPlugin() に渡して、PNG 画像を圧縮するための設定を追加します。

{pngquant: ({quality: [0.5, 0.5]})}

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

✔️ チェックイン

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

const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([{
        from: 'img/**/**',
        to: path.resolve(__dirname, 'dist')
    }]),
    new ImageminPlugin({
      pngquant: ({quality: [0.5, 0.5]}),
      })
  ]
}

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

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

JPG 圧縮には、imagemin-webpack-plugin のデフォルト プラグイン（imagemin-jpegtran）ではなく、imagemin-mozjpeg プラグインを使用します。Jpegtran とは異なり、Mozjpeg では JPG 圧縮の圧縮品質を指定できます。この Glitch には Mozjpeg プラグインがすでにインストールされていますが、webpack.config.js ファイルを編集する必要があります。

  • webpack.config.js ファイルの先頭に次の行を追加して、imagemin-mozjpeg プラグインを初期化します。
const imageminMozjpeg = require('imagemin-mozjpeg');
  • ImageminPlugin() に渡されるオブジェクトに plugins プロパティを追加して、オブジェクトは次のようになります。
new ImageminPlugin({
  pngquant: ({quality: [0.5, 0.5]}),
  plugins: [imageminMozjpeg({quality: 50})]
})

このコードは、Mozjpeg プラグインを使用して JPG を 50 の品質（0 は最低、100 は最高）に圧縮するよう Webpack に指示します。

imagemin-webpack-plugin のデフォルト プラグインであるプラグインの設定を追加する場合は、ImageminPlugin() に渡されるオブジェクトのキー オブジェクト ペアとして追加できます。Pnquant の設定が良い例です。

ただし、デフォルト以外のプラグイン（Mozjpeg など）の設定を追加する場合は、plugins プロパティに対応する配列に含めて追加する必要があります。

✔️ チェックイン

コードは次のようになります。

const imageminMozjpeg = require('imagemin-mozjpeg');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([{
      from: 'img/**/**',
      to: path.resolve(__dirname, 'dist')
    }]),
    new ImageminPlugin({
      pngquant: ({quality: [0.5, 0.5]}),
      plugins: [imageminMozjpeg({quality: 50})]
    })
  ]
}

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

  • コンソールで、webpack を再実行します。
webpack --config webpack.config.js --mode production

今回は、変更により、webpack の警告は修正されているはずです。

webpack は、サイズの大きい画像について警告しますが、画像が圧縮されていないか、圧縮されていないかは確認できません。そのため、変更の確認には常に Lighthouse を使用することをおすすめします。

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

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

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

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