html picture 标签怎么使用

<picture> 标签是 HTML5 中用于实现响应式图片加载和格式转换的核心容器标签，它通过包裹 <source> 子标签，允许根据设备特性（如屏幕尺寸）或图片类型（如 WebP 格式）加载不同的图片源，从而显著优化网页性能和用户体验。

<picture> 标签和 img 标签有什么区别？

结论：<picture> 标签是容器标签，支持多个 <source> 子标签定义条件，而 <img> 标签是单一图片标签，通常只加载一张图片。<picture> 标签支持响应式图片（通过 media 属性）和现代图片格式（通过 type 属性），而 <img> 标签不支持这些高级特性。

<picture> 标签的作用是作为图片的容器，内部可以包含多个 <source> 元素。<source> 元素负责根据条件（如屏幕宽度或图片类型）筛选合适的图片源。如果所有 <source> 都不匹配，则渲染 <img> 标签。<img> 标签始终存在，作为最后的保底方案。

picture 标签的基本结构是怎么样的？

结论：一个标准的 <picture> 标签结构必须包含一个或多个 <source> 子标签和一个最终的 <img> 标签。<source> 标签定义加载条件，<img> 标签定义默认图片。

具体的使用步骤如下：

1. 使用 <picture> 开始标签包裹内容。
2. 在内部添加 <source> 元素，可以添加多个 <source> 来覆盖不同情况。
3. 添加 <img> 元素，作为所有 <source> 都不匹配时的后备显示。
4. 使用 </picture> 结束标签。

如何实现响应式图片加载？

结论：通过在 <source> 标签上使用 media 属性（媒体查询）和 srcset 属性（源集），可以指定特定屏幕宽度下加载对应尺寸的图片，避免加载过大的图片导致带宽浪费。

media 属性接受媒体查询语句，例如 media="(max-width: 768px)"，表示当屏幕宽度小于等于 768 像素时生效。srcset 属性则列出不同尺寸图片的 URL，例如 srcset="small.jpg 480w, medium.jpg 800w"，浏览器会根据设备的实际渲染宽度自动选择最合适的图片。

如何加载不同图片格式？

结论：在 <source> 标签上使用 type 属性指定图片格式（如 image/webp），浏览器会自动选择支持的最高质量格式，不支持则回退到 <img> 标签。

现代浏览器（如 Chrome、Firefox、Edge）都支持 WebP 或 AVIF 等更高效的图片格式。这些格式通常比传统的 JPG 或 PNG 小 30% 左右，能显著加快页面加载速度。<picture> 标签可以优先加载 WebP 格式，如果不支持则加载 JPG 格式。

使用 picture 标签有什么注意事项？

结论：必须将 <img> 标签放在 <picture> 内部的最后位置，否则可能无法显示图片；同时必须为 <img> 添加 alt 属性以保证无障碍访问。

<img> 标签必须放在所有 <source> 之后，且不能被其他标签打断。如果 <img> 放在 <source> 之前，浏览器会优先渲染 <img> 而忽略 <source> 的逻辑。此外，为了符合无障碍访问标准，<img> 标签必须包含 src 和 alt 两个属性。