在目前的前端開發中，我們經常需要進行響應式的網站開發。提起響應式，大家應該想到三個概念： 彈性布局， 彈性圖片， 媒體查詢。本文着重介紹一下彈性圖片，也就是響應式圖片的解決方案。
一、js或服務端
通過js或者服務端來控制圖片的加載，原理就是跟蹤window的resize事件，然后修改圖片的路徑，代碼如下
<div class="content">
<img src="" alt=""/>
</div>
<script src="js/vendor/jquery.min.js"></script>
<script>
$(document).ready(function () {
function makeImageResponsive() {
var width = $(window).width;
var img = $(".content img");
if (width <= 480) {
img.attr('src', 'img/480.png')
} else if (width <= 800) {
img.attr('src', 'img/800.png')
} else {
img.attr('src', 'img/1600.png')
}
}
$(window).on('resize load', makeImageResponsive());
})
</script>
這種形式還有一種類似的變種，就是通過把屏幕或者設備信息寫入cookie，獲取圖片的時候在服務器端選擇返回哪種圖片，這樣就不需要我們來寫腳本了。
二、srcset
通過js或服務端加載確實可以達到響應式圖片的目的，兼容性也非常的好，但是需要我們編碼實現響應式的邏輯，在修改的時候也不是很方便屬於命令式的實現，以下方法使用聲明式的實現，就是把圖片的地址聲明在html中，由瀏覽器自行來決定如何加載，這樣更加靈活，把展示的邏輯從硬編碼中分離出來，降低了耦合。
現在html5中對於img標簽新增了一個srcset屬性。 屬性值為以逗號分隔的一個或多個字符串。每個字符串由以下組成：
a. 一個圖像的URL。
b. 可選的， 空格后跟以下的其中一個
~ 一個寬度描述符，后面緊跟’w’符號。
~ 一個像素描述符，后面緊跟’x’符號。
<img class="image" src="img/480.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"/>
設置srcset屬性后瀏覽器會根據我們的頁面不同，從當前的瀏覽環境進行感知，然后選擇一個圖片進行加載。當超過480時，加載的圖片變成了800，當超過800時，圖片變成了1600。但當我們把屏幕變小時，圖片始終是1600，是因為瀏覽器已經在大的分辨率下加載了大的圖片，那么會被默認放在緩存中，使用大的圖片不再會有網絡消耗，當然使用更大的圖片更好咯。
新片場https://www.wode007.com/sites/73286.html 傲視網https://www.wode007.com/sites/73285.html
三、sizes
當然這個屬性可以配合sizes屬性結合使用。sizes屬性可以設置一些類似媒體查詢的規則。 例如：
前面的第二種方法單獨使用的話會有一個坑，就是例如當img的寬度只占50%，當我們加寬寬度的時候，加寬到480，但此時圖片的寬度只有240，圖片仍然變成了800。這時srcset屬性就還需要配合sizes屬性進行使用（第二種方法的sizes屬性值默認為100vw）。
<div class="content">
<img class="image" src="img/480.png"
srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"
sizes="50vw"/>
</div>
sizes屬性內還可以寫入媒體查詢，例如
<style>
html, * {
margin:0;
padding:0;
}
.content {
width:100%;
margin:0 auto;
}
.content img {
display: block;
max-width: 100%;
}
</style>
</head>
<body>
<div class="content">
<img class="image" src="img/480.png"
srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"
sizes="(min-width:800px) 800px, 100vm"/>
</div>
就是當瀏覽器寬度小於800時，按照100vw來設置圖片；但超過800時，就是定寬了。
四、picture標簽
這個也是html5的新屬性。 可以放置多個source標簽，以指定不同的圖像文件名，進而根據不同的條件進行加載。用法：
- 創建標簽。
- 里面放置標簽用來展示可能用到的圖像
- 對source添加srcset屬性來指定圖片URL，添加media屬性，來規定媒體查詢。
- 添加一個回退的
元素
這個例子表示在大於800px的時候，展示ad002-l這個large圖片。 在大於480px的時候，展示ad002-m這個medium圖片。 否則，展示ad002小圖片。
<picture>
<source srcset='src/img/ad002-l.png' media='(min-width: 50em)'/>
<source srcset='src/img/ad002-m.png' media='(min-width: 30em)'/>
<img src="src/img/ad002.png"/>
</picture>
現在很多瀏覽器對於picture這個標簽還不支持，所以我們需要用到picturefill.js來解決。
五、svg圖片
SVG圖片不是一個簡單的圖像，而是一個規則。所以可是很好的響應式，不過因為比較復雜，所以一般都是對於一些簡單的圖像使用svg，對於復雜，顏色多的圖片，不采用SVG。