WebPへの変換をもっと簡単に、gulp-webpを使ってWebP画像を生成する方法

2022.01.20

WEB

Webデザイン

IE（Internet Explorer）11がサポート対象外になり画像の圧縮形式にWebPを利用する機会が増えました。
WebPについては当ブログの記事でも紹介していますのでそちらをご覧ください。

当ブログの「WebP」に関する記事

WebP変換をする際にオンラインツールやPhotoshopのプラグインを利用するのも便利ですが、弊社ではHTML・CSSコーディングを行う際、タスクランナーにgulpを利用していますのでWebPへの変換もgulpに任せてみようと思います。

INDEX

gulp-webpの使い方
ファイル名を変更するにはgulp-rename
オプションの指定方法
さいごに

gulp-webpの使い方

gulpを利用する際にはNode.jsがお使いの端末、もしくは開発環境にインストールされている必要がありますが本記事では詳細は割愛します。インストール方法については下記の記事を参照してください。

Sassの利用環境を構築しよう！gulpを使ってCSSにコンパイルする手順を解説

Node.jsとnpmの準備ができたらgulp本体と、WebP画像への変換に利用する「gulp-webp」パッケージをインストールします。

npm

gulp-webp

npm init -y
npm install --save-dev gulp gulp-webp

インストールが完了したらgulpfile.jsを作成しタスクを設定します。

const gulp = require('gulp');
const webp = require('gulp-webp');
 
gulp.task('default', () => {
    return gulp.src('src/image.jpg')
        .pipe(webp())
        .pipe(gulp.dest('dist'))
});

「srcディレクトリのimage.jpgファイル」を「distディレクトのimage.webpファイル」に変換するという簡単なタスクです。

npx gulp

タスクを実行すると src/image.jpg ファイルが dist/image.webp に変換して生成されました。

このままだと変換対象となる画像名が「image.jpg」で固定になってしまい使い勝手が悪いので、「srcディレクトリ内のjpg、もしくはpngファイル」が対象となるように少しタスクを変更してみます。

const gulp = require('gulp');
const webp = require('gulp-webp');

gulp.task('default', () => {
    // この部分を変更
    return gulp.src('src/**/*.{jpg,jpeg,png}')
        .pipe(webp())
        .pipe(gulp.dest('dist'))
});

これでsrcディレクトリ内の構造を維持したまま、distディレクトリ内にWebPに変換された画像が生成されるようになりました。

ファイル名を変更するにはgulp-rename

WebP画像は生成できるようになりましたが、上記のタスクでは同名で異なる拡張子の画像（hoge.jpgとhoge.png等）があった場合はどちらか一方の画像が上書きされてしまいます。変換後の画像名を柔軟に指定したい場合は「gulp-rename」というパッケージを別途利用します。

npm install --save-dev gulp-rename

タスクも一部修正します。

const gulp = require('gulp');
const webp = require('gulp-webp');
// パッケージを追加
const rename = require('gulp-rename');

gulp.task('default', () => {
    return gulp.src('src/**/*.{jpg,jpeg,png}')
        // rename処理を追加
        .pipe(rename(function(path) {
            path.basename += path.extname;
        }))
        .pipe(webp())
        .pipe(gulp.dest('dist'))
});

タスクを実行すると src/image.jpg ファイルが dist/image.jpg.webp のように変換して生成されます。rename処理を追加することで変換後のWebP画像の名前に元画像の拡張子も含まれるようになりますので、変換後に任意で名前を変更することで使いたい画像を選択できます。

オプションの指定方法

このままでもWebPに変換された画像を利用できますが、変換する際にオプションを指定することも可能です。指定できるオプションは「imagemin-webp」というパッケージと同じ内容のようです。

GitHub

imagemin-webp

const gulp = require('gulp');
const webp = require('gulp-webp');
const rename = require('gulp-rename');

gulp.task('default', () => {
    return gulp.src('src/**/*.{jpg,jpeg,png}')
        // rename処理を追加
        .pipe(rename(function(path) {
            path.basename += path.extname;
        }))
        .pipe(webp({
            // オプションを追加
            quality: 70,
            method: 6,
        }))
        .pipe(gulp.dest('dist'))
});

普段はデフォルトの設定で運用することが多いですが、ファイルサイズ等の要件次第では qualityオプション（デフォルトは75）と methodオプション（デフォルトは4）を指定して調整してみてもよいかもしれません。

オプションの詳細はREADMEページをご確認ください。

さいごに

gulpを使ったWebP変換処理をご紹介しました。

冒頭で紹介したオンラインツールやPhotoshopのプラグインも便利ですが、インストールと設定を終えてしまえばファイル数を気にせずに何度でも一括で変換することができるのがタスクランナーの利点かなと改めて感じました。

よりよいWebサイトの提供を⽬指して今後も精進していきたいと思います。

この記事を書いた人

なかもとソリューション事業部マークアップエンジニア: 企画・営業部を経て、システムエンジニア、マークアップエンジニアとしてweb サイト制作、webアプリケーション開発の上流から下流まで幅広く携わる。ユーザビリティ、アクセシビリティを意識したセマンティックなマークアップとより良いユーザー体験を追及して日々奔走中。三度の飯よりwebが好き。