srcset + sizes 是浏览器原生响应式图片方案，现代浏览器自动选图，ie11 回退 src；ie9–10 需用 picture + media 实现 dpr 适配；禁用 background-image 做降级；js 仅用于网络偏好等特殊场景。
img 的 srcset + sizes 已经能解决大部分降级需求
浏览器原生支持的响应式图片机制，比手写 JavaScript 降级更可靠、更轻量。只要正确设置 srcset 和 sizes，现代浏览器会自动选择最匹配的资源，低版本浏览器（如 IE11）则回退到 src——这个“降级”是内置行为，不用额外代码。
常见错误是只写 srcset 不配 sizes，导致 DPR 判断失效或始终加载大图。实际使用时注意：
-
sizes值必须是媒体条件 + 宽度描述，比如(max-width: 768px) 100vw, 50vw，不能只写100vw - 所有
srcset中的宽度描述（如320w）要和真实图片文件的实际像素宽一致，否则缩放失真 - IE11 及更早版本不支持
srcset，但会忽略它，直接加载src；无需 polyfill，除非你还要支持 IE9/10
需要兼容 IE9–10？用 picture + fallback src 就够了
这两个版本支持 <picture></picture> 但不支持 srcset 的 w 描述符，所以得换种写法。核心是把分辨率适配逻辑从 srcset 搬到 <source></source> 的 media 和 srcset 组合上。
示例：
<picture><source media="(min-resolution: 2dppx)" srcset="logo@2x.png"><source media="(min-resolution: 1.5dppx)" srcset="logo@1.5x.png"> @@##@@ </source></source></picture>
这里的关键点：
- IE9–10 识别
<picture></picture>，但只执行最后的<img src="logo.png" alt="logo">，所以src必须是可用的兜底图 -
min-resolution在 IE 中对应-ms-high-contrast等私有前缀，但实际测试发现 IE9–10 对min-resolution的解析很弱，更稳妥的是用media="(min-width: 0px)"配合 JS 动态切换——不过那已超出“精简”范畴 - 如果只做 DPR 降级（非尺寸响应），
<picture></picture>写法比 JS 方案少 10+ 行代码，且无运行时开销
别用 background-image 做响应式图片降级
CSS 的 background-image 看似能用媒体查询控制，但它无法触发浏览器的图片预加载、不参与 LCP 计算、alt 文本不可访问，而且在打印、阅读模式、禁用 CSS 场景下完全消失——这不是降级，是丢功能。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
如果你看到类似这样的代码：
.hero { background-image: url(logo-small.png); }
@media (min-width: 768px) { .hero { background-image: url(logo-large.png); } }
请立刻替换为 <img> 或 <picture></picture>。唯一可接受的例外是纯装饰性图片（aria-hidden="true" + role="presentation"），但那就谈不上“降级”了。
JS 降级方案只在极少数场景必要
比如你要根据网络类型（navigator.connection.effectiveType）或用户偏好（prefers-reduced-data）动态加载图片，或者服务端根本没提供多尺寸资源，只能靠 JS 拼 URL。这时候才轮到 JS 出场。
但务必遵守两点：
- 用
loading="lazy"配合IntersectionObserver，别一进页面就全量请求 - 降级逻辑必须写在
<img>的data-src或data-srcset上，而不是直接改src——否则首屏会触发两次加载（一次空 src，一次 JS 设置后） - 检查
HTMLImageElement.naturalWidth是否为 0 来判断是否加载失败，再触发 fallback，而不是靠 timeout 猜
真正需要手写 JS 降级的项目不到 5%，多数时候是构建流程或 CDN 配置没跟上，优先查 webpack 的 image-minimizer-webpack-plugin 或 Cloudflare Image Resizing 是否启用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
