高速配信を可能にする、次世代画像フォーマットであるWebP。PageSpeed Insightでも「次世代フォーマットを利用してください」と警告がなされるようになり、サイトの高速表示にはなるべく利用したい画像形式です。
ShortPixelプラグインで一括WebP化!画像圧縮でWordPressを高速に
今回、「さくらVPS上で運営されているKUSANAGiで、WordPressプラグイン”ShortPixel”を利用しWebP配信を実装したい」とのご相談を受けたのですが、KUSANAGIとShortPixelとの相性が悪く、うまくWebP表示させられなかったり、画像が非表示になってしまったりとの不具合に陥りまいした。
結果、KUSANAGI上でShortPixelを利用したWebP配信は困難と判断しました。途中で調べたリンク等を下記、ご共有します。
- KUSANAGIではShortPixelプラグインによるWebP化が難しい
- ShortPixel公式の方法。コピペできるコードが掲載
- NginxでWebPを出し分けるそもそもの表示方法について解説記事
- ほか参考
- WebP化の代替策としてEWWWプラグイン利用かCloudFlare等のCDN側処理を推奨
- EWWWプラグインでJavaScriptによる制御で表示
- CloudFlare等、CDN側でWebP化を処理させる
KUSANAGIではShortPixelプラグインによるWebP化が難しい
どうもNginxでのディレクティブによるwebpとその他画像の出し分けと、KUSANAGIの機能が競合していそう。
自分では解決できず。以下、検証のために参考にした情報を掲載しておきます。
試した環境はさくらVPS・KUSANAGI・Nginx・PHP7.4です。
ShortPixel公式の方法。コピペできるコードが掲載
Configure NGINX to transparently serve WebP files when supported - ShortPixel Knowledge Base
↓ nginx.confファイルのインクルード説明など、わかりやすかった記事。
How to Setup ShortPixel to Serve WebP Images on Nginx | GridPane
NginxでWebPを出し分けるそもそもの表示方法について解説記事
Recipe: serve WebP with nginx conditionally · uhop/grunt-tight-sprite Wiki · GitHub
nginxにおけるWebP画像の選択的レスポンスの設定方法 - Qiita
なお、WebP出し分けのlocationについて
他の location ディレクティブよりも上位に記述する。 画像ファイルに対するブラウザキャッシュの設定などよりも後に記述すると、想定通りの動作をしない。
nginx-WordPress WebP 画像の配信 - アラコキからの Raspberry Pi 電子工作
ほか参考
KUSANAGIでもWebp導入!Nginx環境でEWWW Image Optimizerを動かそう! | L'7 Records
WordPressでwebp(ウェッピー)画像を使う方法(Apache、Nginx対応:WordPress高速化チューニング)
WebP化の代替策としてEWWWプラグイン利用かCloudFlare等のCDN側処理を推奨
EWWWプラグインでJavaScriptによる制御で表示
EWWWだとJavaScriptによる切り分けによって動作する場合があるかも
cloudflare使うとiOSで画像が消える!?原因はwebpの設定方法だった件
Reverse Proxy 配下の WordPress で、WebP 配信がされていないことに気付く。 「WebP の配信方法」の「JS WebP リライト」にチェックを入れると解決する。
nginx-WordPress WebP 画像の配信 - アラコキからの Raspberry Pi 電子工作
CloudFlare等、CDN側でWebP化を処理させる
CDNによっては、CDN側の機能で画像のWebP化が可能です。
Cloudflareでは “Cloudflare Polish” という機能を利用することでWebP形式での配信が可能になります。
こちらの記事にも詳細あり。