在css中爲較小的設備使用較小的圖像覆蓋`background-image`會節省帶寬或減少加載時間？

比方說，我這樣做：在css中爲較小的設備使用較小的圖像覆蓋`background-image`會節省帶寬或減少加載時間？

@media only screen and (min-width: 1366px) 
    .someBg { 
     background-image: url('someBg_BIG.jpg'); 
    } 
}

現在覆蓋這樣的背景圖像：

@media only screen and (max-width: 480px) 
    .someBg { 
     background-image: url('someBg_SMALL.jpg'); 
    } 
}

問題：對於低於480像素的設備 - 只該類將CSS的第一覆蓋然後負荷被覆蓋的圖像？或者它會先加載加載圖像，然後決定哪一個會有更多的優先級？

來源

2016-04-06 Roy

當您使用@media只有適當的圖像將被加載。如果分辨率超過768px（例如）只會加載一個圖像。如果分辨率小於768px，則只會加載一個圖像。但是，如果您調整從800px到500px的窗口大小，則將加載這兩個圖像。你可以在Chrome檢查器中檢查它。

img { 
 
    width: 400px; 
 
    content:url("http://mnprogressiveproject.com/wp-content/uploads/2014/02/kitten.jpg"); 
 
} 
 

 
@media screen and (max-width: 768px) { 
 
    img { 
 
    content:url("http://images6.fanpop.com/image/photos/34800000/Kittens-3-animals-34865509-1680-1050.jpg"); 
 
    } 
 
}

<img alt="">

來源

2016-04-06 09:52:33 3rdthemagical

檢查。確實非常好。如果這是一個基於解決方案的問題，我現在應該標記爲正確。由於這是更多的查詢，我會等待一個小時，然後再標記爲正確。 – Roy

您正在使用css @media僅用於根據屏幕大小更改樣式的查詢，它不影響任何要加載的內容。

所以這裏如果你使用這個CSS，那麼這兩個圖像將首先加載，然後根據屏幕大小顯示。

來源

2016-04-06 09:40:10

我理解CSS'@ media'查詢沒有做任何事情來加載圖像。瀏覽器呢。瀏覽器還編譯CSS並呈現頁面。那麼爲什麼不事先決定加載哪個圖像呢？ – Roy

因爲我們需要使用不同的方法，我們需要告訴瀏覽器總是我們想要瀏覽器做的事情，但是用這個'@ media'瀏覽器不知道我們需要這個加載的東西。 –

通過@ 3rdthemagical檢查答案。我也證實了。你可否確認？ – Roy

你可以試試這個

的CSS：

.somebg{ 
 
\t max-width: 1400px; 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 
.somebg img{ 
 
    width: 100%; 
 
}

和HTML： <div class="somebg"><img src="URL HERE"></div>

來源

2016-04-06 09:48:18

你在這裏不理解我的問題。我不需要解決方案。我有疑問，我正在尋求答案。不管怎麼說，還是要謝謝你。 – Roy

在css中爲較小的設備使用較小的圖像覆蓋`background-image`會節省帶寬或減少加載時間？

回答

相關問題