必须带src属性，因为浏览器不支持<picture>时会忽略整个标签块，但内部<img>仍可渲染；若缺src则无图显示、触发onerror，而alt缺失会损害可访问性和SEO。
为什么 必须带 ![针对多屏适配的HTML图像元素多源配置指南]()
，且不能省略 src 属性
浏览器不支持 <picture> 时（比如老旧 IE 或某些邮件客户端），整个 <picture> 块会被忽略，但 <img> 仍会渲染——前提是它有 src 和 alt。漏写 src 会导致无图、空白、甚至触发 onerror，而空 alt="" 是可接受的（尤其装饰性图），但缺失 alt 会损害可访问性和 SEO。
常见错误现象：
-
<picture><source srcset="a.webp" type="image/webp"></picture>—— 没有<img>，所有浏览器都看不到图 -
<img alt="logo">—— 缺src，控制台报Failed to load resource: net::ERR_INVALID_URL
media 属性写法错位：断点值 vs 设备像素比
<source> 的 media 只处理媒体查询（如宽度、方向），不处理分辨率适配；后者该交给 srcset + x 描述符。混用或错放会导致浏览器跳过匹配、降级到 <img> 的默认图。
正确分工：
立即学习“前端免费学习笔记（深入）”；
-
media="(min-width: 768px)"→ 控制「在平板及以上才加载这张图」 -
srcset="small.jpg 1x, small@2x.jpg 2x"→ 控制「同一断点下，按设备 DPR 加载不同清晰度版本」 - 错误写法：
<source srcset="img@2x.jpg" media="(min-resolution: 2dppx)">—— 多数现代浏览器已弃用min-resolution，应优先用srcset+x
srcset 与 sizes 配合失效的三个典型原因
sizes 不是“指定图片宽高”，而是告诉浏览器：“在某个视口条件下，这张图将被渲染成多宽”。如果 sizes 值和实际布局不一致，浏览器选错源文件，小屏可能加载大图，大屏反而模糊。
容易踩的坑：
-
sizes="100vw"写死，但实际图容器被 padding/margin 挤压，真实宽度远小于视口 —— 浏览器误判，选大图 -
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 300px"中的300px是固定值，但未加单位（如写成300）—— 解析失败，回退到100vw - 没写
sizes，仅靠srcset="a.jpg 400w, b.jpg 800w"—— 浏览器无法知道“当前环境下该图占多宽”，只能猜，默认按100vw算，常导致浪费带宽
WebP / AVIF 图片 fallback 的兼容性陷阱
用 type="image/webp" 或 type="image/avif" 做格式判断时，浏览器只看 MIME 类型是否原生支持，不校验文件内容。一旦服务端返回了错误的 Content-Type（比如 WebP 文件被当成 image/jpeg 发送），对应 <source> 就永远不生效。
实操建议：
- 用
curl -I https://xxx.jpg检查响应头中Content-Type是否匹配<source>的type - 不要依赖单一格式 fallback：优先用 WebP + JPEG 双源，AVIF 当前仍需谨慎（iOS 16.4+ 才支持，Android Chrome 91+）
- 避免嵌套：一个
<source>只声明一种type，多个格式用多个<source>并列，顺序从新到旧
真正难的不是写对语法，而是让 sizes 值精确反映 CSS 布局的实际占用宽度——这要求你清楚知道每个断点下容器的 margin/padding/border 和 flex/grid 分配逻辑。稍有偏差，srcset 就形同虚设。
