<picture>不可替代，因其支持艺术指导——可按屏幕尺寸切换不同构图（如桌面横图、手机竖版特写），而<img>+srcset仅能切换分辨率，无法改变裁剪与焦点。
网页头部大图必须用 <picture>，而不是只靠 max-width: 100% 或 srcset 单独撑场面。否则在小屏上拉伸模糊、大屏上带宽浪费、中屏上构图跑偏，三者必占其二。
为什么 <img> + srcset 不够用？
头部图的核心矛盾是「艺术方向」（Art Direction）——不是单纯缩放，而是要换裁剪、换焦点、甚至换构图。比如桌面端展示全景横图，移动端只保留人脸区域的竖版特写。srcset 只能告诉浏览器“这张图有 480w / 800w / 1200w 三个版本”，但它无法指定“在 sizes 也只描述宽度占比，不控制内容取舍。
-
srcset+sizes适合同一构图下的分辨率切换（如hero@1x.jpg和hero@2x.jpg） - 头部图几乎总是需要不同断点下的不同 视觉重点，这就绕不开
<picture> - 如果硬用
<img>配object-fit: cover+object-position，只能微调焦点，无法解决窄屏下关键人物被切掉的问题
<picture> 的 <source> 必须按真实布局断点写
很多开发者直接抄示例里的 (max-width: 768px)，但你的 CSS 布局断点可能实际是 640px 或 920px。一旦 <source> 的 media 和你 Grid/Flex 容器的响应式规则不一致，浏览器就会选错图。
- 先确认你头部容器的断点：比如用
@media (max-width: 639px)切换为移动布局，那么<source>的media就得写成(max-width: 639px)，不能凑整 -
<source>的type属性必须和实际文件 MIME 类型严格匹配，type="image/webp"却给了.jpg路径，该<source>直接被跳过 - 所有
<source>必须在<img>标签之前，顺序错一个，后续全部失效
sizes 在 <picture> 内仍需保留
别以为用了 <picture> 就可以删掉 <img> 上的 sizes。它仍是浏览器计算“该加载多大尺寸的 WebP/JPEG 回退图”的依据，尤其当某个 <source> 因格式不支持而降级时。
立即学习“前端免费学习笔记（深入）”；
- 例如桌面端
<source media="(min-width: 640px)" srcset="hero-desktop.webp" type="image/webp">失败后，会 fallback 到<img>的src，此时浏览器仍要用sizes去匹配srcset中对应宽度的 JPEG 版本 -
sizes值必须反映真实渲染宽度：如果头部在桌面端占满视口，就写100vw；如果被两侧 sidebar 挤成 70% 宽，就得写70vw，不能拍脑袋填50vw - 不要在
sizes里用calc()或 CSS 变量——它只接受字面媒体查询语法
WebP/AVIF 回退链必须手动验证
现代格式图片虽小，但旧版 Safari、部分安卓 WebView 仍不支持 image/avif。仅靠 <source type="image/avif"> + <source type="image/webp"> + <img> 不等于万事大吉——你需要真机或模拟器逐个测试 fallback 是否触发，以及最终加载的是哪一张。
- Chrome DevTools 的 Network 面板里，右键图片 → “Open in new tab”，看 URL 是不是你预期的 WebP 路径；如果不是，说明前面某个
<source>被错误匹配或 MIME 类型写错 - 在 iOS 15.7 真机上打开，检查是否加载了
.jpg回退图；若空白，大概率是<img>的src路径 404 或 CORS 阻止了加载 -
<img>的crossorigin属性建议显式设为anonymous，否则某些 CDN 返回的图片可能因跨域限制无法被 Canvas 复用（比如后续要做动态水印）
最易被忽略的一点：头部图的 <picture> 必须是语义化结构的一部分，不能包在 <div class="header-bg"> 里再用 background-image 模拟——那样既无法 SEO，又丢失 alt 文本，还让屏幕阅读器完全感知不到这张图的存在。
