为什么需要 <picture> 标签？
在传统的 Web 开发中，我们使用 <img> 标签来显示图片。但是，随着设备分辨率和屏幕尺寸的多样化，使用单一的图片源往往会导致糟糕的用户体验：可能是加载了不必要的大文件，或者图片在小屏幕上显示不全。为此，HTML5 引入了 <picture> 标签，它提供了一种更为强大和灵活的现代图片解决方案。
本文将带您深入了解 <picture> 标签的三大核心优势：艺术指导、分辨率切换和格式选择。
核心优势一：艺术指导
<picture> 标签允许我们根据浏览器的视口大小来加载不同的图片。这意味着您可以根据屏幕的不同，展示图片的不同部分（裁剪）或者完全不同的图片。
例如，在桌面端展示一张宽阔的风景图，而在移动端则展示以人像为中心的特写图。这通过 <picture> 元素内部的 <source> 标签的 media 属性实现：
<picture> <!-- 当视口宽度大于 800px 时加载 wide.jpg --> <source srcset="https://www.ipipp.com/images/wide.jpg" media="(min-width: 800px)"> <!-- 当视口宽度在 400px 到 799px 之间时加载 cropped.jpg --> <source srcset="https://www.ipipp.com/images/cropped.jpg" media="(min-width: 400px)"> <!-- 默认加载 narrow.jpg（针对小于 400px 的视口） --> <img src="https://www.ipipp.com/images/narrow.jpg" alt="产品展示图"> </picture>
在这个例子中，浏览器会自动选择匹配当前环境的 media 条件的图片，从而实现在不同设备上的完美视觉呈现。这就是所谓的“艺术指导”。
核心优势二：分辨率切换
如今的智能手机往往拥有极高的像素密度（Retina 屏幕）。如果给所有设备都提供 4K 的图片，虽然清晰，但会浪费大量带宽；如果只提供低分辨率图片，高分辨率屏幕上的图片就会模糊。
<picture> 通过 sizes 和 srcset 属性完美地解决了这个问题。浏览器可以根据设备像素比（DPR）选择合适尺寸的图片：
<img srcset="https://www.ipipp.com/images/photo-320w.jpg 320w, https://www.ipipp.com/images/photo-480w.jpg 480w, https://www.ipipp.com/images/photo-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="https://www.ipipp.com/images/photo-800w.jpg" alt="河谷风景">
虽然上述代码使用 <img> 也可以实现，但将其与 <picture> 结合，可以同时实现艺术指导和分辨率切换，达到最佳优化效果。
核心优势三：现代图片格式的优雅降级
新的图片格式如 WebP 和 AVIF 在同等视觉效果下，体积远小于传统的 JPEG 和 PNG。但是，旧版浏览器（如 IE）并不支持这些新格式。<picture> 标签通过在 <source> 元素中指定 type 属性，让浏览器自动选择它懂得的第一个格式：
<picture> <!-- 如果浏览器支持 AVIF，则加载此图片 --> <source srcset="https://www.ipipp.com/images/photo.avif" type="image/avif"> <!-- 如果不支持 AVIF，尝试 WebP --> <source srcset="https://www.ipipp.com/images/photo.webp" type="image/webp"> <!-- 如果以上都不支持，回退到 JPEG --> <img src="https://www.ipipp.com/images/photo.jpg" alt="森林小径"> </picture>
这种方式允许开发者在支持现代格式的网站上提供更快的加载速度，同时又能在旧浏览器上保证基本的可用性。这是一个非常主流的性能优化实践。
使用 <picture> 标签的注意事项
必须包含 <img> 标签：<picture> 只是一个容器，真正让图片显示在页面上的还是内部的 <img> 标签。<img> 承担了实际渲染和提供
alt文本（无障碍访问）的职责。浏览器选择机制：浏览器会遍历 <source> 元素，选择首个满足条件（媒体查询和格式支持）的图片。如果都不满足，则使用 <img> 的
src属性。不要滥用：对于不需要裁剪、不需要多分辨率适应、且格式统一的简单图片，直接使用 <img> 标签完全可以满足需求，无需使用 <picture>。
总结
<picture> 标签是 Web 开发者应对现代多样化设备环境的利器。它让图片自适应变得前所未有的灵活：
通过
media实现艺术指导，保证图片内容展示的完整性。通过
srcset和sizes实现分辨率切换，优化带宽占用。通过
type属性实现格式切换，迎接更先进的图片压缩技术。
掌握 <picture> 标签，意味着你不再只是“呈现”一张图片，而是“智能地适配”用户可能使用的任何设备，从而极大地提升用户体验和网站性能。