# 图片怎么用：先量出图框尺寸，再查像素，最后处理文字压在图上

按“框→像素→裁切→文字”的顺序走三道判断：300 ppi 只在最终尺寸上才有意义，裁切不增加清晰度，文字压在图上按代价从小到大修

> 图片使用 · 分辨率 · 版面设计 · 色彩对比度 · 约 6 分钟 · 10 月 25 日

## 本篇要点

1. 照片够不够清楚，要看它在最终版面尺寸上每英寸有多少像素，也就是像素数除以放置宽度，而不是文件里存的数字或软件里填的 ppi。
2. 印刷按框宽（毫米）除以 25.4 再乘 300 算出需要的像素：180mm 宽就需要约 2126 像素；屏幕物料按框的像素宽准备即可。
3. 像素不够只有三条出路：缩小框、换更大的原图、确认实际观看距离下是否可以放宽标准。改软件里的 ppi 数值或重新采样，都不能补回细节。
4. 裁切只改变构图，不增加清晰度；裁掉的部分会带走像素，裁完必须重算实际 ppi，或一开始就预留 20%–30% 的余量。
5. 裁切要同时满足三个条件：比例不变形、不切断头顶下巴手腕等关键部位，以及在计划放文字的位置留出明暗平缓的空间。
6. 文字压在图上读不清，是因为照片明暗不均。修法按代价排序：把文字移到暗处或空处、加局部渐变遮罩（深色 20%–40%，浅色 40%–60%）、加大加粗换色；整张压暗会毁掉照片。
7. 验证要取文字底下最亮的那一点算对比度，正文 4.5:1、大字 3:1，而不是用背景的平均色。

---

前几篇处理的都是你自己画的内容：线、文字、颜色、空白。版面上还有一块不是你画的，就是照片。照片自带构图、明暗和内容，你只能决定把它放多大、裁掉哪一块、让文字叠在哪部分。因此图片这一步一旦出问题也最难掩盖：发虚、变形、字看不清，谁都能一眼看出来。

这篇按实际操作顺序走三道判断。做完之后，你应该得到一张放进版面不发虚、主要对象没有被裁坏、文字叠加后仍读得清的照片。示例按 A4 竖版计算：边距取短边的 8%，约 15mm，因此内容宽 180mm，图片框定在内容顶部，180mm × 110mm。软件用 Photoshop、Photopea、Figma、Canva 都行，能查看图片的像素尺寸和放置尺寸就够。

## 第零步：先量出图框尺寸，再看照片

先在版面上确定这张图占多大：宽多少、高多少，印刷用毫米，屏幕用像素。示例是 180mm × 110mm。

这一步不能跳过，因为后面三道判断都以这个框为基准。像素够不够，问的是够不够填满这个框；裁切取什么比例，取决于框的长宽比（180:110 ≈ 1.64:1）；文字叠在框里的哪一块，也得先有这个框。框没有确定，后面的判断就只能靠猜。

## 第一步：从框的尺寸倒推需要多少像素

照片的“大小”有两个含义：文件里存了多少像素（4000×3000），以及在版面上占多少毫米。判断够不够用，要把这两个数放在一起计算。

印刷的常用经验值是 300 ppi，意思是图片在最终放置尺寸上每英寸铺 300 个像素。反过来计算：

$$\text{需要像素宽}=\frac{\text{框宽(mm)}}{25.4}\times 300$$

180mm 是 $180 \div 25.4 \approx 7.09$ 英寸，乘 300 得约 2126 像素；110mm 是 $110 \div 25.4 \approx 4.33$ 英寸，约 1300 像素。这张图至少要有 2126 × 1300 像素。

有了这个数，判断就简单了：

- 手机拍的 4000 × 3000：宽高都超过要求，够用，还有充足的裁切余量。
- 网上下载的 1200 × 800：宽度只有 1200。它在这块框里的实际密度是 $1200 \div 7.09 \approx 169$ ppi，离 300 差得远[3]。

