手机网页图片为什么有时模糊？看懂尺寸、像素密度与流量

同一张图片，在一部手机上清楚，换一部手机却显得发虚；有时小屏幕反而下载了更大的文件。这些现象未必是浏览器故障。判断图片质量，需要把显示尺寸、图片自身像素和压缩方式分开看。

本站最近优化了首页横幅，这篇文章解释其中与实际浏览体验相关的取舍。文中的尺寸例子用于说明原理，不是对每台设备下载行为的承诺。

屏幕上的宽度，不等于图片需要的像素数

网页通常按 CSS 像素安排版面，但屏幕实际用于显示的像素可能更多。例如，一张图在页面里占 360 个 CSS 像素宽，在像素密度约为 2 的设备上，720 像素宽的图片通常能提供更合适的细节基础。

因此，“手机屏幕窄，所以只需要最小图片”并不总是成立。浏览器还需要结合屏幕像素密度、缩放和布局等条件选择资源。关于这一机制，可以查阅 MDN 的像素密度说明。

三种常见现象，要分开判断

整张图片发虚

可能是源图分辨率不足、较小图片被放大，或图像本身已经失焦。把小文件强行放大到更高尺寸，并不能恢复原来没有的细节。反复刷新也通常不会让同一个低分辨率源文件变清楚。

细小文字或边缘不清

除了像素数量，也可能与压缩程度、缩放比例或图中文字本来过小有关。重要说明最好同时以网页文字提供，让读者能放大、复制或使用辅助阅读工具，而不是只能依赖横幅上的小字。

图片比例正常，但边缘内容被裁掉

这可能是页面为适配横竖屏采用了不同构图或裁剪方式。它与“下载失败”不同。如果被裁掉的是重要内容，反馈时注明屏幕方向和被遮挡位置，比单写“图片不清楚”更容易定位。

这些都是排查方向，不能只凭一个现象确认原因。

响应式图片如何兼顾清晰度和流量

网站可以提供多种尺寸，让浏览器从候选资源中选择。页面中的 srcset 列出可用图片，sizes 提供预计显示宽度；picture 还可用于区分手机构图、桌面构图或图片格式。具体机制见 MDN 响应式图片指南。

本站当前首页横幅提供了 480、768、1280、1920 像素版本，同时保留手机与桌面的独立构图。手机图的 768 像素 WebP 文件约 45 KB，但浏览器可能为高密度屏幕选择更大版本。

优化目标是为当前显示条件提供合适资源，不是强迫所有人下载最小文件。文件体积下降也不等于画质完全无损：有损压缩会做取舍，因此原图仍然保留，必要时可以调整。

为什么第二次打开更快，却不一定下载另一张图

浏览器可能复用已经下载的资源。切换屏幕方向、改变窗口大小或再次访问时，具体是否重新请求图片取决于浏览器的资源选择和缓存状态，不能假设每次变化都会重新下载最小候选图。

这也是比较流量时需要区分首次访问和重复访问的原因。仅凭第二次打开更快，无法判断网站刚刚修改了图片。

遇到异常时，先记录什么

1. 记下出现问题的页面地址，以及图片位于顶部、中间还是页面下方。
2. 区分模糊、裁切、空白和加载迟缓，这四种现象需要不同的排查方向。
3. 记录手机型号、浏览器名称、横屏或竖屏，以及是否手动放大页面。
4. 如果需要截图，先裁掉通知、个人资料和其他无关内容。
5. 不要为了比较图片质量，立即清除所有网站数据；那可能影响本站保存在浏览器里的本地记录。

当前这轮优化针对首页横幅，并不代表所有列表图片都使用了同样的多尺寸方案。具体数据见首页提速实录。如果仍有问题，可以按照反馈清单提交便于复现的说明。