WebKit最新特性srcset簡介(轉)

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

 

 

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是它定義爲一組提供給瀏覽器的建議方案。而後，瀏覽器能夠根據使用環境或用戶的喜愛去決定，它究竟是使用一個較低的分辨率的圖片仍是使用高分辨率的圖片。
 

實際上，咱們是很傾向根據用戶顯示設備不一樣的分辨率去發送圖片的，由於這樣既節省了帶寬，也能加速圖片的下載。若是熟悉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/