響應式圖像或不同的圖片

Question

我想知道哪一個是更好的方式來創建一個響應式網站引導。

1- Use img-responsive class for responsive images 
2- Use 5 different images for different @media 

Answer 1

除了小圖像，我會使用不同的圖像爲不同的分辨率。但不使用CSS中的媒體查詢 - 在HTML中有這樣做的draft of a standard。

這個東西沒有完全實現，但最近有一些進展（特別是在Chrome中）。但是，有一個JavaScript polyfill - 我已經取得了很好的經驗。

實施例：它可能看起來像這樣：

<picture> 
    <source media="(min-width: 1440px)" srcset="2000px.jpg 1x, 4000px.jpg 2x"> 
    <source media="(min-width: 500x)" srcset="1440px.jpg 1x"> 
    <source media="all" srcset="480px.jpg 1x"> 
    <img src="fallback.jpg" alt="alternative text"> 
</picture> 

的<源>標籤都有效按順序處理，和一個與所述第一匹配媒體查詢中使用。因此，這將：

1. 渲染上具有至少1440px的寬度和小於2×
2. 設備像素比渲染上視區圖像4000px.jpg用的寬度視口中圖像2000px.jpg至少1440px和具有至少2倍
3. 設備像素比渲染上是480像素和1439px之間寬（設備像素比並不重要）視口
4. 渲染在所有其他情況下480px.jpg，除了1440px.jpg：
5. I f瀏覽器不支持圖片標籤，則圖像fallback.jpg。

使用<圖片> -tag不是唯一的方式來做這樣的事情，有更多的可能性。見上面鏈接的標準草案。

Answer 2

這取決於。如果您使用大型圖像，則可能會更好地選擇不同的尺寸，因爲較小的尺寸更適合移動設備，尤其是移動數據連接。