有一种很常见的前端问题：图片文件单独打开很清晰，但放到网页某个容器里就显得发虚；如果把图片做成“容器尺寸的两倍”，又突然清晰了。这个现象通常不是图片坏了，而是图片实际像素、CSS 显示尺寸、设备像素比 DPR 和浏览器缩放算法之间没有匹配好。
一句话概括：网页里图片清不清晰，取决于“这个显示位置需要多少真实像素”和“实际给浏览器多少图片像素”是否匹配。
先区分两个尺寸：CSS 像素和实际像素
网页布局里写的 width: 300px，通常指的是 CSS 像素，也可以理解为布局尺寸。但图片文件本身还有一个实际像素尺寸，比如 300×200、600×400。如果一张 300px 宽的图被放进 300px 宽的容器，在普通 1x 屏幕上看可能刚好够用；但在 DPR=2 的屏幕上，显示这个 300 CSS 像素宽的位置，实际可能需要大约 600 个设备像素来填满。
这就是为什么“用双倍容器分辨率”会变清晰：不是容器本身有什么魔法，而是你给浏览器的图片像素终于够用了。
核心判断公式
排查时可以先记住这个公式：
图片实际宽度 ≥ CSS 显示宽度 × devicePixelRatio
举例来说，一张图在页面里显示宽度是 360px，用户手机 DPR 是 2，那么更稳妥的图片实际宽度应该至少接近 720px。如果只给 360px 宽的图片，浏览器就需要把它放大到更多设备像素上显示，边缘、文字和细线就容易发虚。
如果是设计稿里常说的 2x 图、3x 图，本质也是这个逻辑：在高分屏上，用更多实际像素去覆盖同样的 CSS 显示空间。
为什么单独打开清晰，放网页里却模糊
图片单独打开时，浏览器可能按照图片原始尺寸展示，或者你会主动放大/缩小查看，所以主观上觉得清晰。但放进网页后，它会受容器宽高、CSS 规则、响应式布局和父元素缩放影响。只要最终显示尺寸超过了图片实际像素能支撑的范围，就会出现模糊。
还有一种情况是图片本身够大，但网页里实际加载的不是原图，而是 CDN、OSS 或图片服务处理后的缩略图。例如 URL 中带有 resize、w_300、x-oss-process、quality、format 等参数，可能已经把图片压小或降低质量。单独打开本地原图清晰，并不代表网页实际加载的那张图也清晰。
常见原因一：图片被 CSS 强行拉伸
最直接的原因是图片实际尺寸小于容器显示尺寸。比如图片实际只有 400px 宽，却被 CSS 设置成 width: 800px，它一定会被放大，细节也会变软。
另外还要注意 transform: scale()、轮播图缩放、弹窗预览缩放、父容器整体缩放等情况。开发者有时只看到了 img 标签本身的宽高，却忽略了父级元素或动画层对最终显示尺寸的影响。
常见原因二：高 DPR 设备没有拿到 2x 图
现在很多手机、MacBook 和高分屏显示器的 DPR 都大于 1。图片在 CSS 层显示为 300px，屏幕实际可能需要 600px 甚至 900px 宽的图。如果仍然只加载 1x 图，肉眼就会感觉不够锐。
比较标准的做法是使用 srcset 和 sizes，让浏览器根据容器尺寸、DPR 和网络情况选择合适的图片。例如为同一张图准备 480w、960w、1440w 等多个版本，而不是所有设备都加载同一张小图。
常见原因三：CDN 或 OSS 自动压缩裁剪
很多站点会在图片 URL 后面追加处理命令，用于裁剪、压缩、转 WebP 或限制宽高。这对性能有好处，但如果参数不合适，就会把原本清晰的图片变成低分辨率图片。尤其是把缩略图 URL 用在正文大图、灯箱大图或详情页主图时，模糊会很明显。
排查时要看网页里实际请求的图片地址，而不是只看后台上传的原图。打开 DevTools 的 Network 面板，找到图片请求，确认返回图片的实际尺寸和质量参数。如果图片地址带有裁剪压缩命令，先临时去掉参数对比效果，通常能很快定位问题。
怎么用 DevTools 快速判断
最实用的排查方法，是在浏览器控制台选中图片元素后查看几个值：
$0.naturalWidth 表示图片文件本身的实际宽度，$0.clientWidth 表示图片在页面里的 CSS 显示宽度，window.devicePixelRatio 表示当前设备像素比。
如果 naturalWidth 明显小于 clientWidth × devicePixelRatio，那模糊大概率就是像素不够。如果 naturalWidth 足够，但仍然模糊，再继续检查 CSS 缩放、图片压缩参数、浏览器缩放比例以及是否被二次截图/压缩。
应该怎么修
如果是普通照片或内容图，优先提供足够宽的原图，并用 max-width: 100% 控制响应式显示；不要用很小的缩略图硬撑大容器。对于需要适配高分屏的图片，建议配置 srcset 和 sizes，让浏览器自动选择 1x、2x 或更高分辨率版本。
如果图片经过 OSS/CDN 处理，要为不同使用场景设置不同尺寸：列表缩略图用小尺寸，正文图用中高尺寸，点击查看大图时使用原图或去掉过度压缩裁剪的版本。不要让缩略图 URL 一路复用到详情页和大图预览。
如果是图标、二维码、像素风图片，情况又不一样。照片类图片通常保持浏览器默认平滑缩放即可；像素风或二维码则要避免非整数倍缩放，必要时再考虑 image-rendering，否则边缘也可能被平滑算法处理得发糊。
总结
“图片本身清晰，网页里模糊”本质上是显示链路问题。你看到的是网页容器里的渲染结果，而不是原始图片文件本身。只要图片实际像素、CSS 显示尺寸、DPR、压缩裁剪和浏览器选择策略有一个环节不匹配，就可能出现模糊。
排查时不要只凭肉眼判断，直接看 naturalWidth、clientWidth、devicePixelRatio 和实际图片请求地址。通常把这几个值对上，问题就会非常清楚。
