srcset+sizes可替代多数降级逻辑，现代浏览器（chrome 38+、firefox 32+、safari 8.1+）支持稳定；ie11等不支持者自动回退至src兜底，无需冗余或js降级。
img 的 srcset + sizes 已经能替代大部分降级逻辑
现代浏览器对 srcset 和 sizes 的支持已非常稳定（Chrome 38+、Firefox 32+、Safari 8.1+），只要不需兼容 IE11 或旧安卓 WebView，就不用写额外的降级 JS 或冗余 <picture></picture> 套路。
常见错误是把简单响应式图片写成这样：
<picture><source media="(min-width: 1200px)" srcset="hero-1920.jpg"><source media="(min-width: 768px)" srcset="hero-960.jpg"> @@##@@ </source></source></picture>
其实等价写法只需一行 <img src="hero-480.jpg" alt="...">：
@@##@@
-
src是必填兜底，所有浏览器都认；srcset和sizes被忽略时自动回退到它 - 不需要
<picture></picture>就能实现分辨率 + 视口宽度双维度适配 - 服务端无需判断 UA，CDN 缓存更友好——同一 URL 对应同一资源策略
需要兼容 IE11？只加一行 object-fit polyfill 就够了
IE11 不支持 srcset，但会正常加载 src。真正卡住的是 object-fit（比如想让图片居中裁切）。这时候别写整套 JS 降级，直接用 object-fit: cover + object-fit-images 这个轻量 polyfill（仅 2KB）：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
@@##@@ <script src="https://cdn.jsdelivr.net/npm/object-fit-images@3.2.4/dist/ofi.min.js"></script>
- 它只在不支持
object-fit的浏览器里生效，其他浏览器完全无感 - 不干扰
srcset行为——IE11 用src，现代浏览器照常走srcset - 比手写
background-image+background-size更语义化，也避免 CSS 选择器污染
不要用 background-image 做“伪降级”
有人用 CSS 写 background-image 配合媒体查询“模拟”响应式图片，这看似精简，实则埋坑：
- SEO 友好性归零：搜索引擎无法提取
alt、无法识别图片语义 - 无障碍失效：屏幕阅读器读不到图片内容
- 打印样式失控：多数浏览器默认不打印
background-image - 无法触发懒加载：
loading="lazy"对 background 无效，得自己写 IntersectionObserver
真要极简，宁可只留一个 <img>，也别换成 background。
WebP 降级必须用 ，但可以只写两层
WebP 本身不支持渐进式加载或尺寸切换，所以必须用 <picture></picture> 实现格式降级。但没必要写三四个 <source></source>，两层足够：
<picture><source type="image/webp" srcset="photo.webp"> @@##@@ </source></picture>
- 现代浏览器优先加载
webp；不支持 WebP 的（如 Safari 13.1 之前、IE）直接跳过<source></source>，走<img src="hero-480.jpg" srcset="hero-480.jpg 480w, hero-960.jpg 960w, hero-1920.jpg 1920w" sizes="(min-width: 1200px) 1920px, (min-width: 768px) 960px, 100vw" alt="..."> - 不需要写
media属性——格式降级和尺寸无关，混在一起反而难维护 - 如果还要做尺寸适配，把
srcset和sizes放到<img src="avatar.jpg" style="max-width:90%">上即可，<source></source>保持最简
真正的精简不是删代码，而是让每行 HTML 都承担唯一且不可替代的作用。WebP 降级、视口适配、语义保障——这三件事各自有最优解，硬塞进一个标签或一段 JS，反而更重。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
