原文
“響應式（Responsive）”這個詞我想大家沒有聽過一千遍，也有一百遍了。響應式是指實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。網上介紹響應式的文章也有很多了，比如：《自適應頁面設計》。在這篇文章中，我們不講頁面布局的響應式，我們主要來看看“響應式圖片”。這篇文章主要內容：
為什么要使用響應式圖片
<picture>元素
img的srcset、sizes屬性
1、為什么要使用響應式圖片
假如有一張圖片的顯示寬度為200px，那么，它在 1x
（即設備像素比為 1 的顯示器） 的顯示器上，是占了 200 個物理像素（即實際所占的像素）；它在 2x
的顯示器上，實際上是占了 400 個物理像素；在 3x
的顯示器上，實際上是占了 600 個物理像素；在 4x
的顯示器上就是占了 800 個物理像素。
如果這個圖片只提供 200 像素的尺寸，那么在 2x~4x 的顯示器上看起來就很模糊。如果只提供 800 像素的版本，那么在 1x~3x 的設備上會顯得多余，因為加載時間會相較長，所以我們要使用響應式圖片。
我們有兩種方法來設置響應式圖片：
使用<picture>元素（HTML5新增）
使用img的srcset、sizes
2、picture元素
在HTML 5中，增加了一個新元素<picture>。用過<video>、<audio>的，會覺得<picture>的用法很熟悉：
<picture>
<source srcset="smaller.jpg" media="(max-width: 750px)">
<source srcset="default.jpg">
<img srcset="default.jpg" />
</picture>
不知道你注意到沒有，在 media 屬性使用的語法與CSS媒體（media）特性中使用的語法一樣。你可以使用相同的特性，也就是說你可以查詢 max-width ， min-width ， max-height ， min-height ， orientation 等屬性。
看到<picture>這個元素是不是很興奮，可是不得不提醒你一句，目前來說，這個元素還是有兼容性問題的。
兼容性：兼容性
當然，如果你一定要使用<picture>這個元素，又要在其他瀏覽器里支持，那你就需要添加一個額外的插件：Picturefill2.0（http://scottjehl.github.io/picturefill/）
<script src="picturefill.js"></script>
雖然<picture>很方便，但如果你考慮到兼容性，還是要謹慎使用，不過，我們也有兼容性較好的另外一種處理響應式圖片的方法，看下面。
3、img的srcset、sizes屬性
當然，<img>元素自身也提供了響應式的屬性：srcset
和sizes
。
3.1 舊版本的srcset屬性
在以前，我們是這樣用的：
<img src="width-128px.jpg" srcset="width-128px.jpg 1x, width-256px.jpg 2x" /
這段代碼什么意思呢？
瀏覽器根據屏幕不同的像素密度（x）來顯示對應尺寸的圖片，也可以說是根據設備的像素比來顯示不同的圖片。
看圖：
別老是看著“別人的妹子”，請注意紅色箭頭，DPR就是設備像素比，不同的像素比，會顯示不同的圖片。
目前屏幕密度有：1x、2x、3x、4x。
3.2 新標準的srcset、sizes屬性，w描述符
舊版本的srcset使用多少有些局限性，不過幸好的是到2014年，我們已經有了全新的srcset，而且還多一個size是屬性。
使用新的srcset，我們只需要提供圖片資源以及斷點，瀏覽器會去自動匹配最佳顯示圖片。
使用方法如下：
<img src="width-128.jpg" srcset="width-128.jpg 128w, width-512.jpg 512w" sizes="(max-width: 500px) 128px, 512px" />
上面這段代碼的意思表示：不支持srcset屬性時，使用src中的圖片，否則瀏覽器會自動匹配最佳顯示圖片；sizes
屬性的值表示當可視區寬度不大于500像素，則圖片寬度顯示為128px，其他情況下，圖片寬度顯示為512px。。
注意：如果你用pc瀏覽器測試這段代碼，一定要先進入移動模式，因為一打開頁面時可視區大于500px（除非你的電腦是迷你版），會先顯示大圖片，隨后即使你縮小屏幕，小圖片雖然會加載，你可以在控制臺的“Network”里看到，但是顯示的依舊會是大圖片，因為前面大圖片已經緩存了，而瀏覽器會自動匹配最佳顯示的圖片。
srcset用來提供圖片資源，sizes
屬性的作用類似媒體查詢，用來設置圖片尺寸的臨界點。
sizes="[media query] [length], [media query] [length]..."
要保證使用 sizes
里計算出來的寬度始終是圖片所占屏幕寬度（length）。
為什么說sizes
屬性的作用類似媒體查詢呢？
因為它只是支持部分媒體查詢，比如：
(min-width: 400px)
(not (orientation: landscape) )
( (orientation: landscape) and (min-width:400px) )
( (orientation: portrait) or (max-width: 500px) )
但它不支持我們明確的定義媒體類型：比如screen或者print等等。
除了使用px外，我們還可以使用em、px、cm、vw…，甚至CSS3的calc
，不能使用百分比。
sizes=”(max-width: 320px) calc(100vw – 20px), 128px”
表示當視區寬度不大于320像素時候，圖片寬度為整個視區寬度減去20像素的大小。
兼容性查看：兼容性
3.3 常見的使用場景
（1）如果圖片的寬度是整個視口的百分比，那么sizes可以這樣設置：
sizes="80vw"
（2）假如圖片兩側的邊距各為10px，我們可以這樣設置：
sizes="calc( 100vw - 20px)"
（3）如果有一個兩側邊距為10px的圖片，允許它的最大寬度為500px，我們可以這樣設置：
sizes="( min-width:520px) 500px, calc(100vw - 20px)"
上面的代碼表示當可視區大于520px時，圖片寬度為500px，否則寬度為calc(100vw – 20px)計算的值。
