用 srcset + sizes 配合 是最可控、兼容性最好的响应式图片方案；css width:100% 无法解决 html 解析阶段提前请求大图的问题，而 srcset 告知可选资源，sizes 基于媒体条件声明渲染宽度，使浏览器能预判并加载匹配尺寸的图片。
直接说结论：用 srcset + sizes 配合 <img> 是目前最可控、浏览器支持最好的响应式图片方案，不需要 JS，也不依赖第三方库。
为什么不能只靠 CSS width: 100%？
CSS 只能控制图片显示尺寸，但浏览器在 HTML 解析阶段就已发起图片请求——此时还不知道最终渲染宽度。结果就是：小屏手机可能加载了 2000px 宽的原图，浪费带宽又拖慢首屏。
关键点在于：必须让浏览器在下载前就知道“这张图在当前设备/布局下大概会显示多宽”，srcset 和 sizes 就是干这个的。
-
srcset告诉浏览器“我准备了哪些尺寸的图”（比如"photo-400w.jpg 400w, photo-800w.jpg 800w"） -
sizes告诉浏览器“在不同视口宽度下，这张图会占多少 CSS 像素宽”（比如"(max-width: 768px) 100vw, 50vw"） - 浏览器根据两者计算出“需要加载哪个
w值最匹配”，再发起对应资源请求
sizes 的写法最容易出错
很多人把 sizes 写成固定值（如 sizes="50vw"），结果在小屏上还是加载大图。它必须是**条件表达式**，和实际 CSS 布局对齐。
常见错误现象：sizes="100vw" 看似安全，但如果图片被父容器限制为 max-width: 600px，在桌面端仍会加载远超所需的宽图。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 先写 CSS，确认图片在各断点下的实际渲染宽度（比如媒体查询后是
width: 100%或width: 300px） - 再把该宽度转成
sizes表达式：用(media condition) width组合，最后补一个默认值 - 示例（对应移动端全宽、桌面端半宽）：
sizes="(max-width: 768px) 100vw, 50vw" - 如果用了 rem/em 单位，
sizes中也得换算成 vw 或 px，浏览器不理解 rem
srcset 中的 w 单位不是屏幕像素比
photo-800w.jpg 800w 的 800w 指的是“这张图的固有宽度是 800 CSS 像素”，不是“给 2x 屏用”。浏览器会结合设备像素比（dpr）和 sizes 计算所需物理像素总量。
比如 iPhone 13（dpr=3）在 sizes="50vw" 且视口宽 390px 时，需要的渲染像素 = 390 × 0.5 × 3 ≈ 585 物理像素 → 浏览器倾向选 800w 图而非 400w 图。
- 提供 1x、2x、3x 密度的图不是必须的；重点是覆盖「渲染宽度 × dpr」的区间
- 推荐梯度：400w / 800w / 1200w / 1600w（覆盖从手机到大屏 2x 设备）
- 避免只提供 1000w 和 2000w 两个档位——中间缺口会让浏览器被迫降级或升级
- 不要混用
x和w（如srcset="a.jpg 2x, b.jpg 1200w"），行为不可控
兼容性与 fallback 处理
IE 和旧版 Safari 不支持 srcset/sizes，但它们会忽略这两个属性，退回到 src。所以 src 必须存在，且应设为中等尺寸（如 800w）图，兼顾加载速度与清晰度。
更稳妥的做法是加 <picture></picture> 包裹，但仅当需要格式切换（如 WebP + JPEG fallback）或艺术方向裁剪时才值得用——多数场景纯 <img> 更轻量、更易维护。
- 检查是否生效：Chrome DevTools → Network 标签页，看图片请求的 URL 是否随窗口缩放变化
- 注意：服务端压缩、CDN 缓存策略会影响实际加载效果，
srcset选对了，后端没配好照样加载大图 - 如果项目用构建工具（Webpack/Vite），记得配置图片处理插件生成多尺寸版本，别手动传
真正难的不是写对语法，而是把 sizes 和你实际 CSS 布局的宽度逻辑对齐——这里卡住的人最多，调试时建议先在控制台打印 getBoundingClientRect().width 看真实渲染宽度，再反推 sizes 表达式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
