Webpをさくっと導入できないか思案。
取りあえず対応しているのはBlinkブラウザのみだが、モバイル対応へ重きを置くならば価値はありそう。
Webpの概要と導入の際の未サポートブラウザへのフォールバック方法を解説。
記事内でも言及があるサーバーサイドでの実装が一番よさそうではある。
しかしサクっとはできなさそうなので、フロントで実装したい。
とりあえず上記を参考にで試してみた。
これは容易でとてもいい方法だと感じた。
しかし今回はbackground-imageへのwebp導入を考えているので残念ながらこの方法は不可である。
色々調べると‘@supports‘を利用した方法を発見。
@supportsで機能が利用できるか確認し、分岐する手法が紹介されている。
筆者は最終的にModernizrを使用したようだが(そりゃそうだよな…)、今回このためにModernizr入れるのは本末転倒である。
@supports面白そうだしカジュアルなのでコレを採用。
1background-image: url("../img/bg.png"); 2@supports (background-image: -webkit-image-set(url("../img/bg.webp") 1x)) { 3 background-image: -webkit-image-set(url("../img/bg.webp") 1x) 4}
CSS4で提案されているimage-listはかなりよさそうである。
background-image: images("../img/bg.webp", "../img/bg.png");
ただ現時点では対応しているブラウザはない様子。
現時点ではimage-setが一番よさそう。