グローバルナビゲーションへ

本文へ

フッターへ

お役立ち情報Blog



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」パッケージをインストールします。

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

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

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

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

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

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

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

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

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

オプションの指定方法

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

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

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

さいごに

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

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

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

The following two tabs change content below.

なかもと

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

FOLLOW US

最新の情報をお届けします