WebKit內核最新新增了對srcset屬性的支持（參考：https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/）,這是首個宣布支持srcset的瀏覽器引擎。

srcset屬性是由W3C旗下的響應式圖片社區（http://responsiveimages.org/）首先提出的，目的是旨在為使用不同分辨率的不同瀏覽器用戶提供適合其瀏覽環境的圖片大小的解決方案。

作為W3C響應式圖片社區的主席，我本人對此功能期待已經有很長的時間了。現在該屬性率先由Webkit內核宣布支持，這是個天大的好消息，而且對參與的各方――無論是用戶還是瀏覽器廠商來說都是很有利的。在本文中，我將簡單介紹關于srcset屬性。

<img src="low-res.jpg" srcset="high-res.jpg 2x"> 

srcset屬性的目的在于允許開發者為某個圖片的屬性指定一系列的來源，其中這些圖片的來源是要根據客戶顯示屏的像素分辨率而設定的，比如：

<img src="low-res.jpg" srcset="high-res.jpg 2x"> 

其中指出了使用圖片作為在低分辨率的顯示屏上顯示的默認圖片以及不能識別srcset屬性的瀏覽器中也會使用該圖片；而srcset中指定的圖片，則會在能識別srcset屬性的瀏覽器中同時是高分辨率屏幕中顯示。可以看到，其語法類似于蘋果對Retina-ready圖形卡的定義：開發人員只需提供一個備用的文件名(alternate filename)和倍數放大(resolution multiplier)，比如1x、2x或4x。"Resolution Multiplier"是用來衡量"多少個物理像素組成'一個'像素點的方法"，例如iPhone 5的屏幕分辨率為1136x640，但"顯示分辨率"為568x320。這意味著4個物理像素組成了一個"顯示像素"，或稱"4x multiplier"。

這樣其中的一個好處是，持有高分辨率顯示設備的用戶（典型的如蘋果設備的用戶）能很輕松得瀏覽那些能提供高質量圖片的網站，從而帶來很好的用戶體驗。與此同時，那些使用普通顯示分辨率的用戶也不會因為網絡帶寬等問題而懊惱瀏覽高分辨率圖片較多的網站，因為這些網站能提供適合他們觀看的圖片。

接下來，我們會有這樣的疑問，我們能否使用Javascript去實現這個屬性的功能？其實srcset屬性所做的事情并沒有太特別，它根據用戶的顯示分辨率從一系列的可供選擇的列表中選擇了某張圖片，然后替換原來src屬性所指定的。看上去這個步驟可以完全用Javascript去代替，但為什么要使用全新的屬性去實現呢？

實際上，我們嘗試對網站BostonGlobe.com進行響應式圖片設計的時候，采用過這樣的方法，這個網站也是我們較早采用“響應圖片”解決方案的網站之一。但由于目前幾個主要的瀏覽器對圖片具有越來越強大的預讀取功能(prefetch)，因為圖片被讀取之前，我們很難有機會去自定義腳本，最后我們為每一個圖片發起了兩個不同的請求。我將其中的一些過程記錄

在（http://alistapart.com/article/responsive-images-how-they-almost-worked-and-what-we-need），有興趣的讀者可以參考。

那么我們能用CSS去實現這個功能嗎？我們可以使用背景圖片并結合和像素有關media查詢語法去實現這個功能。由WebKit實現的srcset屬性和CSS　3中最新的image-set屬性有點像。image-set允許指定一系列的背景圖片和分辨率 并能讓瀏覽器去判斷哪一種是最適合用戶的。

使用CSS去按上面的方法去管理圖片在不同分辨率下的顯示的話，在一些簡單的比如示例性的頁面上是沒問題的，但如果一旦應用到生產環境的規模比較大的網站中去，是多少會出現性能上或者各種各樣的問題。

從開發人員的角度看，讓CMS網站去成大量的背景圖片并沒有特別的好處。然而，更糟糕的是，它會導致用戶每一次會請求很多并不需要的額外的樣式和圖片（當然除非你的CSS設計的十分仔細和謹慎）。除此之外，它使得我們的圖片丟失了語義，這在搜索的環境下顯得不是那么有利。

最接我們已經找到了一個基于CSS的方法，能通過基于HTML5中的數據屬性值的方法，更換掉圖片的來源，這其中使用了一些CSS的技巧（參考http://nicolasgallagher.com/responsive-images-using-css3/），但是要注意的是，其中大部分只是理論上的，可能在生產環境上會遇到各種問題，并且，它仍然沒有解決如腳本遇到的同樣問題：在下載高分辨率圖片的時候的多次請求問題。

接下來我們討論帶寬的問題。無論屏幕的分辨率如何，也有大量需要使用分辨率較低的圖像源的情況：比如Retina的MacBook Pro的連接到3G網絡環境，或不穩定的會議WiFi網絡。

除了能為用戶提供一種內嵌簡單的分辨率媒體查詢功能外，srcset屬性也在一定程度上考慮了帶寬。真正令人興奮的是，srcset是它定義為一組提供給瀏覽器的建議方案。然后，瀏覽器可以根據使用環境或用戶的喜好去決定，它到底是使用一個較低的分辨率的圖片還是使用高分辨率的圖片。
 

[[85637]]

實際上，我們是很傾向根據用戶顯示設備不同的分辨率去發送圖片的，因為這樣既節省了帶寬，也能加速圖片的下載。如果熟悉HTML 5的讀者可能會記得<picture>標簽，那么srcset標簽和這個picture標簽有什么異同呢？

由WebKit所實現的srcset的版本是和原來建議的srcset功能相匹配的，也跟響應式圖片社區一直致力的版本是相符的。我們可以認為這個srcset其實就是化身為針對分辨率的快速的媒體查詢方法，一個關鍵的區別在于瀏覽器可以選擇源根據用戶的喜好和選擇進行選擇。

雖然這已經是匹配原來srcset草案的建議，但當前srcset規范還正在試圖擴大語法涵蓋的范圍，其中有的部分跟<picture>標簽的功能是有重合的，如：

<img src="fallback.jpg" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x" alt="…"> 

象上面這種模式的語法在我們看來并不理想。我們限制一些和媒體查詢語法中如max-width、像素和高深莫測的一些用法，其目的是盡可能能重用媒體查詢語法的功能。幸運的是，web開發人員或者瀏覽器廠商都不是特別喜歡過度復雜的語法。

而<picture>標簽的存在其目的是為了能用更靈活的和熟悉的語法，去解決一些問題例。<picture>標簽在source元素中可以使用media屬性，和video標簽類似。這使我們能夠針對圖像源做一些組合：viewport的高度和寬度，以像素或ems為單位，使用min或max值，就和我們使用CSS　media查詢一樣。

<picture> 
    <source src="med.jpg" media="(min-width: 40em)" /> 
    <source src="sm.jpg" /> 
    <img src="fallback.jpg" alt="" /> 
</picture> 

要注意的是，我們是可以在<picture>標簽中使用srcset屬性的，例子如下：

<picture> 
    <source srcset="med.jpg 1x, med-hd.jpg 2x" media="(min-width: 40em)" />  
    <source srcset="sm.jpg 1x, sm-hd.jpg 2x" />  
    <img src="fallback.jpg" alt="" /> 
</picture> 

最后要注意的是，盡管Webkit在基于響應式圖片的解決方案中率先行動了，但我們也期望其他瀏覽器繼續跟上這個趨勢，同時在http://usecases.responsiveimages.org/上，列舉了在響應式圖片處理方案的最新研究趨勢。
 

原文鏈接：http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/