图片尺寸和显示尺寸有什么区别？为什么截图上线后大小不一样

一张图片可以是 2400 像素宽，但网页上只显示 1200 像素宽。截图在自己电脑上很清晰，贴进文档后却变糊。商品图文件很大，但上传到平台后看起来还是很小。

这些问题通常来自一个混淆：图片尺寸和显示尺寸不是一回事。

图片尺寸：文件本身有多少像素

图片尺寸通常指文件里存储的位图尺寸，例如：

2400 x 1600 px

这个数字会影响：

• 图片能包含多少细节
• 文件大小
• 裁剪空间
• 是否足够用于打印或放大查看
• 如果按原始大小显示，可能有多大

图片尺寸工具打开原图时，测到的通常就是这个层面的尺寸。

显示尺寸：页面或 App 里显示得多大

显示尺寸指图片在布局里实际显示的大小。在网页上，它通常受 CSS、容器宽度、响应式图片规则或浏览器缩放影响。

例如：

<img src="photo.jpg" width="600" />

这张图片文件本身可能是 2400 像素宽，但浏览器可以把它显示为 600 CSS 像素宽。

naturalWidth、CSS 像素和 Retina 屏幕

浏览器会通过 naturalWidth 等属性暴露图片尺寸。MDN 对 HTMLImageElement.naturalWidth 的说明是：它返回图片的 intrinsic、density-corrected 宽度，单位是 CSS 像素。

另一个相关概念是 window.devicePixelRatio，它描述当前显示设备上物理像素和 CSS 像素之间的比例。在高密度屏幕上，一个 CSS 像素可能对应多个物理像素。

所以 Retina 截图容易让人困惑：

• 截图文件里可能包含更多图片像素。
• 网页可能用更少的 CSS 像素显示它。
• 设计走查关心的可能是 CSS 像素。
• 图片标注关心的可能是文件实际像素。

为什么商品图上传后会变糊？

常见原因包括：

• 上传的原图尺寸小于展示位。
• 平台上传后做了压缩。
• 图片被拉伸到超过原始像素尺寸。
• 截图来自一种屏幕密度，却在另一种密度下显示。
• 文字或尺寸标注先加上去，再被整体缩小。

如果要给商品图加尺寸，尽量接近最终展示尺寸再标注。平台会自动缩图时，导出后最好放到真实商品页里看一遍。

在 bug 报告里怎么说更清楚？

建议用具体表达：

• “原图尺寸是 2400 x 1600 px。”
• “网页显示尺寸是 600 x 400 CSS px。”
• “截图来自 2x 屏幕。”
• “平台缩图后，尺寸标注变糊了。”

这样设计、开发和客服看到后，不需要猜你说的是哪一种尺寸。

一句话总结

图片尺寸是文件本身的像素数量，显示尺寸是浏览器、App 或文档里实际展示的大小。两者会因为 CSS、响应式布局、浏览器缩放和高密度屏幕而不同。测量或标注图片时，要说明你说的是文件像素还是 CSS 显示像素。

实用流程

先确定你要量什么：原图像素、CSS 显示尺寸、截图里的间距，还是商品参考尺寸。这些不是同一个问题。上传或截图后，把图缩放到舒服的比例，从稳定边缘开始量，不要拿阴影、抗锯齿边缘或圆角过渡当唯一参考。

做设计走查时，建议同时记录测量值、期望值和视口大小。桌面截图里的 24px 间距，在移动端、Retina 屏、浏览器缩放或截图压缩后，可能不是同一个概念。

检查清单

| 检查项 | 为什么重要 | |---|---| | 原始像素 | 底层图片可能比页面显示尺寸大。 | | 浏览器缩放 | 缩放会改变你看到的大小。 | | 参考点 | 阴影和圆角会让测量不稳定。 | | 设备倍率 | Retina 截图和 CSS 像素可能相差 2 倍或 3 倍。 |

常见问题

为什么两个工具测出来不一样？

它们可能测的是不同坐标系：源图片像素、CSS 像素、设备像素或缩放预览。比较前要先确认口径。

使用场景示例

做 UI QA 时，除了测量值，还应记录视口、浏览器缩放和期望 CSS 值。量商品图时，应使用已知参考线，而不是凭图片边缘猜尺寸。

测量结果只有在别人可以复现时才有意义，所以要把口径写清楚。

设计交付时怎么沟通

如果设计稿写的是 1200px 宽，开发还需要知道这是图片原始像素、CSS 显示宽度，还是 Retina 屏幕下的截图像素。把这三件事说清楚，能减少“为什么上线后变小了”的误会。

截图走查要注明缩放

做设计走查或 bug 反馈时，最好同时注明浏览器缩放、系统缩放和设备像素比。否则同一张截图在不同屏幕上看起来大小不一致，沟通时很容易误判。

参考资料：