2016-03-29 14 views
0

私はこのウェブサイトを持っています。 Stellar.jsを使用しています。そのため、私は背景画像をたくさん持っています。彼らは大画面表示のために大きくなければならない。だから彼らは素敵に滞在します。どのようにモバイルでそれは多分多分3Gで特にダウンロードすることです。背景画像のパフォーマンスが向上

私は、背景画像とは異なる画像ソースを持つメディアクエリを使用する方が良い方法はないのだろうかと思っていました。プラグインなどのようなもの?何か案は?本当に68をさまざまな形式でスケールしたくない。

答えて

3

CSS /背景画像の場合CSSのimage-setプロパティを見ましたか?これは、htmlのimg要素srcsetに相当するCSSです。欠点はブラウザの互換性です(ただし、携帯電話の場合はhttp://caniuse.com/#feat=css-image-set)。拡張された構文がまだこれらのブラウザに追加されているかどうか。

使用例:あなたはあなたのHTML srcset自体に実際img要素を使用することができる場合

background-image: -webkit-image-set(url('my-img-1x.jpg') 1x, url('my-img-2x.jpg') 2x); 

はしかし、今で異なる画面サイズのブレークポイントhttp://caniuse.com/#search=srcset

で画像を変更できるように、かなり良いブラウザのサポートと拡張構文を持っています

srcset使用例:

<img src="my-img-1x.jpg" srcset="my-img-1x.jpg 1x, my-img-2x.jpg 2x, my-img-wide.jpg 1920w" /> 

が前方探しています要素もブラウザのサポートを得るようになっていますが、おそらく現在は主流の導入から少し離れています。