【gulp】imageminで画像を圧縮する方法

Webサイトのパフォーマンスを向上させるために、画像の圧縮は重要なステップです。手動で画像を1つずつ圧縮するのは手間がかかりますが、gulpとimageminを使えばこのプロセスを自動化できます。本記事では、gulpを導入し、imageminを使って画像を効率的に圧縮する方法を解説します。

必要なツールのインストール

まず最初に、gulpとimageminをインストールします。これらのツールを使って画像圧縮タスクを効率よく実行します。

imageminを使用するプロジェクトのルートディレクトリに移動し、以下のコマンドを実行します。

npm install gulp gulp-imagemin imagemin-jpegoptim imagemin-optipng imagemin-gifsicle imagemin-svgo --save-dev

ここでは、様々な画像形式（jpg、png、gif、svg）に対応するimageminプラグインをすべてインストールします。

gulpfile.jsの設定

次に、プロジェクトのルートディレクトリにgulpfile.jsという名前のファイルを作成し、以下のコードを追加します。

// gulpfile.js

// gulpを読み込む
const gulp = require('gulp');
// 各種imageminプラグインを読み込む
const imagemin = require('gulp-imagemin');
const imageminJpegoptim = require('imagemin-jpegoptim');
const imageminOptipng = require('imagemin-optipng');
const imageminGifsicle = require('imagemin-gifsicle');
const imageminSvgo = require('imagemin-svgo');

// 画像を圧縮するタスク（JPEG）
gulp.task('imagemin-jpg', () =>
    gulp.src('src/images/*.jpg')
        .pipe(imageminJpegoptim({ progressive: true, max: 80 })())
        .pipe(gulp.dest('dist/images'))
);

// 画像を圧縮するタスク（PNG）
gulp.task('imagemin-png', () =>
    gulp.src('src/images/*.png')
        .pipe(imageminOptipng({ optimizationLevel: 5 })())
        .pipe(gulp.dest('dist/images'))
);

// 画像を圧縮するタスク（GIF）
gulp.task('imagemin-gif', () =>
    gulp.src('src/images/*.gif')
        .pipe(imageminGifsicle({ optimizationLevel: 3 })())
        .pipe(gulp.dest('dist/images'))
);

// 画像を圧縮するタスク（SVG）
gulp.task('imagemin-svg', () =>
    gulp.src('src/images/*.svg')
        .pipe(imageminSvgo()())
        .pipe(gulp.dest('dist/images'))
);

// デフォルトのタスクを定義
gulp.task('default', gulp.parallel('imagemin-jpg', 'imagemin-png', 'imagemin-gif', 'imagemin-svg'));

実行してみよう

準備ができたら、コマンドラインで以下のコマンドを実行してみましょう。

gulp

これにより、gulpfile.jsで定義したimageminタスクが実行され、指定したディレクトリ内の画像が自動で圧縮されます。

まとめ

以上で、gulpとimageminを使用して画像圧縮を自動化する方法を紹介しました。この方法を使えば、Webサイトの画像パフォーマンスを向上させるための手間を大幅に削減できます。ぜひ、あなたのプロジェクトにも導入してみてください！