图像分辨率详解 - 理解 px、dpi 和 ppi
什么是分辨率 - 图像细节的基本概念
分辨率描述图像包含的细节量。在不同语境下,"分辨率"有不同的含义: 数字图像的像素数量、打印输出的点密度、或显示器的像素密度。理解这些区别对于正确处理图像至关重要。
三种"分辨率":
- 像素分辨率: 图像的宽×高像素数 (如 1920×1080)
- 打印分辨率 (dpi): 每英寸打印的墨点数
- 显示分辨率 (ppi): 每英寸屏幕的像素数
常见误解: "高分辨率"不等于"高 dpi"。一张 6000×4000 像素的照片在 Web 上显示时 dpi 无意义; 同一张照片打印为 A4 时 dpi 才有意义。dpi/ppi 只在物理输出尺寸确定时才有意义。
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 万像素
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 足以匹配打印机的最高质量输出。
ppi (每英寸像素数) - 显示器的分辨率单位
ppi (Pixels Per Inch) 描述显示器每英寸包含的像素数量。它决定了屏幕上内容的精细程度。
常见设备 ppi:
- 标准桌面显示器: 96-110 ppi
- MacBook Pro Retina: 220-254 ppi
- iPhone 15 Pro: 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 选择。
dpi vs ppi - 澄清常见混淆
dpi 和 ppi 经常被混用,但它们描述的是不同的物理量。理解区别有助于在正确的场景使用正确的术语。
核心区别:
- dpi: 打印输出的墨点密度。属于打印机的属性
- ppi: 屏幕显示的像素密度。属于显示器的属性
为什么会混淆: 图像编辑软件 (Photoshop) 中的"分辨率"设置标注为 "pixels/inch" (ppi),但人们习惯称之为 "dpi"。操作系统的显示设置也常用 "dpi" 来描述缩放比例。
实际影响:
- Web 图像: dpi/ppi 设置完全无意义。浏览器只看像素数
- 打印图像: dpi 决定打印尺寸和质量
- UI 设计: ppi 影响设计稿的缩放比例
Photoshop 中的"分辨率": 改变 Photoshop 中的 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
- 帧率比分辨率对流畅度影响更大