用 srcset + sizes 是最可控、兼容好、不依赖 JS 的响应式位图图标方案；SVG 图标应内联或用 <use>，禁用 srcset。需按设计稿精确匹配 sizes 断点与 srcset 中 w 值，且必须设置 width/height 防布局偏移。
直接说结论：用 srcset + sizes 是目前最可控、兼容性好、不依赖 JS 的响应式图标方案；但“图标”二字容易误导——它只适用于位图（.jpg / .png），SVG 图标应优先用内联或 <use>，别硬套 srcset。
什么时候该用 srcset + sizes 而不是 <picture>
你手上的是一组尺寸不同、但构图完全一致的位图图标（比如 logo、按钮 icon、用户头像缩略图），目标是：小屏加载小图省流量，大屏/高 DPR 屏加载大图保清晰。这时 srcset + sizes 就够了。
以下情况别用它：
- 需要为移动端裁剪特写（比如桌面版全景头像、手机版只显示脸部）→ 改用
<picture>+<source media> - 想优先加载
.webp但降级到.png→<picture>的type属性更直接 - 图标本身就是 SVG → 直接写成内联 SVG 或用
<img src="icon.svg">，它天生矢量、缩放无损，srcset反而画蛇添足
srcset 里用 w 描述符，不是 x 描述符
图标通常嵌在流式布局中，宽度随容器变化（比如 navbar 中的 logo 宽度是 80px，但在移动端可能撑满 100vw）。此时必须用 w（宽度描述符），让浏览器根据渲染宽度 + DPR 自动选图；用 x（像素密度描述符）只适用于固定 CSS 宽高的场景（如 width: 48px; height: 48px;），灵活性差且易错。
常见错误：
- 写了
srcset="logo-1x.png 1x, logo-2x.png 2x"却没设width和height→ 浏览器无法判断“1x 对应多大物理空间”，选图失效 - 混用
w和x在同一个srcset里 → 大部分浏览器会忽略整个属性 -
srcset中图片实际宽度和标注的w值严重不符（如标200w但图只有 100px 宽）→ 浏览器按比例放大导致模糊，且无法校正
正确写法示例：
<img
src="logo-200.png"
srcset="logo-200.png 200w,
logo-400.png 400w,
logo-800.png 800w"
sizes="(max-width: 480px) 90vw,
(max-width: 768px) 50vw,
200px"
alt="公司 Logo">
sizes 的值必须覆盖所有视口，且最后一项不能带媒体条件
sizes 不是“建议”，而是告诉浏览器：“这张图在当前布局下，**将占据多宽的 CSS 空间**”。浏览器拿这个宽度乘以设备 devicePixelRatio，再从 srcset 中挑最接近的图源。漏掉某段视口，或最后一项写了 (max-width: 1200px) 这种没配宽度的条件，会导致回退到 src 或选错图。
关键规则：
- 每个逗号分隔项必须是“媒体条件 + 空格 + 长度值”，例如
(max-width: 600px) 100vw - 最后一项不能有媒体条件，它是默认 fallback，例如
240px或50vw - 长度值推荐用
vw或固定px，避免用%（父容器宽度不确定时，%无法解析） - 如果图标始终固定宽度（如
32px × 32px），sizes可直接写"32px"，不用媒体查询
容易被忽略的细节：width / height 属性和懒加载
即使用了 srcset + sizes，如果没设 width 和 height，页面加载时图标区域高度为 0，内容会跳动；尤其在瀑布流或 flex 布局中，这种偏移更明显。
另外，现代浏览器对 loading="lazy" 和 srcset 兼容良好，但注意：
- 懒加载仅对“进入视口前”的图片生效，首屏图标建议不加
loading="lazy" - 某些旧版 iOS Safari 对
loading="lazy"+srcset组合有 bug，若需极致兼容，首屏图标可去掉loading属性 -
width/height值应填 CSS 渲染尺寸（即sizes在当前断点下计算出的宽度），不是原始图宽高
最终稳妥写法：
<img
width="200"
height="50"
src="logo-200.png"
srcset="logo-200.png 200w,
logo-400.png 400w,
logo-800.png 800w"
sizes="(max-width: 480px) 90vw,
(max-width: 768px) 50vw,
200px"
alt="公司 Logo">
真正难的不是写对语法，而是把设计稿里的“图标在各断点下的 CSS 宽度”准确翻译成 sizes 列表，并确保每张 srcset 图片的实际像素宽度和标注的 w 值严格一致——差 1px 都可能导致高 DPR 设备加载不足或过载。
