ホームページ制作 SEO対策システム関連タスクランナーを導入して一括でWebP画像に変換すれば、ページスピードインサイトで指摘される「次世代フォーマットでの画像の配信」を100%回避！

デザイングループ　山本
2023.03.07

こんにちは。制作部開発グループの山本です。

以前「ページスピードインサイトの速度改善」についてご紹介しましたが、
社内のデザイナーより、

WebP画像に変換したいけどサイト全体だと数が多くて大変
JPEG、PNG画像を一括でWebP画像に変換したい
ページスピードインサイトの指摘（次世代フォーマットでの画像の配信）をすべて回避したい

など要望をいただきました。

そこで今回、タスクランナー（※gulp.js）を使用して、
一瞬で「サイト全体の画像をWebP画像に変換する仕組み」を構築しましたのでご紹介いたします。

※gulp.jsとは
Webサイト制作の様々なタスクを自動化することができるビルドシステムです。

必要な材料は3つだけ

gulp.js（ガルプ）
Node.js（ノード）
Visual Studio Code

タスクランナーを導入してJPEGやPNGを一括でWebP画像に変換する方法

目次
タスクランナー（gulp.js）の導入
WebP画像へ変換後の圧縮率
ページスピードインサイトの改善結果
まとめ

タスクランナー（gulp.js）の導入

■導入の流れ

（１）Node.jsのインストール

https://nodejs.org/ja/

※LTS推奨版のダウンロードをおすすめいたします。

Node.jsのインストール画面

（２）Visual Studio Codeで作業するディレクトリを開きます

Visual Studio Codeの画面

（３）ターミナルを開いて以下のコマンドを実行します

npm i -D gulp gulp-webp

Visual Studio Codeの画面

インストールが終わると作業ディレクトリ直下に「node_modules」階層と「package-lock.json」「package.json」が生成されます。

Visual Studio Codeの画面

（４）タスクの設定ファイルを作成します

作業ディレクトリの直下に「gulpfile.js」という名前でファイルを作成します。
ファイルの中に以下のソース記述します。

const gulp = require('gulp');
const webp = require('gulp-webp');
const path = {
    src: 'src/img/**/*.{jpeg,jpg,png}',
    dest: 'dest/img',
};
const convertImage = () => {
    return gulp
        .src(path.src)
        .pipe(
            webp({
                quality: 90,
            })
        )
        .pipe(gulp.dest(path.dest));
};

const watchFiles = () => {
    gulp.watch(path.src, gulp.parallel(convertImage));
};

exports.default = gulp.series(convertImage, watchFiles);