CSS「image-set」 解決了背景圖片的響應式問題，但是 HTML中的 img 元素如何處理？
<picture alt="">
<source src=hires.png media="min-width:800px">
<source src=midres.png media="min-width:480px">
<source src=lores.png>
<!-- 不支持的瀏覽器降級處理 -->
<img src=midres.png alt="">
</picture>
於此同時，其他的一些想法如雨後春筍般涌現出來，於是 W3C 社區討論組 Responsive Images Community Group 應運而生。最新的規範在這裏：http://picture.responsiveimages.org/ （W3C http://www.w3.org/TR/html-picture-element/）。截止本文發佈時間，最近一次更新是 2013年4月24日，規範示例：
<picture width="500" height="500">
<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg" alt="">
<p>Accessible text</p>
可以看到這裏的「srcset」屬性類似「image-set」，通常情況下，「srcset」裏面的資源是具有 fallback 特性的，也就是說第一個圖片資源無法加載的時候可以跳過加載後面的備用資源。但是 Apple 的 eoconnor 提出的方案是這樣的：
<img src="foo-lores.jpg"
srcset="foo-hires.jpg 2x,
foo-superduperhires.jpg 6.5x"
alt="decent alt text for foo.">
任何一個新標準的提出，都會存在各種不同的聲音，這是好事，作爲網頁的最終開發者其實並不太關心實現語法。有任何問題大家也可以直接到 HTML5 中文興趣小組參與討論。
我們可以在CSS 中使用「image-set」屬性值，因爲目前大部分 Retina 屏幕的設備的瀏覽器都是基於 Webkit 內核的，如果有特殊的需求可以使用 Media Queries。
查看原文請參考網址：http://mingkr.com/html5-response-img