<picture>标签不生效的首要原因是浏览器不支持或嵌套结构错误：IE全系不支持，Edge 12–17有srcset解析bug；必须确保<source>在<img>之前、<img>不可省略且含src与alt；media和type需同时满足且顺序从宽到窄；WebP需严格写type="image/webp"；srcset必须配合sizes使用。
picture 标签不生效？先确认浏览器是否支持并检查嵌套结构
绝大多数现代浏览器都支持 <picture>，但 IE 全系完全不支持，Edge 12–17 虽支持但存在部分 srcset 解析 bug。更常见的失效原因是内部标签顺序或属性缺失：必须把 <source> 放在 <img> 前面，且 <img> 是必需的 fallback，不能省略。
容易踩的坑：
-
<source>没有media或type属性时，会直接跳过匹配逻辑，导致始终加载<img> - 多个
<source>的media条件重叠时，浏览器按顺序取第一个匹配项，顺序错会导致高分辨率图被低分辨率条件截获 -
<img>的src和srcset仍会被解析（即使前面有匹配的<source>），所以<img>的src应设为最小屏或通用兜底图，避免浪费带宽
用 media 属性做屏幕宽度适配，注意单位和断点一致性
media 属性值是 CSS 媒体查询字符串，常见写法如 (max-width: 768px)、(min-width: 1200px)。关键不是“写了 media”，而是它是否覆盖了目标设备的真实视口宽度（viewport width），而非设备像素宽度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 断点数值要和项目 CSS 中的响应式断点保持一致，否则样式与图片尺寸错位
- 避免用
(max-device-width: ...)——它匹配的是设备物理宽度，多数移动端已不可靠；坚持用width（即 viewport 宽度） - 推荐从大到小排列
<source>，例如先写(min-width: 1440px)，再(min-width: 768px)，最后无 media 的<source>或直接靠<img>托底 - 测试时用 Chrome DevTools 的 device toolbar 切换 preset 后，手动拖动窗口宽度，观察 Network 面板中实际加载的图片文件名
想加载 WebP 但 Safari 不认？type 属性必须严格匹配 MIME 类型
<source type="image/webp"> 是启用格式切换的关键，但 Safari 直到 14.1 才开始支持 WebP，且早期版本对 type 属性校验极严：哪怕写成 image/webp;（多一个分号）或 image/WEBP（大小写混用），都会忽略该 <source>。
安全做法：
- WebP 的
type必须为image/webp，全小写、无空格、无分号 - 为兼容旧 Safari 和 Firefox，总要在最后一个
<source>后跟一个<img src="xxx.jpg">，且src指向 JPEG/PNG 等通用格式 - 不要依赖
<source type="image/avif">单独使用——AVIF 在 Safari 16.4+、Chrome 109+ 才稳定，生产环境建议 WebP + JPEG 双轨，AVIF 作为可选增强
srcset + sizes 配合 picture 使用时，sizes 不能丢
当 <source> 带 srcset（如 srcset="small.jpg 1x, small@2x.jpg 2x"）时，若没配 sizes，浏览器无法知道该图在页面中占多宽，就会默认按 100vw 计算，可能导致高清屏下仍选低分辨率图。
典型写法示例：
<picture>
<source
media="(min-width: 1200px)"
srcset="hero-1440w.webp 1x, hero-2880w.webp 2x"
sizes="1440px"
type="image/webp">
<source
media="(min-width: 768px)"
srcset="hero-768w.jpg 1x, hero-1536w.jpg 2x"
sizes="768px">
<img
src="hero-320w.jpg"
srcset="hero-320w.jpg 1x, hero-640w.jpg 2x"
sizes="100vw"
alt="hero">
</picture>
注意：sizes 值是字符串，不是 CSS；它告诉浏览器“这张图在对应 media 下大概占多少视口宽度”，浏览器据此从 srcset 中挑最接近的源。漏掉 sizes，srcset 的密度描述（2x）就基本失效。
复杂点在于：不同 <source> 的 sizes 值可能不同，且需与 CSS 中该图片容器的实际宽度表现一致——这点最容易被忽略，也是真机上图片模糊或带宽浪费的根源。
