响应式图片指用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。
同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。
常用的实现方式：
1.用srcset和sizes加载不同图片
<img
sizes="(min-width:40em) 80vw, 100vw"
srcset="img/medium.jpg 375w,
img/large.jpg 480w,
img/extralarge.jpg 768w"
src="img/medium.jpg"
alt="响应式图片布局">
2.picture、source media加载不同图片
<picture>
<source
media="(min-width:40em) 80vw, 100vw"
srcset="img/medium.jpg 375w,
img/large.jpg 480w,
img/extralarge.jpg 768w" />
<img src="img/medium.jpg" alt="响应式图片布局"/>
</picture>
3.用source type指定多种格式
<picture>
<source
type="image/webp"
media="(min-width:40em) 80vw, 100vw"
srcset="img/medium.webp 375w,
img/large.webp 480w,
img/extralarge.webp 768w" />
<source
media="(min-width:40em) 80vw, 100vw"
srcset="img/medium.jpg 375w,
img/large.jpg 480w,
img/extralarge.jpg 768w"/>
<img src="img/medium.jpg" alt="响应式图片布局"/>
</picture>
4.超赞polyfill-picturefill 实现浏览器兼容
下载 picturefill.min.js