像素不够只有三条路：把框缩小（1200 像素要达到 300 ppi，宽度只能占 $1200\div300=4$ 英寸，约 100mm，版面要跟着改）；换一张原始尺寸更大的图；或者确认这里是否真的需要 300 ppi。300 是拿在手上看的标准（约 25–30cm）；挂在墙上、站在一两米外看的物料，眼睛分辨不出那么细的像素，输出方通常接受更低的数值。具体能低到多少，直接问输出方比猜更准[2]。

有两种做法没有用：把软件里的“72”改成“300”，只是改了一个标签，像素一个没多；用“重新采样”把图放大，补出来的像素是插值估算出来的，模糊的原图不会因此变清楚，只是从一格一格的糊变成一片的糊[1][2]。决定清晰度的始终是原图里有多少真实像素。

屏幕物料算得更简单：框宽 1080 像素，就至少要有 1080 像素宽的图。

## 第二步：裁切：比例跟随框，焦点同时跟随主要对象和文字

照片的比例几乎总跟框对不上，必然要裁。裁的时候要同时满足三件事。

**只裁切，不拉伸。** 把 1200 × 800 硬拖成 180:110，人脸会变扁。要保持比例裁切：1200:800 是 1.5:1，框是 1.64:1，那就保留全部 1200 宽，高度裁到 $1200\div1.636\approx733$。

**别切在关键部位。** 头顶、下巴、手腕、指节、膝盖被切断，看起来像出错。人朝哪边看，哪边就多留一点空间；头顶留一点余地，比贴着头发切更安全。

**先想好字压在哪，再裁切。** 这是最有用、也最少人用的一点：好用的配图不仅好看，还要在某个位置留出能放文字的空白区域，比如天空、墙面、失焦的背景、纯色桌面。如果找不到空处，就把图裁小，让文字落在图片外的底色上。“图配文”不一定要叠在一起。

**裁完重算一次像素。** 裁切没有增加细节，只是丢掉一部分数据；裁得越狠，摊到同样大小的框里的像素越少，实际 ppi 反而下降。所以第一步的计算要在裁完之后再算一遍，或者一开始就多留 20%–30% 的余量。想提高清晰度只有两个方向：把框缩小、换更大的原图，裁切不在其中。

检查方法：把裁好的图缩到拇指大小看一眼，还认得出主要对象就成立。

## 第三步：文字叠在图上，按代价从小到大修正

字在图上读不清，根源只有一个：照片的明暗不统一。白字压在云上、浅色墙面上，就消失在背景里。修法有三档，先试代价小的。

**挪字。** 把字挪到图里偏暗或明暗偏平的那块，或者把图上下移一点。很多照片的底部是失焦的暗部，天然适合放字。这一档不损失任何东西。

**加局部遮罩。** 在字和照片之间垫一层半透明的黑或白，业内叫 scrim。深色遮罩常在 20%–40%，浅色背景上的浅色遮罩常在 40%–60%，看背景有多复杂[4]。用渐变而不是硬边色块，而且渐变要够长，短了会在照片上留一条看得见的界线。

