更好的背景圖片性能

Question

我有這個網站。其中使用Stellar.js。因此，我有很多背景圖片。他們必須大屏幕顯示。所以他們保持不錯。特別是在3G上，下載移動版可能有點多。

我想知道是否沒有更好的方法，然後使用媒體查詢與不同的圖像源作爲背景圖像。比如插件什麼的？有任何想法嗎？真的不想以不同的格式來擴展所有的68。

Answer 1

對於css/background-image您是否看過css中的image-set屬性？這是與html img元素srcset等效的CSS。缺點可能是瀏覽器兼容性（但對於移動設備，您應該覆蓋http://caniuse.com/#feat=css-image-set）以及擴展語法是否已添加到這些瀏覽器。

用法示例：

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

但是，如果你可以在你的HTML srcset本身使用實際img元素現在有相當不錯的瀏覽器的支持，並擴大語法允許在不同的屏幕尺寸變更圖像斷點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" /> 

嚮往<picture>元素也開始獲得瀏覽器支持，但可能距離現在使用的主流採用有點遠。