画像の最適化のためにwebpが使える環境ではpngやjpgではなくwebpを使うようにしたいです。通常の画像の場合はpictureタグで出し分ければ良いと思いますが、背景画像(background-image)の場合はmodernizrを使って最適化をしようと考えています。
そこで、以下のような手順でmodernizrを導入したのですが効いておらず困っています
- modernizrのAdd your detects > Webp > Build > Build Downloadsでjsファイル(
modernizr.custom.js)をダウンロード - index.htmlのbodyタグラストに
<script src="./modernizr.custom.js"></script> - 構成
- index.html - modernizr-custom.js - index.css
として再起動するとhtmlタグに自動でクラスが付与される(webpが使える環境には.webpクラス、使えない環境では.no-webpのような)と色んなサイトに記載されているのですが、何かしらの設定が足りていないのか以下のようになるだけでクラスが付与されません(modernizrを入れていない場合はclass=" "の記述はないので、何かしら効いていそうではあるのですが...)

もし解決方法をご存知でしたら教えていただきたいです
回答1件
あなたの回答
tips
プレビュー