<picture> 标签仅按 media 条件选图，需预设多构图源文件；<source> 必须置于 <img> 前、media 语法严格、断点互斥；<img> 是强制 fallback，须完整闭合并含 src 与语义 alt；srcset/sizes 与 media 各司其职，不可混用。
media 属性写错就全失效
常见错误是把 media 写在 <picture> 标签上（如 <picture media="(max-width: 768px)">），浏览器直接忽略；或者漏掉括号，写成 media="max-width: 768px" —— 静默失败，不报错也不加载对应图。
正确写法必须是：<source media="(max-width: 767px)" srcset="hero-mobile.jpg">，括号、单位（px）、空格都要严格匹配 CSS 媒体查询语法。
- 断点值要互斥：用
max-width: 767px和min-width: 768px，别写max-width: 768px和min-width: 768px，否则 768px 宽度会卡在第一条规则里，第二条永远不触发 -
<source>必须放在<img>之前，顺序颠倒（比如<img>在前、<source>在后）会导致所有<source>被跳过 - 浏览器线性扫描，遇到第一个为
true的media就停，后面全丢弃——所以顺序必须从宽到窄或从窄到宽，统一且互斥
img 是强制 fallback，不是可选装饰
<img> 不是摆设，漏掉、自闭合（<img />）、没写 src 或 alt，会导致图片区域空白，尤其在 Safari 和旧版 iOS 上表现明显。
必须写成完整闭合形式：<img src="hero-fallback.jpg" alt="企业总部大楼外景">。
立即学习“前端免费学习笔记（深入）”；
-
alt文本要语义准确，不能是 “banner1” 或空字符串（除非纯装饰，但这时该用 CSSbackground-image） - 推荐给
<img>也加srcset和sizes，尤其当 fallback 图也要适配 Retina 屏时 - 如果发现 Network 面板里所有
<source>请求都是 404 或blocked:mime-type，先检查路径和服务器 MIME 配置，别急着调media
srcset + sizes 和 media 是两层逻辑，别混用
media 控制“用哪一组图”（艺术方向），srcset+sizes 控制“这一组里选哪个分辨率版本”（DPR 或视口变化下的精细匹配）。两者分工明确，强行塞在一起反而失效。
sizes 必须写在 <img> 上，不是 <source>；漏写或语法错（比如单位缺失、逗号遗漏），浏览器会按默认 100vw 计算，小屏也可能加载大图。
- 例如：
<source media="(max-width: 480px)" srcset="hero-sm.jpg 1x, hero-sm@2x.jpg 2x">—— 这里srcset的1x/2x是给 DPR 用的，media是给断点用的，各管各的 - 若用
w描述符（如"hero-400w.jpg 400w, hero-800w.jpg 800w"），就必须配sizes，否则浏览器无法估算所需像素宽度 -
type属性用于格式降级（如 WebP → JPEG），应把现代格式<source>放前面，浏览器按顺序取第一个支持的
深色模式和动效要靠资源准备，不是靠标签
<source media="(prefers-color-scheme: dark)"> 确实能切暗色图，但前提是——你得提前导出一张对比度更高、阴影更柔和的 hero-dark.jpg。仅靠 CSS 滤镜反转原图，细节会糊、文字变难读。
同理，“炫酷动效”不是 <picture> 的责任：淡入、缩放过渡等动画统一加在 <img> 上；懒加载用 loading="eager"（首图）或 loading="lazy"（非首屏），再配合骨架占位防布局跳动。
- 为重要大图加
decoding="async"，避免解码阻塞渲染主线程 - 纯装饰性大图别塞进
<picture>，用 CSSbackground-image更轻量、更可控 - 真正容易被忽略的，是
<img>的width和height属性——设了能预留空间、防 CLS，哪怕只是占位用
