HTML picture标签

HTML 标签使您可以指定多个图像以供不同的设备使用，以提高响应性并优化图像加载速度。

标签定义

标签必须包含一或多个 标签，每个标签都包含一个 media 属性，该属性规定在什么情况下会使用这个图像。 如果没有匹配到任何 media 属性，将会使用 标签内的 src 属性指向的图像。

<picture>
  <source media="(min-width: 650px)" srcset="large-image.jpg">
  <source media="(min-width: 465px)" srcset="medium-image.jpg">
  <img src="small-image.jpg" alt="Sample image">
</picture>

标签属性

| 属性 | 描述 | | --- | --- | | srcset | 包含不同设备使用的图像URL和图像大小的一组逗号分隔值 | | sizes | 告诉浏览器在不同屏幕上使用不同的图像，以提高响应性 | | media | 定义了与媒体查询（ @media ）一起使用的样式表设置应用的媒体类型 |

标签属性

| 属性 | 描述 | | --- | --- | | srcset | 包含不同设备使用的图像URL和图像大小的一组逗号分隔值 | | sizes | 在不同设备上指定图像大小 | | media | 定义了与媒体查询（ @media ）一起使用的样式表设置应用的媒体类型 |

用法提示

• 在使用 标签时，最好使用响应式图像。
• 使用图片压缩工具，减少文件大小，提高响应速度。
• 如果想要在加载图像前显示占位符，可以使用 Data URL 代替 src 属性。

HTML 标签是一种优化网站响应速度和提供更好用户体验的简单方法。它使您可以指定多个图像以供不同设备使用，并提高响应性。