Retina 截图

Retina 截图是在高 DPI（Retina）显示器上截取的画面，图像的像素尺寸会达到可见视口的 2 倍或 3 倍，画面更清晰，文件也更大。

Related workflow terms: 像素密度.

Retina 截图为何更大

在标准密度显示器上，一个 CSS 像素对应一个物理像素。宽度为 1440 CSS 像素的浏览器窗口会生成 1440 像素宽的截图。

在设备像素比（DPR）为 2 的 Retina 显示器上，每个 CSS 像素由 2 × 2 个物理像素组成。同一个宽度为 1440 CSS 像素的窗口会生成 2880 像素宽的截图。DPR 为 3 时，输出会达到 4320 像素宽，这在高端移动设备上很常见。

结果是单位可见区域中包含更多细节，图像更清晰，但文件也明显增大。同一视口的 2x Retina 截图所含像素是 1x 截图的 4 倍，也就是宽度和高度分别乘以 2。文件大小会相应增加：1x 时为 500 KB 的 PNG，在 2x 时可能达到 1.5–2 MB。

这经常出乎用户意料。屏幕上看似很小的一块区域，截出后却是大尺寸、高分辨率图片，因为物理像素远多于画面中的逻辑像素。

哪些场景需要注意 Retina 截图

• 网页显示——把 2x 截图按完整像素尺寸嵌入网页，会让图片显示为预期的 2 倍大。应通过 CSS width/height 或 width 属性按正确逻辑尺寸显示，此时它在 Retina 屏幕上会格外清晰。
• 印刷——Retina 截图多出的像素是一项优势。2x 截图的分辨率足以在合理物理尺寸下按 300 DPI 打印，而同一视口的 1x 截图打印后可能出现像素感。
• 文档——Retina 截图在高 DPI 屏幕上的文档中很清晰，但用于网页传输时可能没有必要这么大。缩小到 1.5x 或使用响应式图像，可以兼顾清晰度和文件大小。
• 文件存储——在 Retina 显示器上批量截取数百个页面，会比 1x 批次生成多得多的数据。规划存储和带宽时，应考虑成倍增加的文件。

如何控制截图分辨率

大多数截图工具和无头浏览器允许明确设置设备像素比。

在 Puppeteer 和 Playwright 中，deviceScaleFactor 选项控制 DPR。设为 1 会生成标准密度截图，设为 2 则会生成相当于 Retina 的截图，与实际显示器硬件无关。

在 macOS 上，系统自带截图工具（Cmd+Shift+3 或 Cmd+Shift+4）始终按显示器原生 DPR 截取。Retina MacBook 上就是 2x。第三方截图工具可能允许改为 1x。

在 Windows 上，“截图工具”（Win+Shift+S）会按照系统显示缩放比例截取。根据显示器和设置，这一数值可能是 100%（1x）、125%、150%（相当于 1.5x）或 200%（2x）。

一些自动截图工具可以为每次截图指定准确 DPR，在一个批次中同时生成 1x 和 2x 版本。

在可重复运行的截图流程中，“Retina”实际是“按明确的设备像素比截取”的简称。通过代码控制后，团队可以按用途选择文件较小、便于评审的 1x 图像，或用于营销、印刷和归档的清晰 2x 图像。

常见错误

• 在网页中按完整像素尺寸显示 Retina 截图。 宽度为 2880 像素的截图如果没有 CSS 尺寸，在标准显示器上会占据 2880 个 CSS 像素，远超预期。应始终明确设置显示尺寸。
• 批量流程没有考虑文件大小。 以 2x 而不是 1x 截取 500 个页面，总存储量大约会增加 4 倍。运行大批次前，应先确定场景是否需要 Retina 分辨率。
• 缩小时使用不合适的重采样算法。 用最近邻算法把 2x 图像缩小到 1x 会产生锯齿边缘。应使用双三次或 Lanczos 重采样平滑缩小。
• 以为所有截图都是 Retina。 如果团队成员使用不同硬件，部分截图会是 1x，另一些则是 2x，图像尺寸无法保持一致。团队应统一截图 DPR，或使用能明确设置该值的自动化工具。