WebP画像と従来画像を振り分ける.htaccessとpictureタグ

前回、JPGやPNGなどの従来画像をWebPに変換してリネームする方法を記事にしました。
本記事はWebPの実際の活用で、WebPに対応していないブラウザを考慮して出し分けたり、記事の画像関連の記述変更が煩わしい場合に.htaccessの記述で従来画像とWebPを出し分ける方法をまとめます。

pictureタグでWebPと従来画像を出しわける
.htaccessでWebPと従来画像を対応ブラウザとWebP有無で出し分ける

pictureタグでWebPと従来画像を出しわける

WebP非対応ブラウザへの対応のみなら、pictureタグが簡単です。WebPに対応したブラウザの場合はWebPを表示させ、WebP非対応ブラウザではJPGやPNGなどの従来画像を表示します。
ただし、WebPファイルが無い場合に従来画像を表示させることは出来ないようです。あくまでブラウザ対応のみです。また、記事の記述の変更が必要ですので、大量の変更がある場合は不向きかもしれません。

HTML

<picture>
  <source srcset="./images/img.jpg.webp" type="image/webp">
  <img src="./images/img.jpg">
</picture>

<picture>タグの中に<source>タグと<img>タグを記述します。
<source>タグにWebP画像のパスとtype属性を記述し、<img>タグにはWebP非対応の場合の代替画像（JPGなど）のパスを入れます。

<source>タグのtype属性を必ず記述します。
<picture>タグ内では、上から順番に要素の表示可否を判断しますので、<source>タグを<img>タグより上に記述します。

.htaccessでWebPと従来画像を対応ブラウザとWebP有無で出し分ける

WebP対応ブラウザであればリクエストヘッダーのAcceptにimage/webpを含んでいることを利用して出し分けます。
WebサーバーがApacheサーバーであれば .htaccess が使えますので、FileZillaなどのFTPツールで、画像ファイルと同じディレクトリか、より上層のディレクトリの .htaccess をダウンロードするなどして、下記を追記してアップロードします。.htaccess が無い場合は新たに作って置きます。WordPressであれば、WordPressインストールディレクトリと同じ階層の .htaccess に追記するのが良いと思います。
なお、.htaccess の記述は最後に必ず1行以上の改行を入れます。

### WebP対応ブラウザかつWebPファイルがあればWebPファイルを返す ###
# Rewriteモジュールを有効化(On)
RewriteEngine On

# WebP対応ブラウザはリクエストヘッダーのAcceptにimage/webpを含むので、
# その場合のみ後続のRewriteRuleを適用する
RewriteCond %{HTTP_ACCEPT} image/webp

# 対応するWebPファイル（元ファイルの拡張子含めたファイル名に.webpが付加されたもの）が
# ある場合のみ後続のRewriteRuleを適用する
RewriteCond %{SCRIPT_FILENAME}.webp -f

# *.jpg *.png *.gifファイルを*.webpファイル（元ファイル名.webp）に書き換え、
# Content-Typeはimage/webpにする
RewriteRule .(jpe?g|png|gif)$ %{SCRIPT_FILENAME}.webp [T=image/webp]

# 拡張子.webpファイルへの直接アクセスにはContent-Typeとしてimage/webpを返す
AddType image/webp .webp

# WebPファイルがあるかもしれない画像へのリクエストは全てVary: Acceptレスポンスヘッダを返す(CDN対策)
# Headerディレクティブ単独ではできないのでSetEnvIfディレクティブとの組み合わせで実現する
SetEnvIf Request_URI "\.(jpe?g|png|gif)$" _image_request
Header append Vary Accept env=_image_request

上記は<IfModule>ディレクティブを省略しています。省略しない場合は下記のようになります。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{SCRIPT_FILENAME}.webp -f
  RewriteRule .(jpe?g|png|gif)$ %{SCRIPT_FILENAME}.webp [T=image/webp]
</IfModule>
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>
<IfModule mod_setenvif.c>
  SetEnvIf Request_URI "\.(jpe?g|png|gif)$" _image_request
</IfModule>
<IfModule mod_headers.c>
  Header append Vary Accept env=_image_request
</IfModule>

以下の記事を参考にさせていただきました。

WebPと従来の画像を正しく振り分ける.htaccessファイル | アイデアマンズブログ

ページまるごとWebP変換・効果測定と一括ダウンロードがWeb担当者Forumで...

.htaccessで出し分ければ、WordPressのインストールディレクトリ配下でなくても出し分けることが出来ます。例えば、ルートディレクトリ直下にWordPressディレクトリがあっても、同じ階層のルートディレクトリ直下に画像フォルダを置いて出し分けることが出来ます。
ルートディレクトリ直下にメディアのアップロード先を置く方法は下記ページをご参考下さい。