2016-05-19 8 views
2

html <img>タグの「srcset」と同様に、「image-set」というCSS背景画像プロパティがあります。CSSイメージセット/背景イメージ。 img srcsetの代わりに?誰もこれを使うのですか?

W3C情報:https://drafts.csswg.org/css-images-3/#funcdef-image-set

それはクロム、サファリ、オペラ、およびAndroidのブラウザで現在対応しています。 FireFoxまたはIE/Edgeブラウザと現在互換性がありません。それはMicrosoftのEdgeブラウザの開発にもあるようだ。それだけ網膜画面対正常のための一般的な(x)の解像度、DPIを受け入れるように見える

cloudfour.com/examples/image-set/:ここhttp://caniuse.com/#feat=css-image-set

は、実装/試験の一例です。

<image-set-option> = [ <image> | <string> ] <resolution> 

background-image: image-set("foo.png" 1x, 
          "foo-2x.png" 2x, 
          "foo-print.png" 600dpi); 

これ以上の文書はありません。

私の質問されては、以下のとおりです。

誰もがこれを使用していますか?

これは、ページの読み込み速度を最適化するために使用できます(320px幅、640px幅、1024px幅などの画面幅に基づいた異なるバージョンなど)。

(私はこれをしてください言及していない、@media画面と(最大幅)について知っている。)

答えて

0

これはそれが縮小するのではなく、必要とするイメージを使用するブラウザなどの画像最適化の一部であります大きな画像ひいてはより低い解像度の画像を最大限に..

使用picturefillをロードするために、サイズが小さいので、高速になりますので、ページの読み込みが改善されます...それは素晴らしいリソースです...

+0

Dhaval、あなたが使用しています前に "イメージセット"?あなたはpicturefillと言って何を意味していますか?このhttps://scottjehl.github.io/picturefill/画像要素のjavascriptライブラリですか? –

+0

はい私はscottjehl.github.io/picturefillを同じものに使用したレスポンシブな画像を使用しています –