picture 标签是 HTML5 中新增的一个元素，用来实现响应式图像。它可以根据屏幕大小和其他条件来选择最合适的图像进行加载。
它与 img 标签的 srcset 属性非常相似，并且差异非常细微。
当你想要完全改变文件，而不是仅仅服务于一个小版本的文件时，你就可以使用 picture。或者提供不同的图像格式。
我发现的最佳用例是在提供 WebP 图像时，它虽然已经在主流浏览器中得到广泛支持，但你知道的，IE 是个例外。
在 picture 标签中，你指定了一个图像列表，并将按顺序使用这些图像，因此以下示例中，支持 WebP 的浏览器将使用第一个图像，如果不支持则回退到 JPG：
<picture>
<source type="image/webp" srcset="image.webp" />
<img src="image.jpg" alt="An image" />
</picture>source 标签定义了图像的一种（或多种）格式。如果浏览器非常旧并且不支持 picture 标签，img 标签是备用的。
在 picture 内的 source 标签中，你可以添加 media 属性以设置媒体查询。
下面的示例类似于上述 srcset 示例：
<picture>
<!-- -->
<source media="(min-width: 500w)" srcset="avatar-500.png" sizes="100vw" />
<source media="(min-width: 800w)" srcset="avatar-800.png" sizes="100vw" />
<source media="(min-width: 1000w)" srcset="avatar-1000.png" sizes="800px" />
<source media="(min-width: 1400w)" srcset="avatar-1400.png" sizes="800px" />
<img src="avatar.png" alt="An image" />
</picture>