KUSANAGI（Nginx）で、プラグインEWWW image optimizerを使わないで、WEBPへ自動で変換して画像配信する【KUSANAGI8・9対応】

質問者の写真

Pagespeed Insightsで「次世代フォーマットでの画像の配信」に対応しろって怒られちゃった……

あらあら
だったらWEBPで配信すればいいじゃない

質問者の写真

でもWEBP配信ってプラグインいるんじゃないの？
検索してみても出てくるのはEWWW image optimizer使った方法ばかり
せっかくKUSANAGIは画像最適化機能ついてるのに、同じ機能のプラグイン入れるなんて嫌だよ……

大丈夫！
KUSANAGI（Nginx）ならEWWW無くてもWEBPの一括変換・自動変換・配信の全てに対応できるわ！

アイキャッチの画像はKUSANAGIのイメージキャラクター草薙沙耶　©PRIME STRATEGY

はじめに　KUSANAGIを個人利用している方へ
本稿の主旨
始める前に　KUSANAGIの画像最適化機能について
KUSANAGIで既存の画像ファイルを一括でWEBPに変換する
KUSANAGIで追加した画像ファイルをWEBPに自動変換する
KUSANAGIでwebpを自動配信する
まとめ

はじめに　KUSANAGIを個人利用している方へ

KUSANAGIを個人利用している方でしたらWEXALの導入を勧めます。
本稿の内容は全てWEXALが自動でやってくれます。
個人利用であればWEXALは無料です。

本稿の主旨

本稿では、KUSANAGI（Nginx）でWEBPの変換・配信する方法を説明します。
変換については既存のファイルをwebpに一括で変換し、なおかつ加わったファイルも自動でwebpに変換します。

EWWW image optimizerを使った方法なら幾らでも出てきます。

しかし本稿の方法ですと、プラグインは一切必要ありません

「KUSANAGI WEBP」で検索してみたら「EWWW image optimizerを使って」ばかりでした。
しかし一方で「Nginxならプラグインなくても簡単にできる」とも出てくる。
「この差はどうして？」と思ったので、実際にKUSANAGIでWEBP画像の変換＆配信をEWWW image optimizer無しで導入してみた次第です。

本稿の方法におけるメリットは、

WEBP変換プラグインを１つ減らせること
WEBP変換を画像登録より後で行うので登録時の重さが解消できること

ただし２はWEBPが即座に反映されない点でデメリットでもあります。
30分ほどのタイムラグをどう捉えるかですね。

始める前に　KUSANAGIの画像最適化機能について

KUSANAGIの画像最適化機能は、他のWordPressプラグインと比べて、全く劣りません。
検証した記事がこちら。

KUSANAGI追加プラグイン「画像最適化」は使えるのか？　定番のCompress JPEG & PNG images、EWWW Image Optimizerと比較する

本記事は、KUSANAGI付属画像圧縮プラグインの性能を、他の定番プラグインCompress JPEG & PNG images 、EWWW Image Opt...

jpgについては完全に同等。
pngについては可逆圧縮か非可逆圧縮の差じゃないかと思います。
私はこれで足りるので他の画像最適化系プラグインは使っていません。

KUSANAGIで既存の画像ファイルを一括でWEBPに変換する

こちらの記事を参考にして進めます。

3ファイルでできるサイト全体の自動的なWebP対応 - Qiita

Apacheで運営しているサイトをお手軽にWebP対応する方法を紹介します。※ nginxも対応可能です。記事の末尾に参考情報を記載しました。Googleが推し...

１　cwebpをインストールする

KUSANAGIにはデフォルトで入ってないのでインストールします。
（もし入っていて、私が気づかなかっただけならごめんなさい）

次のページにアクセスします。

Index of downloads.webmproject.org/releases/webp

私は「libwebp-1.1.0-rc2-linux- x86-64.tar.gz」をダウンロードしました。
これで動いたので参考にしてください。

ローカルで解凍して、binフォルダに入っているファイル群を「/usr/local/bin」にアップします。

gzip対応の解凍ソフトは予め御用意ください。
私はLhaForgeを使っています。

窓の杜

「LhaForge」DLL自動更新機能付きの一発解凍・圧縮ソフト

２　シェルスクリプトを作成する

ローカルで新規テキストファイルを作成します。
ファイルの中身は、次のように書きます。

#!/bin/bash

