srcset中w值应覆盖各断点渲染宽度×dpr后的区间，按1.5倍安全系数生成（如320px→480w/720w/960w），避免间隔过大或冗余大图，且必须与css实际渲染宽度严格对齐。
srcset 里该生成哪些 w 值，不是按设计稿像素写
浏览器选图逻辑是：把 sizes 解析出的渲染宽度 × 设备 DPR，再从 srcset 中挑「≥ 该值且最接近」的 w 图源。所以 w 值不是照着 Figma 标注写，而是要覆盖关键断点下的「目标渲染宽度 × DPR」区间。
- 先实测各断点下图片容器的渲染宽度（DevTools → Computed → width），比如移动端 320px、平板 500px、桌面 768px
- 按 1.5× 安全系数准备候选：320px → 提供 480w、720w、960w；500px → 750w、1000w、1500w
- 避免间隔过大：比如只有 400w 和 1200w，中间 600–1100px 区间会全用 1200w，浪费带宽
- 别生成 1920w 这类“保底大图”——它大概率被小屏高 DPR 设备误加载，除非你真有 1920px 宽的容器
sizes 必须和 CSS 实际渲染宽度一致，不能靠猜
sizes 不是建议，是浏览器计算加载哪张图的唯一依据。它声明的是“这张图在当前视口下会渲染多宽”，单位只能是 vw、px、em，% 和 rem 都非法。
- 全宽卡片（左右边距 16px）：不能写
sizes="calc(100vw - 32px)"（calc()在sizes中不支持），得换算成近似值，如(max-width: 480px) 93vw - 栅格三列布局：间隙共 24px 时，每列 ≈
33vw，写成sizes="(max-width: 768px) 100vw, 33vw" - 固定最大宽
max-width: 800px; width: 100%：写成sizes="(max-width: 800px) 100vw, 800px" - 内联图标（
width: 24px）：直接写sizes="24px"，不用媒体查询
自动化生成图片文件时，别手动生成 hero-400w.jpg 这类命名
手动维护一堆带尺寸后缀的文件极易出错，也难同步更新。构建阶段应由工具统一处理：
- 用
sharp或imagemin插件，在打包时根据原始图自动裁切并输出指定 w 值版本，文件名可保留语义（如hero.jpg→ 输出hero-480.jpg、hero-720.jpg） - 生成的
srcset字符串应由模板或 JS 脚本注入，避免硬编码——尤其当 w 值随断点调整时，手动改易漏 - CDN 支持动态缩放（如 Cloudflare Images、Imgix）时，可只传原图，用 URL 参数生成不同尺寸，
srcset动态拼接即可 - 注意：所有生成图必须是同一构图、等比缩放，否则应改用
<picture></picture>+<source></source>处理艺术方向
为什么加了 srcset 还是加载了 src 的图
核心原因几乎总是 sizes 缺失或解析失败，导致浏览器退化为加载 src 或第一张 srcset 项。
- 检查控制台是否报错
Failed to parse 'srcset' value或sizes值语法错误（如括号与数值间缺空格、漏单位、用了%） - 打开 DevTools → Network → 切换设备模拟 → 刷新，看实际请求的是哪张图；若始终是
src指向的文件，说明响应式逻辑未触发 -
src必须存在且指向中等清晰度版本（如 800w），它是 IE、旧 WebView 的唯一兜底；别设成最小图（320w），否则老设备用户看到模糊图 - 某些低版本 Android WebView 会静默丢弃整个
srcset属性，src是唯一可靠入口
真正容易被忽略的是：sizes 值必须严格匹配 CSS 实际渲染结果，而不是布局意图；哪怕只差一个单位或空格，整个响应式选择逻辑就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
