直接用 标签配 srcset 和 sizes 即可满足80%响应式图片需求，但需确保 sizes 准确反映css布局宽度，且多尺寸图片资源真实存在并合理覆盖断点；max-width: 100% 仅控制显示不优化加载，w 描述符比 x 更可靠， 仅用于艺术裁剪或格式降级，loading="lazy" 和 decoding="async" 是关键性能开关。
直接用 <img> 标签配 srcset 和 sizes 就能解决 80% 的响应式图片需求，不需要 JS、不用框架、浏览器原生支持——但前提是 sizes 值写对，且图片尺寸版本覆盖合理。
为什么只写 max-width: 100% 不够
它只控制显示大小，不改变加载体积。一张 2MB 的 1920w 图片在 iPhone 上仍会完整下载，浪费流量、拖慢首屏。真正的响应式是「按需加载」，不是「缩放显示」。
-
max-width: 100%+height: auto是基础兜底，必须加，但仅此而已无法优化性能 - 没有
srcset，浏览器永远只加载src指定的那张图，不管设备多小 - 写了
srcset却没写sizes，浏览器会按 100vw 猜测宽度，导致小屏下仍选大图（比如视口 375px，DPR=3，它可能选 1200w 图） - 所有图片资源必须提前生成好：480w、768w、1024w、1200w 这些文件得真实存在，不能靠后端动态生成（除非你有 CDN 规则）
srcset 用 w 描述符比 x 更可靠
x 描述符（如 2x）依赖设备像素比（DPR），但 DPR 并非唯一决定因素；w 描述符结合 sizes 让浏览器按布局宽度做选择，更可控、更符合实际渲染逻辑。
- 错误写法：
srcset="small.jpg 1x, large.jpg 2x"—— 在 DPR=2 的平板上可能加载large.jpg，但它实际只占 50vw，完全没必要 - 推荐写法：
srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"，再配精准sizes -
sizes必须反映真实 CSS 布局：如果图片在@media (max-width: 768px)下占满容器，而容器本身是90vw，那就该写(max-width: 768px) 90vw，不是拍脑袋填100vw - 现代构建工具（如 Vite +
vite-plugin-imagemin）可自动产出多尺寸图，但你要先定义好尺寸断点
什么时候必须用 <picture></picture> 而不是 <img>
两种场景绕不开：艺术方向裁剪（不同屏幕展示不同构图）和格式降级（优先 WebP，fallback 到 JPEG）。
- 艺术方向示例：移动端用竖版特写图，桌面端用横版全景图，
<source media="(max-width: 768px)" srcset="portrait.jpg"></source>和<source media="(min-width: 769px)" srcset="landscape.jpg"></source>配合使用 - 格式降级示例：
<source srcset="photo.webp" type="image/webp"></source>+<source srcset="photo.jpg" type="image/jpeg"></source>，浏览器自动跳过不支持的type -
<picture></picture>里的<img>是强制 fallback，必须存在，且不能省略src和alt - 不要为了“看起来高级”而滥用
<picture></picture>：纯分辨率适配用<img srcset>更轻量、兼容性更好（IE 不支持<picture></picture>，但支持srcset的 w 描述符）
loading="lazy" 和 decoding="async" 是易忽略的性能开关
它们不改变图片选择逻辑，但直接影响加载时机和主线程阻塞程度，尤其对瀑布流或长页面至关重要。
-
loading="lazy"让浏览器延迟加载视口外图片，但注意：它对<picture></picture>内的<source></source>无效，只作用于最终的<img> -
decoding="async"告诉浏览器用后台线程解码图片，避免阻塞渲染——Safari 15.4+、Chrome 78+ 支持，旧版 Safari 可忽略 - 懒加载不是万能的：SPA 中路由切换后动态插入的图片不会自动触发 lazy，得手动调用
img.loading = 'lazy'或用IntersectionObserver - 首屏关键图（比如 banner）应显式设
loading="eager"，避免被懒加载策略误伤
真正卡住人的从来不是语法记不住，而是 sizes 值是否真实匹配 CSS 布局宽度，以及多尺寸图是否真的按需生成并部署到位。调试时打开 Chrome DevTools 的 Network → Img 标签，看实际加载的是哪张图，比任何文档都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
