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])を実行し、[画像の効率的なエンコード] の監査に合格したことを確認します。
Success! これで、Imagemin を使用してページ上の画像を最適に圧縮できました。