加载适当大小的图像文件，使可用带宽得到充分利用；
加载不同剪裁并具有不同横纵比的图像，以适应不同宽度的布局变化；
加载更高的像素密度，显示更高分辨率的图像；
步骤：
创建<picture></picture>标签；
在这些标签内创建一个你想用来执行任何一个特性的<source></scource>标签；
添加一个media属性，用来包含你想要的特性，如宽度（max-width，min-width），方向（orientation）等；
添加一个srcset属性，属性值为相应的图像文件名称，进行加载。如果你想提供不同的像素密度，例如Retina显示屏，可以添加额外的文件名到srcset属性中；
添加一个回退的<img>标签；
<picture>的工作原理
<picture>语法
由上面的示例代码可知，在没有引入js和第三方库，CSS中没有包含media queries的情况下，<picture>元素可以实现只用HTML来声明响应式图片；
<source>元素
<picture>标签它本身没有属性。神奇的地方是<picture>被用来当做<source>的容器。
<source>元素，是用来加载多媒体的比如视频和音频，已经被更新用到图片的加载并且一些新的属性已经被添加：
srcset (必需)
接受单一的图片文件路径(如：srcset=”img/minpic.png”).
或者是逗号分隔的用像素密度描述的图片路径(如：srcset=”img/minpic.png,img/minpic_retina.png 2x”),1x 的描述是默认不使用的。
media (可选)
接受任何验证的media query,你可以看到在CSS @media选择器(如：media=”(min-width: 320px)”).
在之前的<picture>语法的例子里已经用到了。
sizes（可选）
接收单一的宽度描述(如：sizes=”100vw”)或者单一的media query宽度描述(如：sizes=”(min-width: 320px) 100vw”).
或者逗号分隔的media query对宽度的描述(如：sizes=”(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vw – 100px)”) 最后的一个被当做默认的。
type(可选)
接受支持的MIME类型(如: type=”image/webp” or type=”image/vnd.ms-photo”)
浏览器会根据这些提示和属性来加载确切的图片资源。根据标签的列表顺序。浏览器会使用第一个合适的<source>元素并忽略掉后面的<source>标签。
添加最后的<img>元素
<img>元素在<picture>内部用来当浏览器不支持时或者没有源标签匹配时的显示。在<picture>内使用<img>标签是必须得，如果你忘记了，将不会有图片显示出来。
用<img>来声明默认的图片显示。将<img>标签放到<picture>内的最后，浏览器在找到<img>标签之前会忽略<source>的声明。这个图片标签也需要你写上它的alt属性。
