WebP画像を一括で生成する


Ver. 2.11.22 より、次世代画像フォーマットである「WebP」画像の生成に対応しました。

新規制作であれば、最初からWebP画像が生成されるので問題ないですが、CMSをアップデートしてWebP画像に対応した場合、 古い画像は残念ながらWebP対応されません。

そこで今回は、古い画像もWebP画像に対応させる方法について、紹介したいと思います。

cwebp コマンド

最初に、WebP画像を生成するために、Googleが開発している「cwebp」コマンドをインストールします。
公式ページ: https://developers.google.com/speed/webp

いろいろな環境があるため、ここでは、macOS環境で「homebrew」を使ってインストールしてみます。 他の環境の場合は「cwebp」のインストール方法は、いろいろ記事で紹介されていますので、そちらをご参考ください。

Homebrewでのインストール

ターミナルで以下のコマンドを実行することにより「cwebp」をインストールすることができます。

$ brew install webp

シェルスクリプトの用意

以下のシェルスクリプトを、画像変換したいディレクトリ(例えば「media」ディレクトリなど)に設置します。

#!/bin/sh

images=`find . -type f -name *.jpg -or -name *.jpeg -or -name *.png`

for image in $images;
do
    cwebp $image -o $image".webp" >/dev/null 2>&1
done

上記のスクリプトを webp.sh として media ディレクトリに設置した場合。

$ cd path/to/media
$ chmod 755 webp.sh // 実行可能なパーミッションに変更
$ ./webp.sh

これで、pngやjpegの元画像と同じディレクトリ、元ファイル名.webp というファイルができてると思います。



これで、バージョンアップ前の画像も、WebP画像対応することができました。是非WebPが利用できる環境であれば是非お試しください。

同じタグ付けがされている記事