DIR="DIR="/home/（自分の環境に応じたパスを記す）/DocumentRoot/wp-content/uploads/20??/*" # 対象ディレクトリパス(要変更)
JPEG_CWEBP_OPTS="-q 75 -m 4" # Jpeg向け非可逆cwebpオプション
PNG_CWEBP_OPTS="-lossless" # PNG向け可逆cwebpオプション
CWEBP="/usr/local/bin/cwebp" # cwebpコマンドをインストールした場所、１の通りにしたならこのままで

cd $(dirname $0)
shopt -s nocasematch

find $DIR -type f -regextype posix-extended -iregex ".*\.(jpe?g|png)$" -print0 | \
while IFS= read -r -d '' SRC; do
WEBP="$SRC.webp"
if [[ ! -e $WEBP || $SRC -nt $WEBP ]]; then
if [[ $SRC =~ \.jpe?g$ ]]; then
echo "Convert to lossy WebP: $SRC"
"$CWEBP" $JPEG_CWEBP_OPTS "$SRC" -o "$WEBP"
elif [[ $SRC =~ \.png$ ]]; then
echo "Convert to lossless WebP: $SRC"
"$CWEBP" $PNG_CWEBP_OPTS "$SRC" -o "$WEBP"
fi
fi
done

「webp.sh」という名前で保存します。

jpgの圧縮率はデフォルトで75。
特にいじる必要はないと思います。

画像ファイルは年月でフォルダわけをしている場合を念頭においてます。

「20??」の「？」は「任意の１文字」

この場合は「2020など頭に20がついたフォルダ」を指します。

「*」は「任意の文字数の任意の文字」。

この場合は「2019や2020フォルダの直下にある全てのフォルダ」となります。

この点は絶対に注意してください。

①UTF-8にすること　②改行方式は「LF」にすること

②は見落としがちです。
もし忘れると、

WEBPの自動変換ができない！
シェルスクリプト動かそうとしても「webp.shなんてファイルはない」って怒られる！

これで数時間無駄にしました。

その他のオプションについてはこちらを御覧ください。

cwebp | WebP | Google for Developers

３　webp.shをアップロードする

プロファイル直下にshフォルダを作って、その中に入れます。

/home/kusanagi/【プロファイル名】/sh

アップしたら実行権を与えます。
黒い画面で次のコマンドを打ち込みます。

# chmod a+x /（入れたパス）/webp.sh

４　既存の画像ファイルをWEBPへ一括変換する

ログインして、黒い画面に次の通り入力します。

# cd /home/kusanagi/【プロファイル名】/sh
# ./webp.sh

うまくいっていれば、すごい勢いで変換が始まります。
終わるまでには少々時間が掛かります。
終わったらフォルダを開いてみてください。
webpファイルができあがっているはずです。

webpファイルの名前は「～.jpg.webp」や「～png.webp」など「元の拡張子+webp」となります

なお、この作業は、シェルスクリプトの動作確認も兼ねています。

KUSANAGIで追加した画像ファイルをWEBPに自動変換する

webp.shをcronに登録して自動実行させます。

KUSANAGI8の場合は/etc/crontab。
KUSANAGI9の場合は/var/spool/cron/root
などを開きます。
（「など」というのは複数設定ファイルが複数あるのでどれでもいいという意味です）

*/30 * * * * （ユーザー名） /home/kusanagi/【プロファイル名】/sh/webp.sh >>/home/（自分のWordPress環境のパス）/uploads/webp.log 2>&1

保存して、

# kusanagi restart

webp.shは自分の入れたパス名に変更してください。
私と同じならこのままでOKです。

ユーザー名は、例えばkusanagiなど。

30は「30分ごとに自動実行する」設定です。
最初は10分程度に設定してみて、10分経過したらuploadsフォルダにログファイルがあるか確認してください。
さらに中身をチェックしてみてください。
正常なログが吐き出されていれば自動実行されています。

もしログファイルがなければ、あるいはおかしければ、cronの動作のログをチェックします。
/var/log/cronを開いてみてください。
シェルスクリプトが動作しない手掛かりが記されているはずです。

KUSANAGIでwebpを自動配信する

これらの記事を参考に進めました。
両方読んだ方がわかりやすいと思います。

最先端なWebPメインなウェブサイトを作る with Nginx

ウェブサイトの転送量の低減化のためにも閲覧者の為にも写真や絵の画像は次世代フォーマットに対応させた方が良さげ。で、次世代フォーマットは幾つかあるけど、現在はどれ...

nginxにおけるWebP画像の選択的レスポンスの設定方法 - Qiita

以前、Apache(.htaccessファイル)について書きました。.htaccessによるWebPの選択的レスポンスとその問題点と改善案今回はnginxについ...

次のファイルを開きます。

KUSANAGI8の場合、

/etc/nginx/conf.d/（プロファイル名）ssl.conf

KUSANAGI9の場合、

/etc/opt/kusanagi/nginx/conf.d/（プロファイル名）.conf

一番上に、次の記述をします。

map $http_accept $webp_suffix {
default "";
"~*webp" ".webp";
}

server{}の外に記述してください。

server{}内の「error_log（略）」と書かれた行と「 charset UTF-8;」と書かれた行の間に次の記述します。

 location ~* \.(png|jpe?g)$ {
# VaryヘッダとしてAcceptを返す
add_header Vary Accept;
# WebP対応ブラウザでは、image.jpg.web、image.jpgを探索
# 非対応のブラウザでは、image.jpg、image.jpgを探索
# いずれもない場合は404を返す
try_files $uri$webp_suffix $uri =404;
}

保存して、