响应式设计：是指在不同的屏幕分辨率，不同的像素密度比，不同宽度的终端设备中，网页布局可以自适应的调整。
响应式图片：是指根据不同尺寸的设备加载不同的图片。
一、常见结果方案
为适配不同终端机型的屏幕宽度和像素密度，我们一般会使用如下方法设置图片的CSS样式：
<style>
img{
max-width:100%;
height:auto;
}
</style>将图片的最大宽度设为100%，height：auto，以确保图片不会超出其父元素的宽度，如果父元素宽度发生变化，图片会根据自身的宽高比例进行缩放。
但是这样不同平台使用的是同一张大图片，不但浪费手机流量、影响网站载入速度并且在小屏幕下会很不清晰，严重影响用户的使用体验。
二、svg
svg是可缩放的矢量图形，基于可扩展标记语言生成，svg图像可以用任何的文本编辑器创建。
矢量图形在缩放时不会失真和变形，不基于像素，而是基于绘制规则（颜色，形状，位置等），和位图相比，最大的缺点是很难表现丰富的色彩层次和逼真的效果。常用于logo、图标的绘制。
在线制作svg格式的图片 ：
https://icomoon.io/
https://editor.method.ac/
三、img标签的srcset属性
srcset属性用来指定多张图像，适应不同像素密度的屏幕。
<div style="width:100%;">
<img style="width:100%;"
srcset="img/pc-480.png 480w,
img/pc-800.png 800w,
img/pc-1600.png 1600w"
src="img/pc-480.png">
</div>其中srcset指定图片的地址和对应的像素密度。
对于srcset里面出现了一个w单位，可以理解成图片原始的宽度。如果可视区域小于这个宽度的值，就会使用对应的图片。
当然，浏览器会自动选择一个最大的可用图片。 从小屏幕切换到大屏幕，图片从480→800→1600依次改变，若再切回小屏幕，由于浏览器已经获取了高质量的1600图片（有缓存），图片不会变成480。
srcset属性配合sizes属性使用：
sizes属性列出不同设备的图像显示宽度。
<img srcset="img/pc-480.png 480w,
img/pc-800.png 800w,
img/pc-1600.png 1600w"
sizes="(max-width: 440px) 100vw,
(max-width: 900px) 33vw,
254px"
src="img/pc-480.png">sizes设置了三种对应图片显示宽度，宽度不超过440像素的设备，图像显示宽度为100%；宽度441像素到900像素的设备，图像显示宽度为33%；宽度900像素以上的设备，图像显示宽度为254px。
注：sizes属性必须与srcset属性搭配使用。单独使用sizes属性是无效的。
四、<picture>标签
<picture>
<source srcset="big.png" media="(min-width: 980px)">
<source srcset="medium.png" media="(min-width: 600px)">
<img srcset="small.png">
</picture>
media属性给出媒体查询表达式，srcset属性就是<img>标签的srcset属性，给出加载的图像文件。
<picture>元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会遍历<picture> 中的<source>，按照<source>标签出现的顺序，依次判断当前设备是否满足media属性的媒体查询表达式，如果满足就加载srcset属性指定的图片文件，并且不再执行后面的<source>标签和<img>标签。如果没有匹配的，就选择 <img> 元素的 src 属性中的URL。
picturefill
不过picture存在一定的兼容性问题，picturefill库对于不支持picture的浏览器会使用js来获取srcset和媒体查询规则再决定输出对应的图片。使用时，下载 picturefill.js在页面上引用就行。
