【CSS3】BackgroundプロパティでWebPを使う方法

WebP対応の注意点 WebPを使ううえでの注意点が2つありますので、確認してみましょう！ 対応ブラウザの確認 まずWebPに対応させる場合の注意点として、WebPに対応しているブラウザでは、.webp の画像が吐き出され、対応していないブラウザの場合 .png など一般的な画像が書き出されるようにする必要があります。 ダウンロードしても開けない WebPはダウンロードしても画像として保存されません。 その為、ユーザーにダウンロードさせることを目的とした画像の場合に限っては、WebP以外の形式にしてあげるといいでしょう！ backgroundでWebP使う場合 CSSでは分岐という概念がなく、pictureタグも使用できないため、jsプラグイン「Modernizr」を使用。 インストール方法、CSSの記述方法については以下をご確認ください。 プラグインインストール方法 1.Add your