HTML5 <picture>标签将帮助您根据屏幕宽度解析正确的图像源
显然，在过去的5年中，浏览器的行为并没有太大变化，即使display: none设置了属性，许多浏览器仍会下载隐藏的图像。
即使有媒体查询的解决方法，也只有在将图像设置为CSS中的背景时才有用。
当我在想这个问题只有一个JS解决方案（延迟加载，图片填充等）时，似乎有一个不错的纯HTML解决方案随HTML5一起提供。
这就是<picture>标签。
这是MDN的描述方式：
的HTML <picture>元素是用于指定多个容器<source>为特定的元素<img>载于它。浏览器将根据页面的当前布局（图像将出现在框的约束中）和将在其上显示的设备（例如，普通或hiDPI设备）选择最合适的来源。
以及使用方法：
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
背后的逻辑
img仅当没有任何媒体规则适用时，浏览器才会加载标签的来源。当<picture>浏览器不支持该元素时，它将再次回退到显示img标签。
通常，您会将最小的图像作为的来源，<img>因此不会为较大的屏幕加载较重的图像。反之亦然，如果适用媒体规则，<img>则不会下载的源，而是下载相应<source>标记的url内容。
这里唯一的陷阱是，如果浏览器不支持该元素，它将仅加载小图像。另一方面，在2017年，我们应该以移动优先的方式进行思考和编码。
在有人退出之前，这是当前浏览器对的支持<picture>：
桌面浏览器
手机浏览器
您可以在可以使用上找到有关浏览器支持的更多信息。
好消息是html5please的句子是将其与备用广告一起使用。我个人打算听取他们的建议。
您可以在W3C的规范中找到有关该标签的更多信息。那里有一个免责声明，我发现重要的是要提及：
该picture元素与外观相似的video和audio元素有所不同。尽管所有source元素都包含元素，但是src当元素嵌套在元素中时，源元素的属性没有意义picture，并且资源选择算法也不同。同样，picture元素本身不显示任何内容。它仅为其包含的img元素提供上下文，使它能够从多个URL中进行选择。
所以说的是，它仅通过提供一些上下文来帮助您在加载图像时提高性能。
而且您仍然可以使用一些CSS魔术来在小型设备上隐藏图像：
<style>
picture { display: none; }
@media (min-width: 600px) {
picture {
display: block;
}
}
</style>
<picture>
<source srcset="the-real-image-source" media="(min-width: 600px)">
<img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>
因此，浏览器将不会显示实际图像，而只会下载1x1像素图像（如果您多次使用它，则可以将其缓存）。但是请注意，如果<picture>浏览器不支持该标签，即使在桌面桌面上也不会显示实际图像（因此，您肯定需要在其中添加polyfill备份）。
