Gulp で Imagemin を使用する

Katie Hempenius
Katie Hempenius
X

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

この Glitch にはすでに gulp、gulp-cli、gulp-imagemin プラグインが含まれています。 Imagemin の構成を追加するには、gulpfile.js ファイルを編集する必要があります。

  • [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
  • まず、次のコードをコードの先頭に追加して、gulp-imagemin プラグインを初期化します。 gulpfile.js:
const imagemin = require('gulp-imagemin');
  • 次に、gulpfile.js の //Add tasks here コメントを次のコードで置き換えます。 block:
gulp.src('images/*')
  .pipe(imagemin())
  .pipe(gulp.dest('images/'))

このコードは、Imagemin を使用して画像を圧縮する Gulp タスクを追加し、 images/ ディレクトリ。元の画像は 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 が作成されました。

ランガルプ

  1. [ツール] ボタンをクリックします。
  2. [Console]（コンソール）ボタンをクリックします。
  3. 次のコマンドを入力して Gulp を実行し、イメージを圧縮します。 console:
gulp

Gulp が完了すると、次のようなメッセージがターミナルに表示されます。

gulp-imagemin: Minified 6 images (saved 50 kB—14.8%)

まず、ファイルサイズが 15% 改善されるとよいからです。改善できる点が多く 異なる圧縮設定を使用します。

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

imagemin-pngquant は、圧縮品質レベルを指定するためのプラグインです。 package.json のこのプロジェクトにはすでに imagemin-pngquant が追加されています これを使用して PNG を圧縮できるようにします。これを使用するには、Terraform で gulpfile で圧縮品質レベルを指定します

  • 次の行をファイルの先頭に追加して、imagemin-pngquant プラグインを宣言します。 gulpfile.js:
const pngquant = require('imagemin-pngquant');
  • 次のコードを渡して、imagemin-pngquant プラグイン（およびその設定）を追加します。 配列を ImageminPlugin() にします。
[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 画像。

  • gulpfile.js の先頭にこの行を配置して、imagemin-mozjpeg プラグインを宣言します。
const mozjpeg = require('imagemin-mozjpeg');
  • 次に、渡される配列に mozjpeg({quality: 50}) を追加します。 ImageminPlugin():
[
  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 の「Efficiently encode images」パフォーマンスの監査によって、 ページ上の JPEG 画像が最適に圧縮されることを確認します。

  • サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示 全画面表示。
  • Lighthouse のパフォーマンス監査（Lighthouse > Options > Performance）を実行する 動作中の Glitch を検証し、「Efficiently encode」 画像」合格しました。

「Efficiently encode images」Lighthouse の監査

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