響應式圖片解決方案——調研

圖片是頁面中較爲重要的元素之一，在目前流行的響應式設計當中，圖片也須要隨之作出變化，本文就給出了目前業界針對響應式圖片給出的各類解決方案。

對img元素增長srcset屬性

規範地址：http://www.w3.org/TR/html-srcset/

在img的srcset屬性中能夠提供若干圖片資源地址，並附加使用圖片的描述，隨後可添加規則讓瀏覽器根據這些描述來使用對應的資源。srcset的格式要求是：圖片資源地址+可選的寬度描述+可選的高度描述+可選的像素密度描述，多個資源和描述組合之間用逗號分隔，例如：

<img alt="The Breakfast Combo"
         src="banner.jpeg"
         srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x">

例如在上面的例子中，「banner-HD.jpeg 2x」表示圖像資源的像素密度爲2（其實，圖像資源自己並無像素密度概念，要配合物理設備和其實際顯示的尺寸才行。）。「banner-phone.jpeg 100w」表示該圖像資源的寬度爲100像素。

這裏告訴了瀏覽器圖片寬度、像素密度有什麼用呢？這要配合sizes屬性一塊兒使用才生效。看下面的例子。

<img
  src="small.png"
  srcset="large.png 1280w,
          medium.png 640w,
          small.png 320w"
     sizes="(max-width: 500px) 250px, 500px"  
     alt="whatever">

首先，srcset列出了三個不一樣的圖片資源，其尺寸分別爲1280、640和320。sizes屬性的含義是：當窗口寬度小於500px時，圖片渲染尺寸爲250px，不然爲500px。那麼當圖片渲染尺寸爲250px時，瀏覽器會自動選用320px寬的圖片資源，當圖片渲染尺寸爲500px，則會用640px寬的。1280px寬的圖片資源在這裏用不到，由於瀏覽器判斷沒有必要使用這麼大的。當遇到像素密度爲2的顯示設備時，250px時則會使用640px寬度的圖片，500px時則會使用1280px寬度的圖片，保證像素是匹配的。

再來看像素密度的使用方法：

<img
  src="normal.png"
  srcset="normal.png 1x, hd.png 2x"
     alt="whatever">

若是屏幕像素爲2時，瀏覽器會自動選用hd.png，不然使用normal.png。當使用像素密度時，若是沒有提供圖片渲染尺寸，瀏覽器會自動將圖片渲染尺寸設置爲符合像素密度的大小。例如，圖片自己尺寸爲400x400，像素密度爲2x，那麼瀏覽器在渲染的時候圖片尺寸就變爲200x200。固然建議仍是手動寫上圖片尺寸，以減小瀏覽器的負擔。

目前只有像素密度描述被Chrome支持，寬度描述目前均不支持。（http://stackoverflow.com/questions/14397458/which-browsers-support-the-img-srcset-attribute）

picture元素

規範地址：http://www.w3.org/TR/html-picture-element/

picture元素是特地爲多資源圖片準備的，使用起來結構更加清晰。固然若是你的圖片元素僅使用一個資源，那麼仍是用原來的img吧。picture元素使用方式以下：

<picture>
    <source srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x">
    <img alt="A rad wolf"
        src="pic1x.jpg" width="500" height="500" />
</picture>

picture元素中嵌套了source和img，其中source指定srcset。這和下面寫法的效果是一致的。

<img alt="A rad wolf" srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" src="pix1x.jpg" width="500" height="500" />

除了在source元素增長srcset屬性外，還能夠添加media屬性，用來作media query，配合sizes一塊兒使用：

<picture>
   <source media="(min-width: 36em)"
      srcset="large.jpg  1024w,
         medium.jpg 640w,
         small.jpg  320w"
      sizes="33.3vw" />
   <source srcset="cropped-large.jpg 2x,
         cropped-small.jpg 1x" />
   <img src="small.jpg" alt="A rad wolf" />
</picture>

 目前尚未瀏覽器能夠支持這樣用。

picturefill方案

有了規範卻無法用怎麼辦？可使用一個js庫來解決，這就是picturefill的用處。在頁面裏引入該腳本，頁面就能自動實現響應式圖片。大部分狀況來講，你無需增長任何腳本，HTML只須要按照規範寫就能夠了。腳本的下載和使用請看http://scottjehl.github.io/picturefill/。

這篇文章說Chrome Canary版本支持了，可是試驗發現仍是不正常，另外還有莫名其妙的bug，圖片尺寸顯示異常。

參考資料

• http://css-tricks.com/video-screencasts/133-figuring-responsive-images/
• http://www.smashingmagazine.com/2014/05/12/picturefill-2-0-responsive-images-and-the-perfect-polyfill/
• http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/
• http://ericportis.com/posts/2014/srcset-sizes/