像素密度与分辨率有什么区别？

分辨率是图像或显示器的像素总数，例如 2560 × 1440。像素密度则表示这些像素在每英寸物理空间内排列得多紧密，以 PPI 衡量。小屏幕和大屏幕可能采用相同分辨率，但像素密度相差很大。

为什么 Retina 截图的像素比预期多？

Retina 显示器的设备像素比为 2x 或 3x，也就是一个 CSS 像素分别对应 4 个或 9 个物理像素。截图会记录物理像素，因此宽度为 1440 像素的视口在 2x Retina 显示器上会生成 2880 像素宽的截图。

从细节角度看是这样。同一可见区域在高密度显示器上截图，会包含更多像素，文字和图形也更清晰。代价是文件更大。

大多数现代智能手机约为 400–550 PPI，Apple、Samsung 和 Google 的旗舰设备通常在 450–530 PPI 之间，远高于人眼能看清单个像素的密度。

后期无法增加真实细节。放大低密度截图可以增大尺寸，但软件只是插值生成像素，并不会让画面真正变清晰。要得到更高密度的截图，应在更高 PPI 的显示器上，或以更高设备像素比截取。

像素密度是单位物理屏幕空间内包含的像素数量，通常以每英寸像素数（PPI）衡量，它决定了显示器上的文字和图像有多清晰。

在正常观看距离下，人眼能否看出单个像素取决于像素密度。旧款桌面显示器通常约为 100 PPI，密度较低，像素容易辨认，文字边缘也会显得参差。达到 200 PPI 或更高后，单个像素很难分辨，文字更平滑，图像细节也更清晰。

Apple 推广了“Retina”这一说法，用来描述像素密度在常见观看距离下超过人眼分辨阈值的显示器。笔记本电脑通常放在一臂之外，阈值约为 200 PPI；手机离面部更近，阈值约为 300 PPI。现代旗舰手机超过 400 PPI，已经远高于人眼能分辨的水平。

视觉差异很明显。同样的文字显示在 220 PPI 笔记本电脑屏幕上，会比 110 PPI 外接显示器清晰许多：曲线更平滑，细线更明确，小字也不会因抗锯齿瑕疵而难以阅读。

截图会记录显示器渲染的每一个物理像素。标准密度显示器约为 110 PPI，宽度为 1440 像素的视口会生成 1440 像素宽的截图。2x Retina 显示器约为 220 PPI，同一视口会生成 2880 像素宽的截图，也就是宽高各翻倍，总像素数变为 4 倍。

这会带来实际差异。高密度显示器生成的截图尺寸和文件都更大，但包含的细节也明显更多。这类截图按“逻辑”尺寸显示，也就是缩小到 1x 时，所含像素多于显示区域实际需要，因此看起来格外清晰。

如果工作流程需要不同源显示器输出相同尺寸，自动截图工具可以不受主机显示器影响，按指定设备像素比统一分辨率。这样，无论截图来自 1x 显示器还是 3x 手机，结果都能直接比较。

设备像素比（DPR）连接了像素密度和软件看到的尺寸，表示一个逻辑像素（CSS 像素）对应多少个物理像素。DPR 为 1 时，一个 CSS 像素等于一个物理像素；DPR 为 2 时，一个 CSS 像素对应由 4 个物理像素组成的 2 × 2 区块。

操作系统和浏览器会用 DPR 缩放界面。宽度为 100 CSS 像素的按钮，在 2x 显示器上会渲染为 200 个物理像素宽。用户看到的逻辑尺寸不变，细节却增加一倍。

截图时，DPR 决定输出尺寸。无论是需要尽量清晰的营销素材，还是需要控制文件大小的文档，都应先确定目标 DPR，才能得到合适的分辨率。

当截图来自不同电脑时，像素密度就会成为实际流程问题。团队同时使用 1x 外接显示器、Retina MacBook 和手机模拟器，如果不主动统一 DPR，生成的素材尺寸就会不一致。

混淆像素密度与 DPI。 PPI（每英寸像素数）描述屏幕，DPI（每英寸点数）描述打印机，两者衡量的对象不同。把截图称为“300 DPI”容易产生误解，真正重要的是图片的像素尺寸，以及截图所用显示器的 PPI。
以为所有截图的分辨率都相同。 同一网页分别在 1x 显示器和 3x 手机上截取，会生成尺寸差异很大的图像。比较或批量处理不同设备的截图时，应始终考虑 DPR。
没有目的地缩小图片。 把 2x 截图缩小到 1x 尺寸会丢失一半细节。如果输出媒介支持高分辨率图像，例如 Retina 网页或印刷，应保留完整分辨率。
忽略文件大小。 3x 截图的像素数是 1x 截图的 9 倍，未经压缩时，文件也会相应增大。截图后应进行适当的图像优化，在画质和大小之间取得平衡。