現在上網設備越來越多，各種設備的屏幕千差萬別，如果只用一張圖片去涵蓋所有的設備，一是可能會造成某些設備上顯示效果不佳，比如使用了一張低清晰度的圖，而網頁運行在一個高清大屏里；二是可能會浪費帶寬，比如使用了一張超大圖，而網頁運行在小屏幕手機里。在很多情況下我們希望瀏覽器能根據具體的運行環境去選擇最合適的圖片來加載，這便是響應式圖片。

一睹為快，可以克隆示例項目到本地運行查看

基于設備像素比（DPR）加載圖片

設備像素比是指物理像素和邏輯像素（或CSS像素、設備獨立像素）之間的比率，比如三個物理像素對應一個邏輯像素，那么設備像素比就是3：1。

不同的設備有不同的設備像素比。比如IPhone 6的DPR是2.0，Galaxy S5的DPR是3.0。設備像素比越高，顯示效果就越高清，相應的對圖片的分辨率要求也就更高。因此就出現了一個需求：希望高DPR的設備下載高清圖，這樣就不會出現模糊，低DPR的設備下載低清圖，這樣更節省帶寬。

<img>標簽的srcset屬性并使用x描述符可以實現這個功能：

<img src="pic.jpg" srcset="pic-hd.jpg 2x,pic-sd.jpg 3x">

上面的代碼可以根據DPR的值來加載圖片，pic-hd.jpg 2x表示當DPR=2，加載pic-hd.jpg，以此類推。

基于視口寬度加載圖片

視口（viewport）就是瀏覽器窗口，在不同設備下，視口大小往往不同。這樣就有一個問題，一張圖片可能在大屏上顯示正常，而在小屏幕上很能只顯示到一塊很小的區域里面，所以在小屏幕里面根本沒必要加載這么大尺寸的圖。

<img>標簽的srcset屬性并使用w描述符，再結合sizes屬性就可以實現根據視口的寬度進行加載圖片：

<img src="pic-small.jpg" srcset="pic-small.jpg 200w,pic-medium.jpg 300w,pic-large.jpg 400w" sizes="(min-width: 800px) 400px,(min-width: 500px) 270px,100px" >

上面的代碼可以根據視口的寬度來加載圖片，pic-small.jpg 200w表示圖像的寬度為200px，w是圖像寬度描述符，你可以當成是px來看。sizes屬性表示的是圖片顯示區域的預期尺寸，(min-width: 800px) 400px 表示當視口大于800px時，圖片顯示區域的預期寬度是400px。

當瀏覽器打開網頁時，它會根據屏幕大小算出圖片顯示區域的預期大小（通過sizes屬性里的媒體查詢），然后再根據圖片顯示區域的預期寬度選擇合適圖片進行加載。

其實這里影響瀏覽器選擇的因素不止圖片顯示區域寬度一個，網絡、DPR都會影響瀏覽器選擇。所以，不用去猜瀏覽器會怎么選擇，你只要在srcset中提供不同尺寸的圖片，在sizes中提供不同視口下的圖片顯示區域大小的信息，剩下的事就不要管了，具體圖片的選擇，就交給瀏覽器去做吧。

注意：媒體查詢條件最好從大到小按順序寫，如上面例子中，按800px>500px>0這樣的順序寫，否則一些瀏覽器會忽略中間的媒體查詢。

基于藝術設計加載圖片

有時候我們希望根據視口的大小顯示不同的圖片，比如，在小屏幕中只顯示主體部分的圖片，而在大屏幕中，則可以顯示其它沒那么緊要的部分。

使用<picture>標簽加<source>標簽可以實現這個功能：

<picture><source media="(min-width:800px)" srcset="pic-large.jpg"><source media="(min-width:500px)" srcset="pic-medium.jpg"><img src="pic-small.jpg"> </picture>

看起來和”基于視口寬度加載圖片”的形式很像，不過這里瀏覽器會嚴格按照媒體查詢的執行結果來選擇加載哪個圖片，不考慮網絡、DPR等因素。

基于瀏覽器對圖片格式的支持情況加載圖片

不同的圖片格式具有不同的特點，比如webp格式，具有很高的壓縮比，但是瀏覽器支持情況還不太好，所以我們希望能夠基于瀏覽器對圖片格式的支持情況來選擇加載合適的圖片。

使用帶有type屬性的<source>標簽可以實現這個功能：

<picture><source srcset="hello.webp" type="image/webp"><source srcset="hello.jxr" type="image/vnd.ms-photo"><img src="hello.jpg" alt="" width="100" height="150"> </picture>

瀏覽器會從一個帶有type屬性的<source>標簽開始檢查，如果瀏覽器支持webp格式，就加載webp格式圖片，否則檢查瀏覽器是否支持jxr格式，如果支持，就使用jxr格式，否則，使用默認的jpg格式。

參考鏈接

HTML5標準文檔之嵌入內容 文章的主要內容參考至這里

img srcset attribute 結合標準文檔綜合看

MDN img docs

總結

以上是生活随笔為你收集整理的HTML5 响应式图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。