先记住这个答案
高 DPR 屏上，一个 CSS 像素可能对应多个设备像素。要让图清晰，就提供更多源像素，但保持原定 CSS 显示尺寸：设计宽 400px，可提供宽 400px 的 1x 图和宽 800px 的 2x 图。浏览器通过 srcset 选资源，不需要把 2x 文件显示成 800px 宽；那会让界面尺寸翻倍。
- DPR 是设备像素与 CSS 像素的比例
- 2x 图应保持原有 CSS 显示尺寸
srcset可提供 1x 和 2x 候选- 为图片预留宽高可减少跳动
同一显示区域放不同源文件
头像或图标若固定显示 80×80 CSS 像素，1x 文件可以是 80×80，2x 文件是 160×160。两者最终占的页面空间一样，只是后者在高密度屏上保留更多细节。
<!-- 两份文件的显示尺寸相同，只是源像素密度不同 -->
<img
src="avatar-80.png"
srcset="avatar-80.png 1x, avatar-160.png 2x"
width="80"
height="80"
alt="用户头像"
>浏览器根据设备与当前环境决定取哪个候选。两份文件都会按 80×80 CSS 像素显示；这里的 HTML 宽高属性还提前预留了布局空间，不会把 2x 文件显示成两倍大。
对于会随容器变宽的文章图，固定 1x、2x 也许不够灵活；使用宽度描述符和 sizes，让浏览器按预期显示宽度选择文件更合适。
清晰度与传输体积要权衡
2x 图宽高各翻倍，未经压缩优化时传输成本可能明显增加。并不是所有图片都值得提供很多密度档位，特别是大面积照片和低关注度装饰图。先看真实显示尺寸、压缩质量与目标网络。
为 <img> 提供固有 width、height 或 CSS aspect-ratio，能在资源下载前预留比例，减少页面跳动。高 DPR 候选只改变资源清晰度，不自动解决布局占位问题。
若图片会从 80px 缩到 40px，两个密度候选仍可用，但 1x 和 2x 是作者对候选资源密度的声明，不会随 CSS 显示宽度自动改写。不要在 CSS 里把头像强行拉到比文件分辨率更大，再期待 2x 描述符补出像素。检查清晰度时还要看最终渲染尺寸和浏览器缩放，而不是仅比较源文件名里的 1x、2x。
容易答错的地方
- 把 2x 文件按源像素宽度显示
- 源文件
800px宽不代表必须占800pxCSS 宽；若设计显示400px，应维持该显示尺寸。 - 以为 DPR 越高必须下载同倍率图片
- 浏览器可能根据网络、缩放和缓存做选择。提供合理候选即可，不要把 DPR 当成强制下载命令。
面试官还会怎么问？
1x 与 2x 描述符能和 w 混写吗？
同一 srcset 应按一种候选描述方式组织；固定显示尺寸可用密度描述符，变化尺寸用宽度描述符加 sizes。
图片 CSS 写 max-width: 100% 会怎样？
它防止图片超出容器，但还应检查最终 CSS 显示宽度，并据此准备足够分辨率的候选文件。
2x 图总像素数是两倍吗？
宽和高各两倍时，总像素数是四倍；编码文件大小不一定严格四倍。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。