画像.webp対応ブラウザと未対応ブラウザで振り分ける

■htacess
# WebP対応ブラウザかつWebPファイルがあればWebPファイルを返す設定

# Rewriteモジュールを有効にする
RewriteEngine On

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

# 対応するWebP版のファイルがある場合のみ後続のRewriteRuleを適用する
RewriteCond %{SCRIPT_FILENAME}.webp -f

# *.jpg、*.png、*.gifファイルを*.webpファイルに内部的にルーティングする(ルーティング先は$0.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

https://blog.ideamans.com/2019/02/webphtaccess.html

■タグで振り分け

<picture>
<source srcset=”xxx.webp” type=”image/webp”>
<img src=”xxx.jpg”>
</picture>

■css背景は個別に設定

１．ModernizrJAを読み込む
２．CSS書き換え

.no-webp .aaa {
background-image: url(“image.jpg”);
}
.webp .aaa {
background-image: url(“image.webp”);
}