webpack で Imagemin を使用する

Katie Hempenius
Katie Hempenius

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

この Glitch にはすでに webpackwebpack-cli、および imagemin-webpack-plugin。Imagemin の構成を追加するには、次が必要です webpack.config.js ファイルを編集します。

このプロジェクトの既存の webpack.config.js は、次の場所からイメージをコピーしています images/ ディレクトリから dist/ ディレクトリに移動しますが、まだ 圧縮します。

  • [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
で確認できます。
  • まず、次のコードをコードの先頭に追加して、Imagemin プラグインを宣言します。 webpack.config.js:
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 を実行する

  • [ターミナル] をクリックします(注: ターミナル ボタンが表示されない場合は、[全画面表示] オプションをご利用ください)。
  • イメージを圧縮するには、 console:
webpack --config webpack.config.js --mode development

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

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

今度は、webpack は PNG が 圧縮しても、推奨サイズの上限を超えることがあります。 (webpack の development モードと production モードでは、異なるものを優先するため、 本番環境モードで webpack を実行しているときにのみ、この警告が表示されます)。

Imagemin 構成をカスタマイズして、この警告を修正します。

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

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

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

このコードは、Pngquant プラグインを使用して PNG を圧縮するよう Imagemin に指示しています。「 quality フィールドでは、minmax の値の範囲を使用して、 圧縮レベルです。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 圧縮の圧縮品質を指定できます。Google では、 すでに Mozjpeg プラグインをインストールしていますが、 webpack.config.js ファイルを編集します。

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

このコードは、JPG を 50 の品質に圧縮するよう Webpack に指示しています(0 は最悪。 100 が最適)です。

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

ただし、デフォルト以外のプラグイン( 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 はサイズの大きい画像について警告しますが、画像のサイズが 非圧縮か非圧縮かですこの理由から、Terraform を使用して、 Lighthouse にアクセスして、変更を確認します。

Lighthouse の「Efficiently encode images」パフォーマンスの監査によって、 ページの JPEG 画像が最適に圧縮されることを確認します。

  • サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示 全画面表示
  • Lighthouse のパフォーマンス監査を実行します([Lighthouse] > [Options] > [Performance])。 Glitch のライブ バージョンを開いて、[Efficiently encode] 画像の監査に合格しました。

「Efficiently encode images」Lighthouse の監査

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