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 画像も含まれているため、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 画像が最適に圧縮されているかどうかを確認できます。

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

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

完了しました。Imagemin を使用して、ページ上の画像を最適に圧縮しました。