Responsive Images:<img srcset>大戰<picture>

作者: Jas / 發表於 2012-07-26

之前提過:為了解決行動裝置螢幕解析尺寸大小不一的問題,所以,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會捲土重來解救眾生也說不定。





回上方