之前提過：為了解決行動裝置螢幕解析尺寸大小不一的問題，所以，Responsive Web Design開始盛行。
不過，Responsive Web Design有個棘手的問題，主要是關於影像圖檔的處理。
Steve Jobs在WWDC2010正式發表iPhone4時，隆重介紹了他們的視網膜螢幕（Retina Display）。
相較於iPhone4之前的機種，譬如說3GS，iPhone4的視網膜螢幕在尺寸規格上，與3GS同樣是3.5英寸，但iPhone4螢幕上的每1像素（Pixel）卻是3GS的4倍。
也就是說：Responsive Web Design在影像圖檔的處理上，必須為視網膜螢幕另外準備一套2倍尺寸（高與寬）的影像圖檔。
雖然CSS3的Media Query本來就可以用來解決類似問題，不過，網頁開發人員顯然都覺得應該尋求更有效率的作法。
目前，實現更有效率達成Responsive Images的解法主要有兩種：
（一）<img srcset>
在既有的<img>標籤裡新增srcset來指定適用於不同螢幕解析尺寸的圖檔來源。
<img src="images/desktop.jpg" srcset="images/mobile-s.jpg 320w, images/mobile-m.jpg 320w 2x, images/mobile-l.jpg 640w, images/mobile-xl.jpg 640w 2x" alt="Responsive Images">
（二）<picture>
<picture>的構想概念來自HTML5新增的<audio>跟<video>，透過<source>來指定適用於不同螢幕解析尺寸的圖檔來源。
<picture alt="Responsive Images">
<source src=images/mobile-s.jpg media="min-width:320px">
<source src=images/mobile-m.jpg media="max-width:640px">
<source src=images/mobile-l.jpg media="max-width:960px">
<source src=images/mobile-s.jpg media="network-speed:3g">
<source src=images/desktop.jpg>
<img src=images/desktop.jpg alt="Responsive Images">
</picture>
原本，兩種解法各有優劣，也都還在自由發展、開放討論階段，尚未形成定案。
不過，起草制定HTML5的WHATWG後來表態支持<img srcset>，甚至考慮把它加進CSS4。
WHATWG此舉自然激怒為數甚眾投注心力在<picture>的Responsive Images網頁開發社群成員，也使得W3C的Responsive Images Community Group不得不跳出來圓場提議另一套兼融<img srcset>與<picture>的Responsive Images解法。
未來會怎樣呢？搞不好SVG會捲土重來解救眾生也說不定。
延伸閱讀：