WebKit的已實施srcset圖像響應屬性

WebKit已經發布了一些官方新聞，終於落實srcset的屬性。做爲W3C的響應圖像社區組的主席，我一直但願這一刻到來有一段時間了。因此，對全部參與方是個好消息，用戶瀏覽網頁時的體驗是最重要的。

全部事項有關的到「有求必應圖像」：它是複雜的，它可能很難跟上全部的噪音信號。下面是你須要知道什麼。

它有什麼做用呢?

正如最初提議，容許開發人員指定的圖像屬性，根據用戶的顯示屏上的像素密度來設置srcset屬性組合：

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

這標記太嚇人了，在純英文：

「使用low-res.jpg，這IMG做爲源低分辨率顯示器上，任何瀏覽器不明白的srcset屬性。使用high-res.jpg的做爲源這個IMG瞭解的srcset屬性的瀏覽器上的高分辨率顯示。「

事情開始看起來很嚇人，有一小會兒。部分因爲高分辨率設備的平均網站如今幾乎整個兆字節的圖像。如今，開發人員能夠針對用戶對高分辨率顯示器具備高分辨率的圖像源。同時，較低的像素密度顯示屏上的用戶不會揹負下載一個巨大的高清晰度圖像的帶寬成本，沒有看到任何好處。

使用JavaScript咱們能不能作到這一點?

表面上，srcset的是否是作什麼特別的東西，它選擇一個合適的源屬性和交換內容IMG標籤的SRC。交換的內容屬性，是自遠古以來，咱們一直在作的JavaScript。90年代以來，不管如何。因此，這是什麼讓咱們得到?

實際上，咱們嘗試這種方法上BostonGlobe.com，任何形式的「響應圖像」的解決方案利用較早的網站之一。在幾個主要的瀏覽器愈來愈具備侵略性的預取，請求一個圖像的src好久之前咱們有機會申請任何自定義腳本：咱們將最終使咱們每個圖像顯示兩個請求，戰勝整個目的。我記錄了一些其餘地方的這些努力，因此我會饒你血淋淋的細節在這裏。

利用CSS咱們能不能作到這一點?

「是」和「否」與背景圖像，咱們能夠作到這一點很容易不夠，像素密度有關媒體查詢結合使用。srcset由WebKit的實現是很是類似，最近的圖像設置功能，他們推出了CSS 圖像設定容許你指定一個背景圖像的來源和決議清單，哪個是最合適的很熟悉的東西，讓瀏覽器做出決定。咱們沒有什麼非表象的內容圖像沿着這些線路，然而，到如今爲止。

使用CSS來管理內容的圖像被打破，默認狀況下，保持咱們關注的問題分開。這是一個完美感的方法，可能使一個快速演示頁面的範圍內，但看臺上迅速失控，在生產網站。咱們的CMS生成背景圖像的樣式表的分數就沒有野餐，從開發商的角度來看。然而，更糟糕的是，是，它會致使樣式表和圖像的請求，用戶可能並不須要，除非作得很是，很是仔細。除此以外，它使得咱們的圖像，沒有雙關語意人跡罕至的用戶瀏覽輔助技術的方式。

最接近咱們已經找到了一個基於CSS的方法將基於在HTMLs數據屬性值設置交換圖像的來源，使用一些擬議的CSS技巧，其中大部分只是理論上的，可能永遠不會發生。可是，它仍然沒有佔到雙下載高分辨率和低分辨率圖像資產相同的問題，咱們遇到的JavaScript。即便像尼古拉斯應該成爲咱們的技術，咱們仍然會面臨一樣的問題，許多基於腳本的解決方案：嘗試解決浪費，冗餘請求。

它是作什麼的關於帶寬?

不管屏幕密度，也有一些分辨率較低的圖像源的狀況下，多是可取的：視網膜MacBook Pro的拴到3G，例如，或不穩定的會議WiFi網絡，這兩種狀況下，咱們都一直在大量的倍。

除了 ​​簡單地爲咱們提供了一種內嵌速記分辨率媒體查詢，對帶寬的srcset帳戶，在必定意義上。它埋在神祕的規範發言，但真正使人興奮的方面srcset之一是，它的定義爲一組建議的瀏覽器。而後，瀏覽器可使用環境的啓發式或用戶的喜愛來決定，它要取一個較低的分辨率的圖像，儘管高解析度顯示：設想一個偏好高清晰度圖像，只要求您的手機瀏覽器，容許同時鏈接到WiFi，或手動瀏覽器偏好，讓您低分辨率的圖像時，只要求你的鏈接是風雨飄搖。

理想狀況下，咱們很樂意只發送這些圖像的設備是專門爲每一個屏幕分辨率調整大小。咱們的目的是節省帶寬，使圖像下載更快針對性的屏幕上。à 響應圖像常見的使用案例。

這不是WebKit的的早期srcset實現的一部分，但它確實鋪平道路，爲他們的除了咱們的標記，而無需任何改動。咱們開發者，能夠放心地使用srcset今天，這些優化可能出現「免費」在將來。

這是什麼意思的圖片元素?

這裏的事情變得有趣。

由WebKit實施的版本srcset，匹配原建議使用srcset，敏感的圖像社區集團一直致力的版本。咱們能夠認爲這個srcset化身速記媒體查詢有關決議的總體轉換，一個關鍵的區別在哪裏，瀏覽器能夠選擇覆蓋適用源根據用戶的喜愛。

雖然此實現匹配原來srcset建議，，當前srcset規格試圖擴充的語法，一些用例的圖片元素知足，使用microsyntax的執行了一些，但遠不及媒體查詢的功能。

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

在咱們看來並不理想，這樣的標記圖案。咱們限制至關於最大寬度媒體查詢，像素，一個的高深莫測microsyntax，爲了複製媒體查詢功能。幸運的是，既不是Web開發人員，也沒有瀏覽器的表明都特別喜歡這種過分的語法但願，它永遠不會看到光明的一天。

圖片元素的存在是爲了解決這些應用狀況下，使用更靈活的和熟悉的語法。圖片使用媒體源元素上的屬性，相似的視頻元素。這使咱們可以針對圖像源因素的組合：視區高度和/或寬度，以像素或EM Ş，可使用最小或最大的值，就像在咱們的CSS媒體查詢。

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

picture記住這的減小srcset語法規範寫的，因此它能夠用於圖片的源元素以及IMG元素。

<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>

在討論會上，兩個標記模式給了咱們一個使人難以置信的靈活性，根據它們的上下文，什麼樣的影像來源，咱們向用戶提供服務。

所以，這是好消息。www.rswebun.com

雖然srcset WebKit的實施並無解決全部響應的圖像用例，但它確實表明一個早該有的解決方案，但願許多第一次邁進了一大步。

讓咱們但願遵循WebKit的其餘瀏覽器，由於它最初提出的率先實現此功能，圖片在不一樣分辨率的瀏覽工具上自動響應交互。