响应式图片质量取决于浏览器能否可靠推导出图片渲染宽度并提供格式+尺寸双重适配能力；sizes必须严格匹配CSS布局、带单位且语法合法，缺之或错写则浏览器退化加载最大图。

直接给结论：响应式图片标签质量不取决于用了 还是 ，而在于是否让浏览器能**可靠推导出图片渲染宽度**，并提供**格式+尺寸双重适配能力**。没做到这点，再多标签嵌套也白搭。

为什么 sizes 属性必须写，且不能靠猜

浏览器加载图片时，先解析 sizes 得到“这张图在当前视口下会占多宽”，再结合设备 DPR 和 srcset 中的 w 值选资源。如果 sizes 缺失或写成 sizes="100vw" 这种笼统值，浏览器只能退回到保守策略——大概率加载最大图。

• sizes 必须匹配真实 CSS 布局逻辑，比如栅格中占 1/3 宽，断点在 768px，就该写 sizes="(max-width: 768px) 100vw, 33.33vw"
• 旧版 Edge 对 sizes 里空格敏感，(max-width:768px) 可以，(max-width: 768px) 会整条失效
• sizes 不支持 calc()，也不能用 CSS 变量，纯字符串媒体查询语法

的 顺序和 fallback 规则

不是叠加保险，而是按顺序执行“第一个匹配即停”。顺序错、漏 、type 写错，都会导致降级失败。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 必须从高优先级往低优先级排：WebP 在 JPEG 前，min-width 大的断点放前面（避免小断点拦截所有请求）
• 每个 必须带 media 或 type，二者都缺会被忽略
• 必须在 最末尾，且带 src 和 alt；它不是可选，是唯一渲染载体和兜底入口
• type="image/webp" 后跟的 必须真实存在，否则 fallback 失效

srcset 混用 w 和 x 描述符的后果

浏览器对 srcset 的解析是全或无：只要出现 1x 或 2x，整个属性就会被当作像素密度模式处理，忽略所有 w 值。结果就是只加载 src 或随机选一个，sizes 彻底失效。

• 同一 srcset 里只能用一种描述符：small.jpg 480w, medium.jpg 800w ✅；small.jpg 1x, medium.jpg 800w ❌
• 想兼顾分辨率和尺寸？用 分开控制：一个 用 media + srcset（w），另一个用 type + srcset（x）
• src 属性仍需保留，作为不支持 srcset 的老浏览器兜底

真正容易被忽略的点是：viewport meta 标签失效时，sizes 和 media 查询全乱套。哪怕标签写得再规范， 没在 顶部静态声明，后面所有响应式逻辑都跑偏。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！