图像与展示：像素、分辨率、DPI 与不同设备显示

最近学习移动网站建设，遇到了很多关于图片设计与跨设备展示方面的问题。

首先第一个问题，就是“分辨率（resolution）”这个概念让人很头疼。有时候它用来形容显示器，有时候又用来描述图片，有时候用来表示像素多少，有时候又用来描述清晰度。查了一些资料之后，做如下总结。

分辨率用来形容屏幕时，通常指一块显示屏横向和纵向的像素数量。例如一块 1440×900 的显示器，横向有 1440 个像素点，纵向有 900 个像素点，整个显示器可以表示 1,296,000 个像素。

不同显示器的尺寸和分辨率各不一样。我们还可以用每英寸包含的像素点数（PPI）来表示屏幕的像素密度。通常情况下，普通 PC 显示器的像素密度相对较低，而随着技术的发展，越来越多的高像素密度屏幕出现在我们的生活中，例如 Retina 屏幕。

常见设备的相关参数如下：

在图片中，分辨率通常是指一张图像包含的像素数量。大多数情况下，是由宽和高的像素乘积表示的。

例如，一张 2048×1536 像素的图片包含 3,145,728 个像素。

数字图片本身没有固定的物理尺寸概念。显示图片时，显示设备主要根据图片中的像素信息进行展示。

例如，一块 1440×900 的显示屏，一张 720×450 像素的图片，在不缩放的情况下，可以按照 720×450 像素进行显示。但它实际占用多大的物理尺寸，还要看显示设备的像素密度。

也就是说：

a，图片本身最核心的是像素数量，而不是 DPI；
b，同样像素数量的显示器，像素密度越高，单个像素的物理尺寸越小；
c，同样的图片，在不同输出设备上的实际物理尺寸可能不同。

在网页中还需要注意一个容易混淆的概念：CSS 中的 1px 不一定等于屏幕上的一个物理像素。特别是在高 DPI 设备上，一个 CSS 像素可能对应多个物理像素，这也是为什么同样尺寸的网页图片，在不同设备上看起来会有所区别。

既然图片中最重要的是实际像素，细心的人可能会发现，Photoshop 中明明有设置图片 DPI 的选项，如下图：

这是怎么回事呢？

我创建了两张 500×500 的图片，DPI 分别设置为 300 和 72，发现以下几点：

1. 同样像素的字体，在两张图片上的实际输出尺寸可能不一样。
2. Photoshop 中显示的文档尺寸不一样，一张为 4.23 厘米，另外一张为 17.64 厘米。
3. 如果两张图片保存成可以直接查看的 JPG、GIF 或 PNG 等格式，再打开时，显示方式又可能和 Photoshop 中的文档尺寸不同。

在 Photoshop 的官方说明中，对图像尺寸、分辨率和重新采样之间的关系有比较详细的解释。

当取消选中“重定图像像素”时，可以发现图片尺寸和 DPI 会相互影响，这也就解释了上面的问题。

实际上，这时候并没有改变图片本身包含的像素数量，而是在改变这些像素进行输出时对应的物理尺寸。

所以，对于网页图片来说，图片真正决定显示细节的还是实际像素数量。DPI 更多影响的是打印等输出场景。

这也是为什么一张 500×500 像素的图片，把 DPI 从 72 修改为 300，并不会让它凭空产生更多图像细节。

对于现在的网站开发，还需要考虑高 DPI 屏幕的问题。过去一张图片固定提供一个尺寸就可以使用，而现在可以通过 srcset 等响应式图片方式，根据设备情况提供不同尺寸的图片，在保证清晰度的同时减少不必要的流量。

综上，可以简单理解：

像素决定图片包含多少图像信息，屏幕分辨率决定设备有多少像素，PPI/DPI描述像素或输出点的密度，而图片最终显示多大，则还和具体的输出设备有关。

参考资料

1. Known screens
2. About pixel dimensions and printed image resolution
3. Image Resolution, size, and compression: What does it really mean?
4. Image resolution and DPI explained