![同样的横幅，加了一层暗色渐变遮罩之后，白字重新变得清楚，照片也没有被整片压暗](https://s3.amazonaws.com/media.nngroup.com/media/editor/2015/09/23/spirecom-slide3-60_15blackradialoverlay.png)

**改字。** 字号加大、字重加粗、换成对比更强的颜色。大字号更能承受杂乱背景，因为对比度要求对大字号本来就宽松（3:1 就够）。加描边、加投影是最后一招：它能让字勉强露出来，也容易让文字显得脏、显得廉价。

**不要整张压暗。** 均匀盖一层黑，字是清楚了，照片也变灰了，层次全丢，等于牺牲掉图片本来的作用。要压就压文字底下那一块。

**验证。** 取文字底下最亮的那一点（最坏情况，不是平均色），计算它和字的对比度：正文 4.5:1，大字 3:1[5]。手边没工具，就临时把文字藏起来看那块背景：明暗是否均匀，有没有树枝或高光横穿过去。不均匀，就加重遮罩或把字加粗。

## 收尾：三个自问

1. 框的尺寸量过吗？实际 ppi（像素宽 ÷ 框宽英寸数）接近 300，或者屏幕物料至少等于框的像素宽？
2. 主要对象完整吗？缩到拇指大还认得出吗？脸有没有被拉扁？
3. 文字底下最亮那一处，还算得过 4.5:1 吗？遮罩边缘有没有一条硬线？

三个都过了，这张图就可以定下来。接下来是同一版面上出现两张以上图片的情况：它们要怎么处理，才像一组。

## 思维导图

```mermaid
flowchart LR
  A["一张照片放进版面"] --> B["第零步：先在版面上量出图片框"]
  B --> C["框宽 180mm、框高 110mm、比例 1.64:1"]
  C --> D["第一步：像素够不够"]
  D --> D1["需要像素 = 框宽mm ÷ 25.4 × 300 ≈ 2126"]
  D --> D2["实际 ppi = 像素宽 ÷ 框宽英寸"]
  D2 --> D3["不够时：缩框 / 换图 / 按观看距离放宽"]
  D2 --> D4["改 ppi 标签和重采样都补不回细节"]
  C --> E["第二步：裁切"]
  E --> E1["只裁不拉伸"]
  E --> E2["不切断头顶、下巴、手腕"]
  E --> E3["给文字留出明暗平缓的空处"]
  E --> E4["裁完重算 ppi，或预留 20%–30% 余量"]
  C --> F["第三步：文字压在图上"]
  F --> F1["先挪字到暗处或空处"]
  F --> F2["再加局部渐变遮罩 20%–40%"]
  F --> F3["最后才改字号字重"]
  F --> F4["整张压暗会让照片变灰，不做"]
  F --> G["验证：取最亮处算对比度，正文 4.5:1、大字 3:1"]
```

## 术语表

- 有效分辨率（ppi）：图片保留的像素数除以它在版面上占的宽度（英寸），随放置尺寸变化，不是文件的固定属性。
- 裁切：按版面框的比例截取图片的一部分，改变构图的同时减少可用像素，不增加清晰度。
- 重采样：软件用插值增加或删除像素来改变图片尺寸，补出来的像素不是拍到的细节，所以放大后依然发虚。
- 遮罩（scrim）：垫在文字和照片之间的一层半透明色，用来把文字底下的背景压得够均匀，是文字压图时最常用的补救手段。

## 来源

1. [Adobe: How resizing affects image resolution and pixel dimensions — 像素尺寸、打印尺寸、分辨率与重采样的官方说明](https://helpx.adobe.com/photoshop/kb/advanced-cropping-resizing-resampling-photoshop.html)
2. [UPDIG Photographers Guidelines: Resolution — 300 ppi 指最终尺寸上的密度，插值不能增加细节](http://www.updig.org/guidelines/ph_resolution.html)
3. [Calculate resolution at the final output size — 有效分辨率算法：裁切后保留的像素除以实际放置尺寸](https://graphicaccord.co.uk/knowledge/effective-image-resolution/)
4. [Material Design: Imagery — 文字遮罩的透明度区间与渐变长度建议](https://m1.material.io/style/imagery.html)
5. [NN/g: Ensure High Contrast for Text Over Images — 图片上文字的对比度要求与几种修法](https://www.nngroup.com/articles/text-over-images/)

---

原文：https://pangzhengboyin.com/articles/image-resolution-cropping-text-over-photo-b014e6da

> **庞征博引** · 想学的，慢慢都会
>
> 庞征博引是把想学的东西写成连载的 AI 学习工具：每篇 5–10 分钟，边读边问，接下来学什么跟着你走。这篇就是这样写出来的。
>
> 开始你自己的连载 → https://pangzhengboyin.com