picture 标签用于根据不同的设备特性加载最佳图片资源，解决 img 标签的局限性。1. 它支持根据不同媒体查询选择图片；2. 可依据浏览器支持格式（如 webp、avif）加载对应资源；3. 实现艺术方向，即不同屏幕尺寸展示不同内容的图片；4. 配合 srcset 与 sizes 属性精确控制响应式加载；5. 提供 img 标签作为后备方案以确保兼容性；6. 使用时需注意提供完整资源、合理设置 media、测试兼容性并避免过度优化。
picture 标签允许你根据不同的屏幕尺寸、分辨率或设备特性，加载不同的图片资源。它提供了一种更灵活、更语义化的方式来处理响应式图片，优于传统的 img 标签。
响应式图片加载的核心在于根据用户的设备和网络环境，提供最佳的图片资源。picture 标签通过 source 元素指定不同的图片资源，浏览器会根据 media 属性选择最合适的图片。
为什么需要 picture 标签？img 标签不够用吗？
img 标签在简单的响应式图片场景下可以配合 CSS 的 srcset 属性使用，但它存在一些局限性。例如，img 标签无法根据不同的图片格式（如 WebP 或 AVIF）进行选择，也无法处理艺术方向（Art Direction）的问题，即在不同屏幕尺寸下裁剪或呈现不同的图片内容。picture 标签则可以很好地解决这些问题。
立即学习“前端免费学习笔记（深入）”；
picture 标签的基本结构和属性
一个基本的 picture 标签结构如下：
<picture> <source media="(max-width: 600px)" srcset="image-small.jpg"> <source media="(max-width: 900px)" srcset="image-medium.jpg"> <img src="image-large.jpg" alt="描述图片的内容"> </picture>
-
picture标签: 容器标签，用于包裹所有的source和img标签。 -
source标签: 指定不同的图片资源。-
media属性: CSS 媒体查询，定义何时使用该source标签指定的图片。 -
srcset属性: 指定图片资源的 URL。可以指定多个 URL，并用逗号分隔，每个 URL 后面可以跟一个宽度描述符（如300w）或像素密度描述符（如2x）。 -
type属性: 指定图片的 MIME 类型，例如image/webp。这允许浏览器根据支持的图片格式进行选择。
-
-
img标签:picture标签的后备方案。如果浏览器不支持picture标签，或者没有匹配的source标签，则会加载img标签指定的图片。img标签必须包含src和alt属性。
如何使用 picture 标签实现艺术方向？
艺术方向指的是在不同的屏幕尺寸下，呈现不同的图片内容，以达到最佳的视觉效果。例如，在小屏幕上裁剪图片，突出重点内容。
<picture> <source media="(max-width: 600px)" srcset="image-small-cropped.jpg"> <source media="(min-width: 601px)" srcset="image-large.jpg"> <img src="image-large.jpg" alt="描述图片的内容"> </picture>
在这个例子中，当屏幕宽度小于等于 600px 时，会加载裁剪后的 image-small-cropped.jpg 图片，否则加载 image-large.jpg 图片。
如何使用 picture 标签选择不同的图片格式？
现代浏览器支持多种图片格式，如 WebP 和 AVIF，它们通常比 JPEG 和 PNG 具有更好的压缩率。可以使用 picture 标签根据浏览器支持的格式选择最佳的图片资源。
<picture> <source type="image/webp" srcset="image.webp"> <source type="image/avif" srcset="image.avif"> <img src="image.jpg" alt="描述图片的内容"> </picture>
浏览器会按照 source 标签的顺序尝试加载图片。如果浏览器支持 WebP 格式，则加载 image.webp；如果不支持 WebP 但支持 AVIF，则加载 image.avif；如果两种格式都不支持，则加载 image.jpg。 注意 type 属性是必要的，浏览器需要它来判断是否支持该格式，否则会下载所有图片。
sizes 属性在 picture 标签中的作用
sizes 属性与 srcset 属性配合使用，可以更精确地控制图片的加载。sizes 属性定义了图片在不同屏幕尺寸下所占据的宽度。
<img
srcset="image-small.jpg 320w,
image-medium.jpg 480w,
image-large.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="image-large.jpg" alt="描述图片的内容">在这个例子中，sizes 属性告诉浏览器：
- 当屏幕宽度小于等于 320px 时，图片占据 280px 的宽度。
- 当屏幕宽度小于等于 480px 时，图片占据 440px 的宽度。
- 否则，图片占据 800px 的宽度。
浏览器会根据 sizes 属性和 srcset 属性，选择最合适的图片资源。
使用 picture 标签的注意事项
- 确保提供所有必要的图片资源，包括不同尺寸和格式的图片。
- 使用合适的
media属性，确保在不同的屏幕尺寸下加载正确的图片。 - 使用
alt属性为img标签提供描述性文本，这对于 SEO 和可访问性非常重要。 - 测试你的响应式图片加载方案，确保在不同的设备和浏览器上都能正常工作。
- 避免过度优化，不要为了追求极致的性能而牺牲用户体验。
picture 标签的兼容性如何？
picture 标签在现代浏览器中得到了广泛支持。对于不支持 picture 标签的旧浏览器，可以使用 polyfill 来提供兼容性。例如，可以使用 picturefill.js 这个 polyfill。
总结
picture 标签是一个强大的工具，可以让你更灵活、更语义化地处理响应式图片。通过使用 picture 标签，你可以根据不同的屏幕尺寸、分辨率和设备特性，提供最佳的图片资源，从而提升网站的性能和用户体验。 掌握 picture 标签的使用方法，对于前端开发者来说至关重要。
