WebP（ウェッピー）は、Googleが開発を主導する次世代の画像フォーマットです。従来のJPEGやPNGと比べて高い圧縮率を誇り、Webサイトの表示速度向上に大きく貢献します。
最近のWeb制作案件でWebPを採用するケースも増えてきました。そこで今回は、Web制作者やサイト運営者の皆さま向けに、既存の画像を一括でWebPに変換するコマンドと、PHPを使用してWebP対応の<picture>タグを効率的に生成する関数をご紹介します。
ターミナルでフォルダ内の画像を一括処理！既存画像をWebPに変換するコマンド
WebPへの変換には、Googleが提供する公式ツール「cwebp」を使用するのが一般的です。まず、お使いの環境にこれをインストールしましょう。
macOSでHomebrewを利用している場合は、ターミナルで以下のコマンドを実行するだけです。
brew install webpWindowsやLinux、またはHomebrew以外の方法をご希望の場合は、以下の公式サイトからツールをダウンロードしてインストールしてください。
WebP 公式サイト (Google Developers)
インストールが完了したら、ターミナルで画像が保存されているフォルダに移動し、以下のコマンドを実行します。このコマンドは、指定したフォルダ内とサブフォルダ内にある全てのPNGファイルとJPGファイルをWebPに一括変換します。
コマンド内の「[画像フォルダのパス]」部分は、実際のフォルダパスに書き換えてください（例: ./data/images など）。また、JPGの画質は「-q 80」（品質80）に設定されています。これはお好みで調整してください（-losslessオプションで可逆圧縮も可能です）。
cd [画像フォルダのパス]で変換したい画像の入っているフォルダに移動
find . -type f -name '*.png' -print0 | \
xargs -0 -I {} bash -c 'cwebp -lossless -metadata icc "{}" -o "$(echo "{}" | sed "s/\.png$/.webp/")"' && \
find . -type f -name '*.jpg' -print0 | \
xargs -0 -I {} bash -c 'cwebp -q 80 -metadata icc -sharp_yuv "{}" -o "$(echo "{}" | sed "s/\.jpg$/.webp/")"'このコマンドを実行すると、元のPNGやJPGファイルはそのまま保持され、同じ階層に「.webp」という拡張子の新しい画像ファイルが作成されます。
▼ コマンド（&&）の簡単な解説
&&: 左のコマンドが成功した場合のみ、右のコマンドを実行します。エラーが出たら後続の処理は停止します。;: 左のコマンドの実行結果に関わらず、順番に実行します。||: 左のコマンドがエラーになった場合のみ、右のコマンドを実行します。
▼.jpg ファイルに対してもロスレス変換を行う場合
find . -type f -name '*.png' -print0 | xargs -0 -I {} bash -c 'cwebp -lossless -metadata icc "{}" -o "$(echo "{}" | sed "s/\.png$/.webp/")"' && \
find . -type f -name '*.jpg' -print0 | xargs -0 -I {} bash -c 'cwebp -lossless -metadata icc "{}" -o "$(echo "{}" | sed "s/\.jpg$/.webp/")"'※-lossless: WebPの可逆圧縮モードを有効にします。これにより、ファイルサイズは大きくなる傾向がありますが、元の画質が完全に保持されます。
PHPで効率化！WebP対応のタグを生成する関数
WebPは非常に優れたフォーマットですが、残念ながらIE11など一部の古いブラウザではサポートされていません。そのため、WebP非対応ブラウザのユーザーにも正しく画像を表示させる「フォールバック対応」が必要です。
主な対応方法には、以下の2種類があります。
- 1.
<picture>タグを使用する方法 - 2.
.htaccessでサーバー側で振り分ける方法
.htaccess で対応できるとサーバー側で完結するため楽ですが、サーバーの設定を触れないケースも少なくありません。そこで今回は、より汎用的に使える <picture> タグを使った対応方法をご紹介します。基本的な構造は以下のようになります。
<picture class="xxxx">
<!-- WebP用画像 -->
<source srcset="xxx.webp" type="image/webp" width="" height="">
<!-- 従来画像 -->
<img src="xxx.jpg" alt="xxx" width="" height="">
</picture>この方法だと、WebP用のパスと従来の画像パスの2種類を記述する必要があり、少し手間がかかります。もしあなたのWebサイトがPHPを利用できる環境（WordPressなど）であれば、以下のような関数を用意しておくと、記述を一行で済ませることができ非常に便利です。
/**
* WebP対応のpictureタグを生成する関数
*
* @param string $classes class属性に設定するクラス名
* @param string $filepath 従来の画像ファイルパス (例: ./img/sample.jpg)
* @param string $alt alt属性
* @param string $extra widthやheightなどの追加属性 (例: width="300" height="400")
*/
function pictureTagForWebp($classes,$filepath,$alt,$extra){
$fileinfo = pathinfo($filepath); // 拡張子を取り除くためファイルのパス情報取得
$webp_path = $fileinfo['dirname'].'/'.$fileinfo['filename'].'.webp';
echo '
<picture class="'.$classes.'">
<source srcset="'.$webp_path.'" type="image/webp" '.$extra.'>
<img src="'.$filepath.'" alt="'.$alt.'" '.$extra.'>
</picture>
';
}
// 関数の呼び出し例
pictureTagForWebp('products-item','./data/images/home/products-item-double_wood.png','バルヴェニー14年ダブルウッド','width="300" height="400" loading="lazy"');
ちなみに、CSSの背景画像（background-image）でWebP対応を行いたい場合は、JavaScriptライブラリの「Modernizr」などを活用する方法があります。
よくある質問（FAQ）
WebPの主なメリットとデメリットは何ですか？
メリットは、画質を保ったままファイルサイズを大幅に削減（JPEGやPNGより25〜35%程度）できる点です。これによりWebサイトの表示速度が向上し、SEOやユーザー体験（UX）の改善に繋がります。
デメリットは、IE11など一部の古いブラウザではサポートされていない点ですが、これはこの記事で紹介した<picture>タグなどで対策可能です。
一括変換コマンドを実行すると、元のJPGやPNG画像は削除されますか？
いいえ、元の画像（JPG、PNG）は削除されません。ご紹介したコマンドは、元のファイルを読み込んで、新しいWebPファイル（.webp）を別ファイルとして生成するものです。元の画像はそのまま残るので、安全に実行できます。
<picture> タグを使った場合、IE11では何が表示されますか？
IE11は <picture> タグ自体と、<source> タグのWebP形式を認識できません。そのため、これらの要素は無視され、最終的に記述されている <img> タグを読み込みます。結果として、IE11のユーザーには従来の画像（JPGやPNG）が正しく表示されます。
find . -type f -name ‘*.png’ -exec sh -c ‘cwebp -lossless -metadata icc $1 -o “${1%.png}.webp”‘ _ {} \; && find . -type f -name ‘*.jpg’ -exec sh -c ‘cwebp -q 80 -metadata icc -sharp_yuv $1 -o “${1%.jpg}.webp”‘ _ {} \;