WebPへの変換をもっと簡単に、gulp-webpを使ってWebP画像を生成する方法
IE（Internet Explorer）11がサポート対象外になり画像の圧縮形式にWebPを利用する機会が増えました。
WebPについては当ブログの記事でも紹介していますのでそちらをご覧ください。
WebP変換をする際にオンラインツールやPhotoshopのプラグインを利用するのも便利ですが、弊社ではHTML・CSSコーディングを行う際、タスクランナーにgulpを利用していますのでWebPへの変換もgulpに任せてみようと思います。
gulp-webpの使い方
gulpを利用する際にはNode.jsがお使いの端末、もしくは開発環境にインストールされている必要がありますが本記事では詳細は割愛します。インストール方法については下記の記事を参照してください。
Node.jsとnpmの準備ができたらgulp本体と、WebP画像への変換に利用する「gulp-webp」パッケージをインストールします。
|
1 2 |
npm init -y npm install --save-dev gulp gulp-webp |
インストールが完了したらgulpfile.jsを作成しタスクを設定します。
|
1 2 3 4 5 6 7 8 |
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ファイル」に変換するという簡単なタスクです。
|
1 |
npx gulp |
タスクを実行すると src/image.jpg ファイルが dist/image.webp に変換して生成されました。
このままだと変換対象となる画像名が「image.jpg」で固定になってしまい使い勝手が悪いので、「srcディレクトリ内のjpg、もしくはpngファイル」が対象となるように少しタスクを変更してみます。
|
1 2 3 4 5 6 7 8 9 |
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」というパッケージを別途利用します。
|
1 |
npm install --save-dev gulp-rename |
タスクも一部修正します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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」というパッケージと同じ内容のようです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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サイトの提供を⽬指して今後も精進していきたいと思います。
なかもと
最新記事 by なかもと (全て見る)
- gulpで画像を軽量化、gulp-imageminを使ってコマンドラインから画像を圧縮する（オプション・プラグイン編） - 2022年5月13日
- gulpで画像を軽量化、gulp-imageminを使ってコマンドラインから画像を圧縮する（インストール編） - 2022年3月16日
- WebPへの変換をもっと簡単に、gulp-webpを使ってWebP画像を生成する方法 - 2022年1月20日
- CSSのfilterプロパティを利用して簡単なフィルターを画像に追加しよう - 2021年10月8日
- CSS mix-blend-modeを利用してブレンドモードをキレイに再現しよう - 2021年9月22日
関連記事
最新記事
FOLLOW US
最新の情報をお届けします
- facebookでフォロー
- Twitterでフォロー
- Feedlyでフォロー
