图像分辨率详解 - 理解 px、dpi 和 ppi
什么是分辨率 - 图像细节的基本概念
分辨率描述图像包含的细节量。在不同语境下，"分辨率"有不同的含义：数字图像的像素数量、打印输出的点密度、或显示器的像素密度。理解这些区别对于正确处理图像至关重要。
三种"分辨率":
- 像素分辨率：图像的宽×高像素数 (如 1920×1080)
- 打印分辨率 (dpi)：每英寸打印的墨点数
- 显示分辨率 (ppi)：每英寸屏幕的像素数
常见误解: "高分辨率"不等于"高 dpi"。一张 6000×4000 像素的照片在 Web 上显示时 dpi 无意义；同一张照片打印为 A4 时 dpi 才有意义。dpi/ppi 只在物理输出尺寸确定时才有意义。
绝对分辨率与相对分辨率的读法：例如「1,920 × 1,080 的图像」表示的是绝对分辨率，而「300 dpi 的图像」表示的是相对分辨率。智能手机相机规格中所说的「48MP」指传感器的总像素数，显示器的「Retina」指屏幕的像素密度，印刷厂要求的「350 dpi」指输出时的密度 —— 三者说的是不同的量，混用就会产生误解。
px (像素) - 数字图像的最小单位
像素 (Pixel) 是数字图像的最小组成单元，每个像素存储一个颜色值。图像的像素分辨率决定了它能表现的最大细节量。
像素与物理尺寸：像素本身没有固定的物理大小。同一张 1920×1080 的图像，在 24 英寸显示器上每个像素约 0.27mm，在 5 英寸手机上每个像素约 0.06mm。像素的物理大小取决于显示设备。
CSS 像素 vs 设备像素:
- CSS 像素 (逻辑像素): Web 开发中使用的抽象单位，与设备无关
- 设备像素 (物理像素)：屏幕上实际的发光点
- 设备像素比 (DPR)：设备像素 / CSS 像素。Retina 屏幕 DPR=2，即 1 个 CSS 像素对应 4 个物理像素
常见像素分辨率:
- Full HD: 1920×1080 (约 200 万像素)
- 4K UHD: 3840×2160 (约 830 万像素)
- 数码相机：2400-6000 万像素
- 手机：1200-5000 万像素
像素排列与物理尺寸无关：「1,920 × 1,080」这样的写法，意味着横向排列 1920 个、纵向排列 1080 个像素。同一张 1,920 × 1,080 的图像，显示在 5 英寸的智能手机上时每个像素极小，投影到 100 英寸的幕布上则变得很大。
三个领域的具体换算：Web 设计方面，CSS 像素与设备像素有时并不相同 (Retina 显示器上 1 CSS px = 2 至 3 设备 px)；摄影方面，相机的百万像素数表示总像素数 (12MP = 约 4,000 × 3,000 px)；视频方面，4K 为 3,840 × 2,160 px、Full HD 为 1,920 × 1,080 px。像素数越多，图像包含的信息量越大，文件体积也越大。
dpi (每英寸点数) - 打印的分辨率单位
dpi (Dots Per Inch) 描述打印机每英寸输出的墨点数量。它决定了打印品的精细程度。
打印 dpi 标准:
- 300 dpi：高质量印刷中常见的指定值 (杂志、画册、照片)
- 150 dpi：一般印刷品 (传单、海报近距离观看)
- 72 dpi：主要用于屏幕显示，直接用于打印时通常会显得粗糙
计算打印尺寸:
打印尺寸 (英寸) = 像素数 / dpi
例：3000×2000 像素的照片，300 dpi 打印 = 10×6.67 英寸 (约 25×17 cm)。
dpi 与文件大小: dpi 设置本身不影响文件大小。文件大小由像素总数和压缩方式决定。将 72 dpi 的图像"改为" 300 dpi 不会增加细节，只是改变了打印时的物理尺寸。
打印机实际 dpi：喷墨打印机有时会标称 2400-4800 dpi 左右的数值 (因机型与厂商而异)，但这是墨点密度，不等于图像需要这么高的分辨率。图像 300 dpi 通常被认为足以匹配打印机的最高质量输出。
单位的定义与所需像素数的算法：dpi (dots per inch) 是表示每英寸所打印的点 (墨点) 数的单位。例如要以 300 dpi 打印 A4 尺寸 (约 8.27 × 11.69 英寸)，就需要 2481 × 3507 像素以上的图像 —— 先定输出尺寸与密度，再反算像素数，才是正确的顺序。
ppi (每英寸像素数) - 显示器的分辨率单位
ppi (Pixels Per Inch) 描述显示器每英寸包含的像素数量。它决定了屏幕上内容的精细程度。
常见设备 ppi:
- 标准桌面显示器：96-110 ppi
- MacBook Pro Retina: 220-254 ppi
- iPhone 15 Pro (2023 年机型): 460 ppi
- iPad Pro: 264 ppi
ppi 计算:
ppi = √(水平像素² + 垂直像素²) / 对角线英寸
例：27 英寸 4K 显示器 = √(3840² + 2160²) / 27 ≈ 163 ppi。
Retina 与 HiDPI: Apple 将 ppi 超过人眼在正常观看距离下分辨能力的屏幕称为 Retina。通常 DPR=2 (每个逻辑像素用 2×2 物理像素渲染)，使文字和图像更加锐利。
对 Web 开发的影响：高 ppi 屏幕需要 2x 或 3x 分辨率的图像才能保持锐利。使用 srcset 提供不同分辨率的图像，让浏览器根据设备 DPR 选择。
单位的定义与代表机型的实测值：ppi (pixels per inch) 表示显示器每英寸所显示的像素数。代表性显示器的 ppi 值：iPhone 15 Pro (2023 年机型) 为 460 ppi (Super Retina XDR)；MacBook Pro 14 英寸 (2023 年机型) 为 254 ppi (Liquid Retina XDR)；常见的 27 英寸 4K 显示器约为 163 ppi；常见的 27 英寸 Full HD 显示器约为 82 ppi。ppi 越高的显示器上，同样像素数的图像物理显示尺寸越小。
Web 开发中的落地方式：需要考虑 CSS 像素与设备像素的比率 (window.devicePixelRatio)，据此分发合适分辨率的图像，才能同时兼顾性能与观感。
dpi vs ppi - 澄清常见混淆
dpi 和 ppi 经常被混用，但它们描述的是不同的物理量。理解区别有助于在正确的场景使用正确的术语。
核心区别:
- dpi：打印输出的墨点密度。属于打印机的属性
- ppi：屏幕显示的像素密度。属于显示器的属性
为什么会混淆：图像编辑软件 (Photoshop) 中的"分辨率"设置标注为 "pixels/inch" (ppi)，但人们习惯称之为 "dpi"。操作系统的显示设置也常用 "dpi" 来描述缩放比例。
实际影响:
- Web 图像：dpi/ppi 设置完全无意义。浏览器只看像素数
- 打印图像：dpi 决定打印尺寸和质量
- UI 设计：ppi 影响设计稿的缩放比例
Photoshop 中的"分辨率"：改变 Photoshop 中的 ppi 设置 (不勾选"重新采样") 只改变打印尺寸的元数据，不改变像素数据。勾选"重新采样"则会实际改变像素数量。
一个像素与多个墨点的关系：显示器一侧是 1 个像素 = 1 份颜色信息，而喷墨打印机为了再现一个像素的颜色，会组合多个 CMYK 的微细墨点 —— 这正是打印机标称 dpi 远高于图像所需 ppi 的原因。
按用途的最佳分辨率设置
根据最终用途选择正确的分辨率，避免不必要的大文件或质量不足。
Web 和屏幕显示:
- 以像素为单位设计，忽略 dpi 设置
- 标准屏幕：1x 图像即可
- Retina/HiDPI：提供 2x 图像 (如显示 400px 宽，提供 800px 源图)
- 不需要超过 2x,3x 的视觉改善极其微小
印刷品:
密度以印刷方的指定为优先。以下是在没有指定时有时会被当作参考列举的数值。
- 高质量印刷：300 dpi (杂志、画册)
- 大幅海报 (远距离观看): 150 dpi 左右
- 户外广告牌：约 30-72 dpi (观看距离远)
扫描:
以下同样只是有时被当作参考列举的数值 (依来源而异)。
- 文档 OCR: 300 dpi
- 照片扫描 (保存): 600 dpi
- 胶片扫描：约 2400-4800 dpi
视频:
- 1080p: 1920×1080
- 4K: 3840×2160
- 帧率比分辨率对流畅度影响更大
Web 与印刷的具体数值：Web 站点与 SNS 用 —— 常见 Web 图像宽 1200 至 2400 px (含 Retina 适配)；OGP 图像 1200 × 630 px；网站图标 32 × 32 px、180 × 180 px (Apple Touch Icon)；ppi 设定在 Web 上无关 (浏览器只参照像素数)。印刷用 (以印刷方的指定为优先，以下为无指定时的参考值) —— 商业印刷 (传单、宣传册) 350 ppi；照片打印 (L 版、A4) 300 ppi；大幅海报 (B1 以上) 150 至 200 ppi (观看距离较远)；名片 350 ppi 以上。
常见失误与对策：把 Web 用图像以 300 ppi 导出，只会让文件体积无谓变大 —— Web 上只有像素数重要，ppi 设定不产生影响；把手机照片直接用于印刷，只要有 12MP (4000 × 3000 px) 就足以应对 A4 的 300 ppi；把低分辨率图像放大后印刷，会因像素插值而模糊。请先确认输出尺寸与所需的 ppi/dpi，再由此计算需要的像素数。