自分用の覚書です。
ずっとやろうやろうと思って先延ばしていたWEB画像の最適化の一つのwebp化。
Google先生からも推奨されているし、導入しているサイトも多くなってきているので、今更ながら時代について行こうと思います。
WordPressにプラグインなしでwebp画像を導入してみた時の手順3つを紹介します。
【注意】画像はWordpressのメディアへはアップせず、FTPで直接サーバにアップし参照するサイト構成に有効です。
１．.htaccessにwebpの読み込み方法追記
WordPressドキュメントルートの.htaccessファイルの最後に以下追記
#webp対応
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(jpe?g|png)$">
Header append Vary Accept
</FilesMatch>
</IfModule>
AddType image/webp .webp【意味】jpg / jpeg / png 画像のURLに対して、.webpの画像ファイルがあれば優先的にそっちを読み込む。
よって、アップロード先のフォルダには元の画像とwebpの拡張子がついた画像を用意しておく必要があります。
また、aaa.jpg に対して用意するwebpのファイル名はaaa.jpg.webpというフォーマットになります。aaa.webpでは読み込んでもらえません。
２．画像ファイルのwebp化（Squoosh & コマンドライン）
オンラインツールなどで一括にwebp化もいいと思います。が、私の場合は一括コマンドラインが楽なのでそちらの手順を紹介。
参考：https://liginc.co.jp/586028
2-3. コマンドラインでコピーしたスクリプトを実行
$ npm i -g @squoosh/cli
$ cd GoToTargetDirectory/
$ npx @squoosh/cli --webp '{"quality":60,"target_size":0,"target_PSNR":0,"method":4,"sns_strength":50,"filter_strength":60,"filter_sharpness":0,"filter_type":1,"partitions":0,"segments":4,"pass":1,"show_compressed":0,"preprocessing":0,"autofilter":0,"partition_limit":0,"alpha_compression":1,"alpha_filtering":1,"alpha_quality":100,"lossless":0,"exact":0,"image_hint":0,"emulate_jpeg_size":0,"thread_level":0,"low_memory":0,"near_lossless":100,"use_delta_palette":0,"use_sharp_yuv":0}' *.jpeg *.jpg *.png 1行目：squooshのコマンドラインツールをダウンロードします。
2行目：webp化したい画像が格納されているフォルダに移動
3行目：Squooshのサイトで調整しコピーしたコードを実行 最後の引数はすべてのpng / jpeg /jpg画像を一括webp化しています。
3. ファイル名を修正
面倒なのですが、一つずつwebp化した画像の.webp拡張子前に元画像の拡張子を追加
（一括ファイルリネームツールなど適宜利用してください。）
aaa.png をwebp化しaaa.webpが生成されたら、そのwebp画像をaaa.png.webpとリネームする。ということです。
これをしないとサーバ側で読み込まれません。（1.での.htaccessの追記参照）
以上です。
これでサーバ側へ元画像があるフォルダにwebp化した画像をFTPでアップしておわり！
特にリンク先を再修正する必要がないので楽ですね。
では！