<picture>标签目前被接受进入WHATWG HTML5 Living Standard.这并不意味着它是一成不变的,它仍然被认为是“实验技术”.您不应该依赖浏览器来支持这项技术.您可以看到浏览器支持here的(非官方)概述.

正如Mozilla开发人员网络上所述：

This is an experimental technology. Because this technology’s specification has not stabilized,check the compatibility table for the proper prefixes to use in varIoUs browsers. Also note that the Syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

标准化HTML的“living standard”模型意味着元素被更容易接受,但可能不会保留在标准中,或者如果针对其当前使用提出了良好的论据,则可能会更改.

< img>必须包含元素,这具有提供后备选项的副作用.

必要时,图片元素必须具有< img>在其中标记,与< source>一起元素.这具有提供后备选项的副作用,但也需要提供基本图像和元数据(尤其是提供所需的alt属性). < source>元素只是覆盖< img>的src属性标签(在特定情况下).

这是一个正确使用的图片元素的例子.这个例子来自Mozilla Developer’s Network.

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

即使您另外使用srcset属性,也应始终包含src属性.

srcset属性(根据我的理解)是一种定义不同分辨率源的“旧”技术.它不使用标准语法媒体查询,也不使用< picture>提供的其他灵活性.和< source>元素(although Chris Coyier of CSS-tricks disagrees with me here),但某些不支持较新标准的浏览器可能支持这些元素.在< img>上包含srcset属性标签可能是可取的,但是,在这些情况下,您仍然需要包含src属性(当没有srcset文件适合时提供默认值,并为不支持srcset的浏览器提供后备) .所有图片代码始终需要src和alt属性 – 这些是< img>的必需属性.标签.

< 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>

这篇Smashing Magazine article对不同的响应式图像技术以及何时使用每种技术进行了更深入的分析.

旁白：请不要相信W3Schools是官方消息来源. W3Schools选择了一个类似于W3C(万维网联盟)的名称,但实际上它们并不与官方标准组织相关.从他们的about页面：“该网站的名称来自万维网(W3),但不隶属于W3C.”