在響應式設計網站中使用不同尺寸背景圖像的最有效方法是什麼？

Question

我正在構建一個響應式網站。這個網站需要很多背景圖片（矢量和柵格格式）。

我想優化網站的加載速度，但不會降低圖片質量。

我的理解是，我應該爲同一張照片有不同的版本，以便小窗口設備用戶自動下載正確的最小文件大小。

我的問題是：處理這個問題的最好方法是什麼？我需要使用媒體查詢嗎？如何使用它們，以便不同的瀏覽器實際上不下載不必要的數據？

Answer 1

好吧，這裏的另一篇帖子討論瞭如果瀏覽器下載了未使用的css圖像url('');，即使沒有元素與規則匹配。它已經過測試並確定，在所有主流瀏覽器上，圖像不會被下載，除非某個元素實際上與選擇器匹配。

帖子：Are unused CSS images downloaded?

這意味着，如果定義媒體查詢你的風格，裏面只有符合特定的視口將下載的規則圖像。

在以下示例中，如果您使用的設備寬度不超過480像素，請不要擔心，因爲large.jpg不會被下載。

@media (max-width: 480px) { 
    #myDiv { 
     background-image: url('small.jpg'); 
    } 
} 

@media (min-width: 481px) { 
    #myDiv { 
     background-image: url('large.jpg'); 
    } 
} 

只是提醒的是，這是留給了瀏覽器的行爲，這樣他們就可以隨時他們想改變。