介紹

在整個(gè)網(wǎng)站的開(kāi)發(fā)中，在管理圖片上較為困難。注意，圖片要在各種設(shè)備上平滑過(guò)渡顯示，它們將會(huì)碰到的問(wèn)題有：

適當(dāng)?shù)膬?yōu)化和減少圖片的體積

注意不要浪費(fèi)帶寬（網(wǎng)站的成敗與否加載速度是其中主要因素之一）

設(shè)備使用相應(yīng)的解決方案

對(duì)于第一個(gè)問(wèn)題，使用TinyPng和JPEGmini工具可以幫助減少圖片的體積和優(yōu)化圖片。

對(duì)于第二個(gè)問(wèn)題，在一些場(chǎng)合下我們可能要使用到強(qiáng)大的媒體查詢(xún)。多虧了有他們，我們可以很簡(jiǎn)單的處理背景圖片的問(wèn)題。但是，有些地方使用的是img來(lái)顯示圖片，這也是我們要解決的第三個(gè)問(wèn)題，也是最后一個(gè)問(wèn)題，如何根據(jù)設(shè)備的分辨率調(diào)用合適的圖像。

在這種情況之下，有個(gè)兩個(gè)解決方案：使用<picture>元素和<img>元素的srcset屬性。

在這篇文章中，我會(huì)向大家總體的介紹srcset屬性。

srcset屬性

使用這個(gè)屬性主要有什么好處呢？好處就是Web開(kāi)發(fā)人員可以給使用高分辨率的用戶(hù)顯示高分辨的圖像源，給其他設(shè)備分辨率的用戶(hù)使用其他的圖像源。在第一種情況下使用低PDD(pixel density displays)不需要背負(fù)著下載無(wú)用的高分辨率圖像，而擔(dān)心浪費(fèi)帶寬；而后者可以享受高清設(shè)備帶來(lái)的不一樣的享受。在第二種情況中，我們可以根據(jù)不同的屏幕尺寸指定不同的圖像，這主要是根據(jù)用戶(hù)的設(shè)備來(lái)提供一個(gè)較好的圖像源。

事實(shí)上，srcset屬性就做了這樣的事情，根據(jù)像素密度或用戶(hù)使用的屏幕尺寸大小，指定一個(gè)圖像源。所以說(shuō)，srcset屬性可以讓瀏覽器提供一套"建議"，讓瀏覽器根據(jù)正確的行為匹配正確的圖像。通過(guò)這樣做，我們提高了Web的質(zhì)量，同時(shí)提高了Web頁(yè)面的加載速度和給用戶(hù)一個(gè)較好的體驗(yàn)。

在這一點(diǎn)上，這個(gè)屬性的基本特征就是：根據(jù)指定的條件來(lái)做選擇，使其工作。這對(duì)于我們編碼工作和實(shí)現(xiàn)的方法變理更為簡(jiǎn)易。

W3C規(guī)范是這樣描述srcset:srcset屬性允許作者根據(jù)不同分辨率或不同的視窗尺寸提多個(gè)不同分辨圖像。用戶(hù)代理會(huì)根據(jù)之前獲取的任何資源做選擇，從而避免多個(gè)資源加載浪費(fèi)帶寬和相關(guān)性能問(wèn)題。

說(shuō)起圖片的srcset屬性，估計(jì)有不少與時(shí)俱進(jìn)的小伙伴會(huì)在心中不由自主念想道：“這個(gè)我知道的，可以根據(jù)屏幕密度現(xiàn)實(shí)對(duì)應(yīng)尺寸圖片，例如……”

<img src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 1x, mm-width-256px 2x">

上面代碼對(duì)應(yīng)demo輕戳這里。當(dāng)然，我們也可以簡(jiǎn)寫(xiě)成：

<img src="mm-width-128px.jpg" srcset="mm-width-256px 2x">

由于我們都不是“別人家”的公司，因此，我們的辦公PC顯示器默認(rèn)設(shè)備像素比都是1，因此，這些顯示器呈現(xiàn)的圖片默認(rèn)都是128像素寬度的。下面問(wèn)題來(lái)了，（不是挖掘機(jī)哪家強(qiáng)），如何讓屌絲顯示器模擬高設(shè)備像素比呢？

方法一：

Chrome瀏覽器，切換設(shè)備模式，如下截圖

不同的2x顯示策略

還有些時(shí)候，使用同尺寸的高清圖片作為2x對(duì)應(yīng)圖片，雖然兩者圖片大小差不多，但個(gè)人覺(jué)得還是2倍尺寸優(yōu)化大圖更好一點(diǎn)，為什么呢？

srcset當(dāng)初設(shè)計(jì)的用意是為了高密度屏幕上圖片更好的顯示，如果世界上就只有“不同設(shè)備密度”這一個(gè)戲劇沖突的話，2x圖片是高清圖還是2倍尺寸圖其實(shí)都無(wú)傷大雅。然而，事實(shí)上，生活無(wú)處不戲劇，現(xiàn)代web布局中，有種布局不可忽略，那就是「響應(yīng)式布局」，劇本往往會(huì)這樣，PC瀏覽器上顯示大圖，Mobile瀏覽器上顯示小圖。發(fā)現(xiàn)沒(méi)，同樣是“大小圖的要求”，和設(shè)備像素比有類(lèi)似的戲劇沖突。

于是，如果我們2x圖片使用的是高清圖，結(jié)合響應(yīng)式布局，我們可能需要4張圖片資源，即：小圖、小圖高清和大圖、大圖高清。但是，2x圖片走的是2倍尺寸圖片，我們只需要3張圖片資源，即：小圖、中圖以及中圖、大圖。

在老一代srcset規(guī)范成型過(guò)程中，其實(shí)已經(jīng)考慮到與響應(yīng)式布局的糾葛，出現(xiàn)了w描述符，例如，走高清路線的：

更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