こんにちは、株式会社Pentagonでコーダーをしているさおりです。
最近、大量の画像をWebpに変換しないといけない時に、オンラインツールだと時間がかかるため、時間短縮できる方法をご紹介します。
【こんな人に読んで欲しい】
- Webp画像の変換をさくっとやりたい人
【この記事を読むメリット】
- オンラインの変換ツールを使わなくても変換ができるようになります
【結論】
オンラインの変換ツールでもWebpの変換は手軽にできますが、画像の枚数が多いと大変です。そこでコマンドラインツールを使うと、画像の枚数が多くなっても作業の手間は減ります。
大量の画像をなるべく短い時間でWebpに変換する方法を知りたい方は、この記事をぜひ読んでみてください。
Webp（ウェッピー）とは
Webpとは、Googleが開発した静止画像のフォーマットのことを言います。
ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。
（引用元）https://ja.wikipedia.org/wiki/WebP
Webpを使用するメリットとしては、表示速度の改善が一番大きいです。
デメリットは今まで対応しているブラウザが少なかったのですが、今はIE以外はほぼ対応しています。（2021年10月時点）
https://caniuse.com/webp
Webpに変換する3つの方法
Webpに変換する主な方法は下記の3つです。
- Photoshopから書き出す際にプラグインを使用してWebp書き出しをする
- Squooshなどのオンラインの変換ツールを使用する
- コマンドラインツールを使用する
一括で大量の画像をWebp変換する方法
今回は、コマンドラインツールを使って一括で大量の画像をWebp変換する方法をご紹介します。
コマンドラインツールはGoogleが開発している「cwebp」コマンドをインストールして使いましょう。
https://developers.google.com/speed/webp
Homebrewから webpをインストールする
コマンドラインツールで下記をコマンドを実行し、インストールします。
$ brew install webpShellスクリプトを作成する
Webpに変換したい画像をまとめたフォルダに以下のシェルスクリプトを作成し、webp.sh のように名前をつけて設置します。
#!/bin/sh
images=find . -type f -name *.jpg -or -name *.jpeg -or -name *.png
for image in $images;
do
cwebp $image -o $image".w
ebp" >/dev/null 2>&1
doneコマンドラインツールから設置したフォルダへ移動し、下記コマンドを実行しましょう。
$ cd path/to/dir // フォルダまでのパス
$ chmod 755 webp.sh //実行可能なパーミッションに変更
$ ./webp.shこれで同じフォルダ内に 「元のファイル名.webp」というファイルができます。
まとめ
写真が多いサイトやスピード改善を求められるサイトでは、Webpを使うことが多くなってきました。コマンドラインツールだと導入に一手間かかりますが、導入後は大量の画像でも一括で変換できるのでおすすめです。
