WEBPイメージフォールバック

Question

私はインターネットで多くを検索しました&完全な専門家ができるウェブ上で適切な例や完全なチュートリアルを見つけることができません。だからみんな私に良い例を教えてください。

モダナイザーでの使用、ブラウザサポートの確認、背景イメージの使用など、WEBPコードをロットまたはウェブサイトで試してみました。

Answer 1

スタジオには、modernizrとfallbackイメージのWeb画像を使用した例がいくつかあります。これはあなたの問題をカバーするはずです。

/* Result pending */ 
.js .container { 
    background-image: none; 
} 
/* No JS/WebP not supported */ 
    .no-js .container, 
    .js.no-webp .container { 
    background-image: url('image.jpg'); 
} 
/* WebP supported */ 
    .js.webp .container { 
    background-image: url('image.webp'); 
} 

http://www.stucox.com/blog/using-webp-with-modernizr/