标签必须包含作为兜底元素且置于末尾，仅用会导致图片不显示；按顺序匹配，media用于布局断点，srcset+sizes用于分辨率适配，type须显式声明，alt仅在上有效。
picture标签必须包裹source和img，不能只写source
很多人写 <picture></picture> 时只放 <source></source>，结果图片不显示——因为 <picture></picture> 是容器，浏览器会按顺序找第一个匹配的 <source></source>，但最终必须有一个 <img> 作为兜底。没有 <img>，整个结构就无效。
正确结构是：
<picture><source media="(min-width: 768px)" srcset="hero-desktop.webp" type="image/webp"><source media="(min-width: 768px)" srcset="hero-desktop.jpg" type="image/jpeg"><source srcset="hero-mobile.webp" type="image/webp"> @@##@@ </source></source></source></picture>
-
<source></source>按从上到下顺序匹配，遇到第一个满足条件的就停止，后续忽略 - 所有
<source></source>都不匹配时，才渲染<img src="hero-mobile.jpg" alt="Hero banner"> -
<img>必须存在，且必须是<picture></picture>的最后一个子元素 -
<img>的src不参与响应式切换，仅作降级使用
media和srcset别混用，优先用media控制断点，srcset控制分辨率
常见错误是把屏幕宽度判断全塞进 srcset（比如写 srcset="a.jpg 480w, b.jpg 768w" 却不配 sizes），结果在不同设备上加载错图。实际中，media 用于逻辑断点（如“桌面端用横幅图”），srcset + sizes 用于同一布局下的像素密度/视口宽度适配。
- 用
media="(min-width: 768px)"区分布局层级（PC / 移动） - 在同一个
<source></source>内，用srcset提供多尺寸 WebP/JPEG，再用sizes告诉浏览器“这个 source 在不同视口下大概占多少宽度” - 如果不用
media，只靠srcset+sizes，那一个<source></source>就够了；加了media就意味着你要为不同布局准备完全不同的图像资源
type属性不是可选的，WebP需显式声明，否则可能被忽略
Chrome 支持 WebP，但如果你只写 srcset="photo.webp" 而不加 type="image/webp"，Safari 或旧版 Edge 可能跳过该 <source></source>，直接走到下一个（甚至兜底 <img>）。浏览器靠 type 预判是否支持，而不是靠文件后缀。
- 必须为每个
<source></source>显式写type，哪怕看起来“多余” - WebP：写
type="image/webp"；AVIF：写type="image/avif"；JPEG/PNG 不用强制写（浏览器默认识别），但建议统一加上type="image/jpeg"或type="image/png"提高可读性 - 多个
<source></source>可以共用同一media，只要type不同，浏览器会选自己支持的那个
alt属性只能写在img上，source不接受alt
试图给 <source></source> 加 alt 属性毫无作用，还会让 HTML 校验失败。可访问性（a11y）和 SEO 依赖的是 <img> 的 alt，它代表整组 <picture></picture> 所表达的内容语义。
-
<img>的alt必须准确描述图像功能或信息，不能写“图片”“banner”这种无意义词 - 如果图纯装饰，用
alt=""（空字符串），不要删掉alt属性 -
<source></source>可以有media、srcset、sizes、type，但没有alt、title、loading等 img 特有属性
<picture></picture> 的解析是“一次性”的——它不会因为窗口 resize 重新评估 media，也不会动态切换已加载的 <source></source>。所以响应式图像逻辑必须在首次渲染时就决定好，后续变化靠 JS 监听或 CSS 媒体查询配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
