FirefoxやIE/EdgeでChromeと.jpgの.webpを表示するにはどうすればいいですか？

Question

Chromeで.webp形式のファイルを表示し、FirefoxとIE/Edgeで異なる.jpg形式のファイルを表示する実例はありますか？

Iユーザー今このCSSコード：

#bgbox { 
    background-imgage: url('../img/bg.webp'); 
} 

は、このような-moz-background-imageか何かありますか？

Answer 1

最も簡単な方法は、<picture>要素を使用し、jpgフォールバックでwebpソースを設定することです。複数のソースを持つことができ、ブラウザーは最初の互換性のあるものをロードしようとします。何も動作しない場合はフォールバックを使用します。

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

背景を設定する必要がある場合は、別の方法が必要です。 Modernizrを使用して、ブラウザがwebpをサポートしているかどうかを検出し、それに基づいて異なるスタイルを適用できます。

.image { 
 
    background-size: cover; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.no-webp .image { 
 
    background-image: url('https://www.gstatic.com/webp/gallery/4.jpg'); 
 
} 
 

 
.webp .image { 
 
    background-image: url('http://www.gstatic.com/webp/gallery/4.webp'); 
 
}

<script src="https://cdn.jsdelivr.net/modernizr/3.3.1/modernizr.min.js"></script> 
 
<div class="image"></div>