背景圖像臨時解決方案的圖像響應網頁設計？

Question

因此，我意識到當前響應式網頁設計中的一個重大問題是，您可能不需要下載大型圖像，例如在手機上 - 導致嚴重的性能下降 - 您還可以通過有條件加載JS;所以我的問題是我無法將大部分圖像作爲背景圖像加載到媒體查詢中並解決此問題，直到出現更好的效果。例如：

/* base styles */ 
@media all and (min-width: 53.75em) { 
header .inner{ 
background: url(‘../images/football_bg.png’) bottom right 
no-repeat; 
} 

顯然這是完全沒有語義的，但可以解決性能問題嗎？

Answer 1

是的，使用媒體查詢和背景圖像就像一個魅力，所以如果它非常適合您的項目，那麼一定要使用它。

雖然使用背景圖像並不總是可能的。

如果是這種情況，則可以選擇Adaptive Images，這將根據訪問者的視口提供不同大小的圖像。很容易就可以對現有網站進行改造，並檢查它是否適合您。

如果使用Foundation另一種可能是，他們剛剛發佈了類似的東西，看起來真的很有趣：Interchange

祝你好運！

Answer 2

如果你真的關心語義，你可以考慮使用自適應圖像：http://adaptive-images.com/ 另外這裏是關於圖像和響應式設計解決方案的好文章。 http://css-tricks.com/which-responsive-images-solution-should-you-use/