Imagemin Gulp プラグインを設定する
この Glitch には、すでに gulp
、gulp-cli
、gulp-imagemin
プラグインが含まれています。Imagemin の構成を追加するには、gulpfile.js
ファイルを編集する必要があります。
- [Remix to Edit] をクリックしてプロジェクトを編集可能にします。
- まず、
gulpfile.js
の先頭に次のコードを追加して、gulp-imagemin
プラグインを初期化します。
const imagemin = require('gulp-imagemin');
- 次に、
gulpfile.js
の//Add tasks here
コメントを次のコードブロックに置き換えます。
gulp.src('images/*')
.pipe(imagemin())
.pipe(gulp.dest('images/'))
このコードは、Imagemin を使用して images/
ディレクトリ内の画像を圧縮する Gulp タスクを追加します。元の画像が上書きされ、同じ images/
ディレクトリに保存されます。
✔️ チェックイン
gulpfile.js
ファイルは以下のようになります。
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');
gulp.task('default', () => {
gulp.src('images/*')
.pipe(imagemin())
.pipe(gulp.dest('images/'))
});
これで、画像を圧縮できる gulpfile.js
が作成されました。
Gulp を実行
- [ツール] ボタンをクリックします。
- 次に、[Console](コンソール)ボタンをクリックします。
- コンソールに次のコマンドを入力して、Gulp を実行して画像を圧縮します。
gulp
Gulp が完了すると、ターミナルに次のようなメッセージが表示されます。
gulp-imagemin: Minified 6 images (saved 50 kB—14.8%)
ファイルサイズが 15% 改善されたのは良いスタートです。ただし、圧縮設定を変えることで、さらに改善が可能です。
Imagemin 構成をカスタマイズする
imagemin-pngquant
は、圧縮品質レベルを指定するプラグインです。このプロジェクトの package.json
ファイルにはすでに imagemin-pngquant
が追加されているため、これを使用して PNG を圧縮できます。これを使用するには、プラグインを宣言し、gulpfile で圧縮品質レベルを指定します。
gulpfile.js
の先頭に次の行を追加して、imagemin-pngquant
プラグインを宣言します。
const pngquant = require('imagemin-pngquant');
- 次の配列を
ImageminPlugin()
に渡して、imagemin-pngquant
プラグイン(およびその設定)を追加します。
[pngquant({quality: [0.5, 0.5]})]
このコードは、Pngquant プラグインを使用して PNG を圧縮するように Imagemin に指示します。quality
フィールドは、min
と max
の値の範囲を使用して圧縮レベルを決定します(0 が最小、1 が最高)。すべての画像を 50% の品質で強制的に圧縮するには、最小値と最大値の両方で 0.5
を渡します。
✔️ チェックイン
gulpfile.js
ファイルは以下のようになります。
const pngquant = require('imagemin-pngquant');
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');
gulp.task('default', () => {
gulp.src('images/*')
.pipe(imagemin([
pngquant({quality: [0.5, 0.5]})
]))
.pipe(gulp.dest('images/'))
});
JPG の場合はどうでしょうか。プロジェクトには JPG 画像も含まれているため、これらも圧縮する必要があります。
Imagemin 構成をカスタマイズする(続き)
インストール済みの imagemin-mozjpeg
プラグインを使用して JPG 画像を圧縮します。
imagemin-mozjpeg
プラグインを宣言するために、この行をgulpfile.js
の先頭に配置します。
const mozjpeg = require('imagemin-mozjpeg');
- 次に、
ImageminPlugin()
に渡される配列にmozjpeg({quality: 50})
を追加します。
[
pngquant({quality: [0.5, 0.5]}),
mozjpeg({quality: 50})
]
✔️ チェックイン
gulpfile.js
ファイルは以下のようになります。
const mozjpeg = require('imagemin-mozjpeg')
const pngquant = require('imagemin-pngquant');
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');
gulp.task('default', () => {
gulp.src('images/*')
.pipe(imagemin([
pngquant({quality: [0.5, 0.5]}),
mozjpeg({quality: 50})
]))
.pipe(gulp.dest('images/'))
});
Gulp を再実行し、Lighthouse で結果を確認する
- Gulp を再実行します。
gulp
Gulp が完了すると、ターミナルに次のようなメッセージが表示されます。
gulp-imagemin: Minified 6 images (saved 667 kB—66.5%)
今回は、結果ははるかに優れています。
最後に、Lighthouse を使用して、行った変更を確認することをおすすめします。
Lighthouse の「画像の効率的なエンコード」パフォーマンス監査では、ページ上の JPEG 画像が適切に圧縮されているかどうかを確認できます。
- サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 を押します。
- ライブ版の Glitch で Lighthouse のパフォーマンス監査([Lighthouse] > [Options] > [Performance])を実行し、「画像の効率的なエンコード」の監査に合格したことを確認します。
Success! これで、Imagemin を使用してページ上の画像を最適に圧縮できました。