webpへの読み替え・確認方法

.htaccessの記述

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{SCRIPT_FILENAME}.webp -f
    RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>

<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule>

確認方法

方法①

ぱっと見じゃ全然分からねぇので
コンソールでcontent-typeを確認します。
↓Networkタブ内に出力されてるレスポンスヘッダです。

方法②

Chromeのプラグイン
WebP Highlighter

これを使うと一目瞭然！...なのだが目がチカチカするので必要な時以外はDisableにしておくことをオススメする。