移动端高清图适配关键在于用srcset配合x描述符匹配设备像素比（DPR），如icon.png 1x, icon@2x.png 2x；src为必填降级项，width/height防布局偏移，sizes在此场景下应省略以免误触发w匹配模式。
移动端高清图适配 Retina 屏，关键不是堆高分辨率图片，而是让浏览器知道“这张图该按什么密度加载”。srcset 配合正确的描述符和必要属性，才能真正触发 2x/3x 图加载。
用 x 描述符直接匹配设备像素比（DPR）
这是最直白、最适合图标、按钮、头像等固定尺寸小图的方式。浏览器读取设备 DPR（比如 iPhone 是 2 或 3），自动选对应后缀的图：
-
写法示例：
<img src="icon.png" srcset="icon.png 1x, icon@2x.png 2x, icon@3x.png 3x" width="24" height="24" alt="设置"> -
注意点：src 是降级兜底，必须存在；1x/2x/3x 是密度标识，不是文件名规则——
icon@2x.png文件本身得是 48×48 像素，否则放大后依然模糊 - 别漏 width/height：防止图片加载时布局跳动（layout shift），尤其在列表或卡片中很影响体验
sizes 属性在这里不是必须的
当只用 x 描述符时，sizes 可以省略。浏览器不看布局宽度，只看当前设备 DPR，直接匹配 1x、2x 或 3x 资源。加了 sizes 反而会切换成 w 匹配模式，导致 2x 图不生效——这是高频翻车点。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 错例：
srcset="icon.png 1x, icon@2x.png 2x" sizes="24px"→ 浏览器忽略 2x，按宽度逻辑选图 - 对例：
srcset="icon.png 1x, icon@2x.png 2x"→ DPR=2 的手机直接加载 icon@2x.png
实际部署建议
不是所有图都要做 3x。多数场景只需覆盖主流设备：
- 图标类（
- 横幅/Banner 类大图：改用 w 描述符 + sizes，按布局宽度选图更省流量
- 验证是否生效：用 Chrome DevTools → Network 标签，刷新并勾选 “Disable cache”，看加载的是哪张图；或在 iPhone 真机上用 Safari 连接 Web Inspector 查看资源请求
核心就一条：x 描述符管设备密度，w 描述符管布局宽度；Retina 小图适配，认准 x，别加 sizes，图尺寸对得上，效果就稳了。
