您可以查看浏览器支持的（非官方）概述here http://caniuse.com/#feat=picture.
The <img>元素must被包括在内，这会带来提供后备选项的副作用。
图片元素必须有一个<img>标签里面，旁边<source>元素。这具有提供后备选项的副作用，但也有必要提供基础映像和元数据（特别是提供所需的alt属性）。这<source>元素仅仅覆盖src的属性<img>标签（在指定情况下）。
这是正确使用图片元素的示例。这个例子来自于Mozilla 开发者网络 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture.
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
The src属性应该always被包括在内，即使您使用srcset另外属性。
The srcset属性（据我了解）是一种为不同分辨率定义源的“旧”技术。它不使用标准语法媒体查询，也不具有使用<picture> and <source>元素（尽管 CSS-tricks 的 Chris Coyier 不同意我的观点 https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/），但可能受到某些不支持较新标准的浏览器的支持。包括srcset属性在你的<img>标签可能是理想的，但是在这些情况下，您仍然需要包含src属性（当没有一个时提供默认值）srcset文件是适当的，并为不支持的浏览器提供后备srcset）。所有图像标签始终需要src and alt属性——这些是必需的属性<img> tag.
一个有效的例子<picture>标签，包括srcset属性作为后备，并且src作为最坏情况后备方案的属性如下。
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" srcset="mdn-logo.png 2x" alt="MDN">
</picture>
This 粉碎杂志文章 http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/对不同的响应式图像技术以及何时使用每种技术进行了更深入的分析。
旁白：请不要相信 W3Schools 作为官方来源。 W3Schools 选择了一个类似于 W3C（万维网联盟）的名称，但事实上，它们与官方标准机构无关。来自他们的about http://www.w3schools.com/about/default.asp页面：“该网站的名称源自万维网 (W3)，但不隶属于 W3C。”
