picture标签不省带宽，关键在media、sizes、srcset、type须与真实布局和服务器响应严格匹配；常见错误包括media缺括号、type与content-type不一致、sizes写死、断点重叠等。
picture 标签本身不节省带宽，它只提供选择权；真正省带宽的关键是：你写的 media、sizes、srcset 和 type 必须全部对得上真实布局和服务器响应。
为什么图片总加载兜底图（fallback）而不是响应式资源
这不是浏览器不支持，而是所有 <source></source> 都被跳过了。常见硬伤：
-
media缺括号：写成media="max-width: 768px"❌，必须是media="(max-width: 768px)"✅ -
type和服务器返回的Content-Type不一致：比如写type="image/webp"，但 Nginx 实际返回text/plain或image/jpeg（注意大小写、拼写、空格），Chrome 会标为blocked:mime-type -
sizes写成固定值如"100%"或"300px"❌，必须是媒体条件 + 宽度单位组合，例如sizes="(max-width: 767px) 100vw, 720px"✅ - 多个
<source></source>的media断点重叠，比如(max-width: 768px)和(min-width: 768px)，在 768px 宽度时行为未定义
如何让 sizes 真实反映 CSS 布局宽度
sizes 不是你“希望”的宽度，而是浏览器渲染前“预计占多少空间”。它必须和你的 CSS 媒体查询严格对齐：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 先写好 CSS：
@media (min-width: 768px) { .hero-img { width: 720px; } } - 再转
sizes：sizes="(max-width: 767px) 100vw, 720px"（单位统一，不混用vw和px） - 如果容器有
padding: 0 20px，视口宽 390px，则有效宽度 ≈ 350px，对应sizes="(max-width: 767px) 350px, 720px" - 没写
sizes？浏览器默认按100vw算——哪怕图只占 300px 宽，也可能拉下 1920w 图，纯属浪费
WebP/AVIF 回退必须按兼容性从高到低排列
浏览器从上到下匹配 <source></source>，遇到第一个 media 匹配且 type 受支持的就停止。顺序错了，高优格式永远不生效：
- 正确顺序：
<source type="image/avif" srcset="..."></source>→<source type="image/webp" srcset="..."></source>→<source type="image/jpeg" srcset="..."></source> - 同一
<source></source>的srcset中不能混用w和x描述符（例如"photo-400w.jpg 400w, photo@2x.jpg 2x"❌），Safari 可能整条忽略 -
<img>的srcset必须包含所有 fallback 组合（如photo@1x.jpg 1x, photo@2x.jpg 2x），它是 DPR=1 时的保底，也是老浏览器唯一入口 -
<img>的src属性不可省略，否则不支持srcset的浏览器（如 IE）直接空白
验证是否真生效的最快方式
别靠肉眼猜，用 Chrome DevTools 实锤：
- 打开
Network面板 → 刷新页面 → 看图片请求的文件名（不是 URL 参数） - 用
Device Toolbar切换设备（如 iPhone 12 DPR=3 vs Nexus 5 DPR=3），对比加载的是@1x还是@3x - 如果始终加载同一张图，大概率是：
<img>的srcset没写对，或所有<source></source>的media条件都未命中 - 真正复杂点不在 HTML 语法，而在资源准备：你得按比例生成 @1x / @2x / @3x 三套图，且每套都要适配不同断点下的尺寸——缺一档，DPR 或宽度切换就断档
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
