本文详细介绍了 html `` 元素以提供默认图像和兼容性回退。通过 `
理解 HTML <picture> 元素
HTML 的 <picture> 元素是实现响应式图像的重要工具，它允许开发者为不同的设备特性（如视口宽度、屏幕分辨率或图像格式）提供多种图像资源。这使得浏览器能够根据当前环境选择最合适的图像，从而优化页面加载性能和用户体验。<picture> 元素主要用于“艺术方向”（Art Direction）用例，即在不同断点下显示图像的不同裁剪版本或完全不同的图像，而不仅仅是简单地缩放同一张图像。
核心要求：<img> 元素不可或缺
在使用 <picture> 元素时，一个常见的误解是认为只需要 <source> 元素即可。然而，根据 HTML 规范和 MDN 文档，<picture> 元素必须且只能包含一个 <img> 元素。这个 <img> 元素扮演着至关重要的角色：
- 默认图像与回退机制：如果没有任何 <source> 元素匹配当前的媒体条件，或者浏览器不支持 <picture> 元素，那么 <img> 元素的 src 属性所指定的图像将被加载并显示。它确保了在所有情况下都有一个可用的图像。
- 图像的实际渲染：无论最终选择了哪个 <source> 元素指定的图像，它都将在 <img> 元素所占据的空间中渲染。<img> 元素定义了图像的尺寸、alt 文本以及其他标准图像属性。
MDN 文档明确指出：
The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios. 浏览器会考虑每个子 <source> 元素并选择其中最佳匹配项。如果未找到匹配项，或浏览器不支持 <picture> 元素，则选择 <img> 元素的 src 属性指定的 URL。选定的图像随后在 <img> 元素占据的空间中呈现。
使用 <source> 实现响应式图像
<source> 元素是 <picture> 内部用于定义不同图像资源的标签。它通常与 media 属性结合使用，以指定在何种媒体条件下应用该图像。
立即学习“前端免费学习笔记（深入）”；
- media 属性：接受一个媒体查询（Media Query），例如 (min-width: 600px)。当媒体查询条件满足时，浏览器会考虑该 <source> 元素提供的图像。
- srcset 属性：指定一个或多个图像文件的 URL，以及它们对应的宽度描述符（w）或像素密度描述符（x）。浏览器会根据这些信息和当前设备条件选择最合适的图像。
- type 属性：可以指定图像的 MIME 类型，例如 image/webp。这允许浏览器选择它支持的最新图像格式。
浏览器会从上到下评估 <source> 元素。一旦找到第一个匹配当前媒体条件的 <source> 元素，并且其 srcset 中有可用的图像，浏览器就会加载该图像。如果没有 <source> 元素匹配，或者浏览器不支持任何匹配的图像格式，最终会回退到 <img> 元素的 src。
正确的使用示例
以下是一个正确使用 <picture> 元素的示例，它为不同视口宽度提供了三张不同的图像，并包含一个 <img> 作为回退：
<div class="container">
<div class="pic">
<picture>
<!-- 当视口宽度至少为 1100px 时，显示 gallery-03.jpg -->
<source media="(min-width: 1100px)" srcset="images/gallery-03.jpg">
<!-- 当视口宽度至少为 900px 时，显示 gallery-02.png -->
<source media="(min-width: 900px)" srcset="images/gallery-02.png">
<!-- 当视口宽度至少为 600px 时，显示 gallery-01.png -->
<source media="(min-width: 600px)" srcset="images/gallery-01.png">
<!-- 默认图像，或在所有 <source> 都不匹配时显示 -->
<img src="images/default-gallery.jpg" alt="响应式画廊图像" loading="lazy" />
</picture>
</div>
</div>在这个例子中：
- 如果视口宽度大于或等于 1100px，浏览器将加载 images/gallery-03.jpg。
- 如果视口宽度在 900px 到 1099px 之间，将加载 images/gallery-02.png。
- 如果视口宽度在 600px 到 899px 之间，将加载 images/gallery-01.png。
- 如果视口宽度小于 600px，或者所有 <source> 都不匹配（例如，由于图像路径错误），则会加载 images/default-gallery.jpg。
注意事项：
- <img> 标签的必要性：务必在 <picture> 内部包含一个 <img> 标签。
- source 元素的顺序：通常建议将更具体的媒体查询（例如，针对更大视口的条件）放在前面，因为浏览器会按照它们在 HTML 中出现的顺序进行评估。一旦找到匹配项，后续的 <source> 元素将不再被考虑。
- alt 属性：<img> 标签的 alt 属性对于可访问性至关重要，即使图像是装饰性的，也应提供一个空的 alt=""。
- loading="lazy"：结合 loading="lazy" 可以进一步优化图像加载性能，使图像在进入视口前才开始加载。
总结
<picture> 元素提供了一个强大而灵活的机制来处理响应式图像。它的核心在于通过 <source> 元素定义多种图像资源，并结合 media 属性进行条件选择，最终通过一个必不可少的 <img> 元素来渲染所选图像并提供可靠的回退。正确理解并运用这一结构，能够显著提升网站在不同设备上的图像加载效率和用户体验。记住，<picture> 只是一个容器，真正的图像渲染和默认行为仍由其内部的 <img> 元素负责。
