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 で結果を検証する
- [ツール] ボタンをクリックします。
- 次に、[Console](コンソール)ボタンをクリックします。
- コンソールに次のコマンドを入力して Grunt を実行します。
grunt
Grunt が完了すると、コンソールに次のようなメッセージが表示されます。
Minified 6 images (saved 667 kB - 66.5%)
今回は、結果ははるかに優れています。
最後に、Lighthouse を使用して、行った変更を確認することをおすすめします。Lighthouse の「画像の効率的なエンコード」パフォーマンス監査では、ページ上の JPEG 画像が最適に圧縮されているかどうかを確認できます。
- サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 を押します。
- ライブ版の Glitch で Lighthouse のパフォーマンス監査([Lighthouse] > [Options] > [Performance])を実行し、「画像の効率的なエンコード」の監査に合格したことを確認します。
Success! これで、Imagemin を使用してページ上の画像を最適に圧縮できました。