发现处理图片和HTML`picture`标签的基本知识，以及如何使它们具有响应性
HTML给我们提供了picture 标签，它所做的工作与img 标签的srcset 属性非常相似，区别非常微妙。
当你使用picture ，而不是仅仅提供一个较小版本的文件，你完全想改变它。或者提供一个不同的图像格式。
我发现最好的用例是提供WebP图像，这是一种仍未被广泛支持的格式。在picture 标签中，你指定了一个图像列表，它们将按顺序被使用，所以在下一个例子中，支持WebP的浏览器将使用第一张图像，如果不支持，则回退到JPG。
<picture>
<source type="image/webp" srcset="image.webp">
<img src="image.jpg" alt="An image">
</picture>
source标签为图像定义了一种（或多种）格式。img标签是在浏览器非常老，不支持picture标签的情况下的回退。
在source 标签内的picture ，你可以添加一个media 属性来设置媒体查询。
下面的例子有点像上面的例子中的srcset 。
<picture>
<source media="(min-width: 500w)" srcset="dog-500.png" sizes="100vw">
<source media="(min-width: 800w)" srcset="dog-800.png" sizes="100vw">
<source media="(min-width: 1000w)" srcset="dog-1000.png" sizes="800px">
<source media="(min-width: 1400w)" srcset="dog-1400.png" sizes="800px">
<img src="dog.png" alt="A dog image">
</picture>
但这不是它的使用情况，因为正如你所看到的，它要啰嗦得多。
picture 标签是最近才出现的，但现在除了Opera Mini和IE（所有版本）外，所有主要浏览器都支持。
