響應式設計
響應式設計是指在不同分辨率的設備中，網頁佈局可以自適應的調整。這種彈性化的佈局使網站在不同設備中的佈局都比較合理，本意是使原本PC上的網站兼容手機和平板。大部分響應式網頁是通過媒體查詢，加載不同樣式的CSS文件實現。
好處不用多說，但是也有缺陷。由於PC和手機訪問的是同一個網站，PC不計較流量，但是手機很在乎啊。一般在手機上訪問響應式網頁裏的圖片時，只是把圖片分辨率做了一個縮放，手機還是下載了那一張大圖片，一般手機又沒有Retina屏，很浪費帶寬。而且現在手機網速也不是很快，打開一個這種網站要耗費很長時間。
網上看到一篇文章《How a new HTML element will make the Web faster》，大意是：爲了使手機能更好顯示網站內容，剛開始的時候大部分解決方法是專門開發一個m.domain.com 的手機版網站。但是這個比較麻煩。Marcotte提出了響應式網站，但是存在網絡帶寬浪費問題。HTML的<picture>標籤（瀏覽器還都不支持）可以解決這個問題。
網上看到一篇文章《How a new HTML element will make the Web faster》，大意是：爲了使手機能更好顯示網站內容，剛開始的時候大部分解決方法是專門開發一個m.domain.com 的手機版網站。但是這個比較麻煩。Marcotte提出了響應式網站，但是存在網絡帶寬浪費問題。HTML的<picture>標籤（瀏覽器還都不支持）可以解決這個問題。
<picture>標籤效果
<picture>標籤用法和HTML5的<video>類似：
<picture>
<source srcset="large.jpg" media="(min-width: 800px)">
<source srcset="medium.jpg" media="(min-width: 600px)">
<img srcset="small.jpg">
</picture>
(A)在電腦上顯示的圖片
(B)在手機上顯示的圖片
上邊圖(A)和圖(B)的內容一樣，只不過(B)放大了(A)的主體部分，但是畫面效果看起來不一樣。如果圖(A)顯示在PC顯示屏上，看起來會比較合理，實際上大部分圖片在設計時，都考慮的是PC上的顯示效果；如果在手機頁面裏顯示，會一下顯得比較小，抓不住重點，明顯沒有沒有顯示圖(B)的效果好。而且在PC上顯示的長條圖片，在手機裏最好把寬高比在調整的小一點。
(A)在電腦上顯示的圖片
(B)在手機上顯示的圖片
總之，在設計響應式頁面的時候，針對不同設備加載不同圖片不僅能節約帶寬，而且能有更好的顯示效果。雖然圖片差別不大，但是追求體驗的用戶能感覺出來，細節決定成敗啊，網頁上大部分功能都很好實現，好網頁和差網頁最重要的差別還是體驗和速度。不過這樣做也增加了前臺做圖的工作量。
實現<picture>標籤
有一篇文章《HTML5 <PICTURE> ELEMENT》介紹了<picture>標籤，但是目前還不被瀏覽器支持，如果想使用，要麼用<span>配合媒體查詢模擬這個效果，要麼用javascript動態返回圖片。
不過現在已經有人寫了這個功能：github上的picturefill項目，就是通過加載HTML時，異步加載picturefill.js解析<picture>標籤，然後再獲取標籤中的圖片。因爲需要和解析HTML這個過程異步執行，所以在使用<picture>之前，應當在<head>裏引用picturefill.js。
<script>
// 通過HTML5 shiv方式讓IE識別<picture>標籤
document.createElement( "picture" );
</script>
<script src="picturefill.js" async> //添加async屬性
</script>然後就可以想最初提到的和<video>方式使用<picture>標籤，另外，picturefill.js可以支持IE9，但是得在<source>外裹一層<video>標籤：
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="large.jpg" media="(min-width: 800px)">
<source srcset="medium.jpg" media="(min-width: 600px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="small.jpg" alt="響應式圖片">
</picture>這樣就可以利用媒體查詢加載不同圖片了，詳細內容可以參考Picturefill的網站。但是這個方法也引用了外部js文件，需要多請求一次資源，文件大小19KB左右，在使用時注意權衡。