HTML picture 元素
许多页面只用一个 img 就足够了。当你需要为不同屏幕或格式提供不同文件时——桌面用宽幅裁切、手机用更紧的裁切，或用现代格式并附带 JPEG 后备——picture 元素可以提供多个候选项。浏览器会选出合适的一个；后备 img 则照顾旧客户端和无障碍访问。
picture 增加了什么
picture 是一个容器。在其中放置零个或多个 source 元素，以及恰好一个后备 img。每个 source 可以声明何时适用（media）或它是什么格式（type），以及文件位置（srcset）。img 不是可有可无的装饰：它是必需的后备，也是放置 alt 的位置。
直接回答
在 <picture> 内包裹一个或多个 <source> 元素以及一个后备 <img>。用 media 表达 viewport 条件，用 type 表达 WebP 等格式。img 仍然需要 src 和 alt。初学者可以先用同一张照片的两个宽度，再去收集各种现代格式。
用 media 做艺术指导
艺术指导（art direction）指的是为不同 viewport 提供不同裁切或布局——不仅仅是「同一张照片缩小一点」。source 上的 media 让你把宽布局和窄布局指向不同的文件。
带 media 与后备 img 的 picture
html<picture>
<source media="(min-width: 800px)" srcset="images/wide.jpg">
<source media="(min-width: 400px)" srcset="images/medium.jpg">
<img src="images/small.jpg" alt="Mountain trail at sunrise">
</picture>如何阅读 media 示例
- 常见教学写法会把
source从更具体的条件排到更宽泛的条件；浏览器仍会自行评估并选出匹配项 source上的srcset指向候选文件的 URL- 最终的
img在没有任何source匹配、或picture支持不完整时，提供src和alt - 练习时调整窗口大小，观察哪个文件合适——若要确认请求，可用 DevTools 的 Network 面板
用 type 选择格式
有时同一构图会以 WebP 提供给支持该格式的浏览器，并以 JPEG 提供给其他浏览器。type 告诉浏览器 MIME 类型，从而可以跳过不支持的格式，而不必先下载它们。
带 type 与后备 img 的 picture
html<picture>
<source type="image/webp" srcset="images/hero.webp">
<img src="images/hero.jpg" alt="Product hero on a clean desk">
</picture>把第一天的范围保持很小
第一次练习不必覆盖每一种格式和每一个断点。先让一个带有两个合理候选项的 picture 跑通，在 img 上保持诚实的 alt，然后再扩展。响应式 srcset 的密度描述符以及更高级的 sizes 属性，会在你逐步进阶时再学。
alt 留在 img 上
不要只把无障碍文本写在 source 上。屏幕阅读器和后备渲染都依赖 img。图像那一课里的装饰规则仍然适用：信息性图像需要真正的 alt；纯装饰可以用 alt=""。
picture 与单个 img
当一个文件就够用时，使用普通的 img。只有当你确实需要按条件使用不同文件时——viewport 艺术指导或格式切换——才使用 picture。没有真实需求的多余标记只会增加维护成本。
顺序与后备习惯
把 source 元素列在 img 之前。始终包含 img。如果忘记后备，某些浏览器和许多教学校验器会把该模式视为不完整。用窄窗口和宽窗口各测一次，也用可能不偏好你「花哨」格式的浏览器测一次。
在编辑器中练习
- 准备同一张照片的两个宽度（或两个清晰的练习文件）。
- 构建一个带有两个
sourcemedia 查询和一个后备img的picture。 - 调整浏览器窗口大小，观察哪个文件合适。
- 确认
alt仍在img上，而不是只写在注释里。 - 可选：在 JPEG
img上方添加带type="image/webp"的 WebPsource，并确认该模式在各处仍能显示图像。
常见错误
- 忘记后备
img - 只把
alt写在source上，而不是写在img上 - 在基础 media 模式尚未跑通前就堆叠过多格式
- 在单个优化后的
img就足够时仍使用picture - 裁切不一致，导致 viewport 跨越断点时让用户感到突兀
- 把
source上的srcset与链接的href混为一谈
小结
picture提供多个图像候选项；浏览器会选出其中一个- 使用
source加上必需的后备img media引导 viewport 选择；type引导格式选择alt留在img上- 从简单开始：两个宽度，或一种现代格式加上 JPEG 后备
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部