picture标签本身不切换图片，仅将选择权交给浏览器；media属性必须写在source中且按从宽到窄顺序排列，首个匹配的source生效，全不匹配则回退至img的src。
<source> 的匹配逻辑和 <img> 的兜底，浏览器就会在加载阶段自动挑出最合适的那张。
media 属性必须写在 <source> 里，且顺序决定优先级
浏览器从上到下扫描 <source>，遇到第一个 media 匹配的就停，不会继续往下看。所以宽屏规则要放前面，窄屏兜底放后面：
- ✅ 正确：先
min-width: 1200px，再min-width: 768px，最后max-width: 767px - ❌ 错误：把
max-width: 767px放最前，小屏设备会永远卡在这条，后面的宽屏规则根本没机会触发 - ⚠️ 断点别重叠：比如
max-width: 768px和min-width: 768px在 768px 宽度时都为真，浏览器只认第一个，结果不可控 - 单位不能省：
768是无效媒体查询，必须写768px
sizes 必须写在 <img> 上，不是 <source>
sizes 告诉浏览器“这张图在页面中大概占多宽”，它不控制加载哪张图，而是帮浏览器结合 srcset 中的 w 描述符算出该加载多宽的源。这个属性只能出现在 <img> 标签上，写在 <source> 里会被忽略。
- 如果省略
sizes，浏览器默认按100vw算，小屏可能加载桌面尺寸图，浪费带宽 - 常见写法：
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"—— 对应移动端全宽、平板半宽、桌面固定比例 -
sizes值要和实际 CSS 布局一致；如果 CSS 里设了width: 300px，但sizes写成100vw，浏览器预估就偏了
srcset 用 w 还是 x？别混着写
srcset 里的描述符决定浏览器怎么选图：w 表示图片固有宽度（像素），配合 sizes 用；x 表示设备像素比，适合固定尺寸图标。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 想适配不同视口宽度下的渲染尺寸 → 用
w：如"hero-480w.jpg 480w, hero-960w.jpg 960w" - 想适配 Retina 屏等高 DPR 设备 → 用
x：如"icon@1x.png 1x, icon@2x.png 2x" - ⚠️ 同一个
srcset里不能同时出现w和x，否则整个值被忽略 -
type属性可声明 MIME 类型，比如type="image/avif"，浏览器跳过不支持的格式，无需 JS 判断
为什么图片没切换？先查这三处
开发时看到只加载一张图，大概率不是语法错，而是匹配逻辑或资源问题：
- Network 面板勾选 “Disable cache” 并硬刷新，排除缓存干扰
- 检查每个
<source>的srcset路径是否真实存在且返回 HTTP 200；404 时浏览器静默跳过，不会报错 - 确认服务器是否正确设置了图片 MIME 类型（如
image/webp），HTTP 404 可能是 MIME 不匹配导致的假 404 - 漏写
<img src="...">或src为空 → 整个<picture>渲染空白
真正容易被忽略的是：浏览器在首次加载时就完成了资源选择，之后窗口缩放不会重新触发切换；<picture> 不是运行时监听器，它只在 HTML 解析阶段起作用。需要动态响应 resize，得靠 JS 配合 loading="lazy" 或现代方案如 IntersectionObserver。
