记录前端图片知识点：尺寸、分辨率、DPI 与倍图的概念

这是一篇写给自己、也写给所有被图片的「分辨率 72×72」绕晕过的前端同学的笔记。

一个真实的困惑

某天设计师甩来一张 banner，我在访达里打开看信息：

• 尺寸：1920 × 1080
• 分辨率：72 × 72

我们 leader 常说「图片至少要 300 分辨率才清晰」。我一看 72，慌了，跑去找设计师要高清图。设计师特别不耐烦：「网页上 72 和 300 没区别，你直接用。」

谁对？这篇笔记就是把这件事，连同它背后的一整套概念梳理清楚。

一、先分清三个概念

前端谈图片知识，绕不开三个词，分别如下：

1. 图片大小（File Size，文件大小）

文件本身占多少存储空间，单位是 KB、MB。由像素总量、颜色深度、图片格式与压缩算法、内容复杂度共同决定。

同一张 1920×1080 的照片，存成 PNG 可能 3MB，JPEG 可能 400KB，WebP 可能 200KB，AVIF 可能 120KB。

文件大小是性能问题——它直接决定网页加载速度。

2. 图片尺寸（Dimensions，像素尺寸）

图片在水平和垂直方向各有多少个像素点，写作 宽 × 高，如 1920 × 1080。

这是图片最本质、不可篡改的物理事实。一张图本质上就是一个像素点组成的矩形网格。1920 × 1080 就是 2,073,600 个像素点，约 200 万。

这里要记住一个关键区分：

• 固有尺寸（Intrinsic Size） ：图片文件本身的像素尺寸。
• 显示尺寸（Rendered / CSS Size） ：在网页中实际显示的尺寸，由 CSS 控制。

这两者可以不相等——这正是后面理解倍图的钥匙。

3. 分辨率（Resolution）——困惑的源头

「分辨率」这个词在不同语境下含义不同，这是所有混乱的根。它至少有两个意思：

含义 A：像素密度（PPI / DPI）

PPI = Pixels Per Inch，每英寸塞多少像素，描述像素的「密集程度」。它主要用于打印。

含义 B：屏幕分辨率

显示器的总像素数，如 4K = 3840 × 2160。这描述的是设备的能力，不是图片本身。

而 Mac 访达里那行写着 72×72 的「分辨率」，指的是含义 A：PPI——而且是水平、垂直各一个值，绝大多数图两个值相同，所以常见 72×72、96×96、300×300。

二、关键点：那个 72×72 只是个「标签」

这是整篇笔记最反直觉、也最重要的一点：

PPI 那个数字不是从图片像素里算出来的，而是单独写进文件头的一行备注（metadata）。它不影响任何一个像素。

你的图真正的、不可改变的事实只有一个：

它就是 1920 × 1080 = 2,073,600 个像素的方格阵列

而 72 PPI 只是文件里附带的一句话：「如果你要把我打印出来，建议每英寸放 72 个我的像素。」

你甚至可以用十六进制编辑器找到这个 72 把它改成 300：

• 像素一个没多，还是 1920×1080
• 文件大小一个字节没变
• 屏幕显示像素级完全一致

它唯一改变的，是打印机会被告知「把像素挤得更密」。

为什么偏偏是 72？ 历史遗留：早期苹果显示器约定 72 像素 ≈ 1 英寸（对应排版里 72 point = 1 inch），所以很多软件、截图工具默认就把图标成 72 PPI。它纯粹是个默认标签，没有任何技术约束力。

三、唯一需要记住的公式

PPI 真正起作用的地方只有一个——打印：

物理打印尺寸（英寸） = 像素尺寸 ÷ PPI

拿那张 1920×1080 的 banner 代入：

PPI	打印宽度	效果
72（当前值）	1920 ÷ 72 ≈ 26.7 英寸	很大，但粗糙
150	1920 ÷ 150 ≈ 12.8 英寸	中等
300	1920 ÷ 300 ≈ 6.4 英寸	小，但印刷级精细

像素一个没变，文件一个字节没变，仅仅因为 PPI 标签不同，「建议打印多大」就完全不同了。PPI 越高，同样的像素被挤进越小的物理面积，打印越精细但越小。

所以那场争论的答案是：设计师对。

• 在屏幕上（网页、App、预览），系统只看像素尺寸 1920×1080，完全无视 PPI 标签。一张标 72 和一张标 300 的同尺寸图，在屏幕上显示得一模一样。
• DPI 标签不是没用，它只是对屏幕没用——拿去打印时，72 和 300 是真有天壤之别的。分寸要拿准：是「对屏幕没用」，不是「完全没用」。

四、那……Retina 屏上的图为什么会糊？（这里需要引入 DPR）

如果屏幕只认像素尺寸，为什么有时候图在 iPhone、MacBook 上看起来还是糊？这就要引入前端必须吃透的概念——设备像素比 DPR（Device Pixel Ratio） 。

CSS 像素：你在 CSS 里写的逻辑单位，如 width: 393px
物理像素：屏幕上真实点亮的像素点

DPR = 物理像素 / CSS 像素

设备	DPR	含义
普通显示器	1	1 个 CSS 像素 = 1 个物理像素
Retina / 多数手机	2	1 个 CSS 像素 = 4 个物理像素（2×2）
高端手机	3	1 个 CSS 像素 = 9 个物理像素（3×3）

图糊的根本原因就在这：

你写：  img { width: 393px; }   ← CSS 像素（逻辑单位）

普通屏 DPR=1：
  393 CSS 像素 → 393 个物理像素
  给 393 像素的图：1 个图素配 1 个物理点 → 清晰 ✓

Retina 屏 DPR=2：
  393 CSS 像素 → 786 个物理像素（要点亮这么多点）
  ① 给 393 像素的图：1 个图素被拉去涂 4 个物理点 → 糊 ✗
  ② 给 786 像素的图：1 个图素刚好配 1 个物理点 → 清晰 ✓

判断一张图在某个屏幕上会不会糊，方法极其简单：

图的像素宽度  vs  它实际要占的物理像素宽度
（实际物理像素 = CSS 显示宽度 × 屏幕 DPR）

够，就清晰；不够，就糊。全程和 PPI 标签无关。

五、@2x / @3x 倍图，在解决什么？

这里是无数人（包括很多设计师）栽跟头的地方。最深的误解是：「做 2x 图 = 把图导出成更高 DPI」。

错。倍图和 DPI 标签毫无关系。 真相是：

@2x 图 = 在「像素尺寸」上做一张原来 2 倍大的图（如 300×400 → 600×800），然后用 CSS 把它显示回原来的物理大小。

一句话精髓：「显示出来的大小没变，但这块地方里塞的真实像素多了一倍。」

注意这里有意制造了一个「不相等」：

• 像素尺寸：翻倍（600×800）
• 显示尺寸：不变（CSS 里还是占 300px）

@2x 的全部意义，就是让图片的真实像素数，追上高清屏被放大后的物理像素数。它解决的是「像素不够分」，而不是「PPI 标签太小」。

⚠️ 术语精确度提示：与其笼统说「@2x 和尺寸有关」，更准确的说法是「 @2x 关心的是像素尺寸，不是显示尺寸」。把这两个词分开念，讲解才滴水不漏，别人也不会把这两个尺寸混成一个。

六、几倍图、谁说了算、以及代价

决定用几倍图的，是屏幕，不是图

用不用 @2x，不取决于图本身，取决于用户屏幕的 DPR：

• 普通屏 DPR=1 → 1x 够用
• Retina 屏 DPR=2 → 需要 2x 才不糊

但你不该自己猜用户用什么屏。正确做法是把几个尺寸都备好，让浏览器按它检测到的 DPR 自动挑。

用 srcset 让浏览器自动适配

针对 DPR 的写法：

<img src="banner.jpg"
     srcset="banner.jpg 1x, banner@2x.jpg 2x, banner@3x.jpg 3x"
     alt="Banner">

更完整的、同时按视口宽度选择的写法：

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w,
          photo-800.jpg 800w,
          photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="示例图片">

浏览器会综合 屏幕 DPR + 视口宽度 + sizes 描述，自动下载最经济且清晰的那张——同时优化了清晰度和文件大小。

为什么不无脑上 @5x、@10x

因为像素越多文件越大，文件越大越费带宽、加载越慢。Retina 屏最多 2x、3x 能被肉眼分辨出差别，再往上人眼根本看不出来，纯粹是拿用户的流量和加载时间打水漂。

所以原则是 「够用就好」，不是「越大越好」。

一个具体场景：张三普通屏，李四 Retina

同一个 1920×1080 的 banner：

• 只丢一张 1x：张三（DPR=1）看着正常；李四（DPR=2）会觉得偏糊——他的屏幕想要双倍像素，你没给够。
• 只丢一张 2x 大图：李四清晰了，但张三（DPR=1）根本用不上那么多像素，白白多下载了一张大文件，浪费的是流量和加载速度。
• 正解：用 srcset 把 1x / 2x 都备好，浏览器各取所需。

矢量图：跳出像素的束缚

以上全部针对位图（JPEG / PNG / WebP，由像素网格构成，放大必糊）。

SVG（矢量图）用数学公式描述图形，没有「固有像素尺寸」，在任何 DPR 的屏幕上都锐利如初，且文件通常极小。所以图标、Logo、简单插画优先用 SVG——它与分辨率无关（resolution-independent）。

七、一张表收束全部

概念	本质	网页中是否重要	关键影响
图片尺寸（像素）	图片有多少像素点	⭐ 最重要	决定清晰度上限和文件大小
图片大小（文件）	文件占多少存储	⭐ 很重要	决定加载速度
分辨率 PPI/DPI	像素密度（标签）	✗ 网页完全无视	仅打印场景有意义
DPR（设备像素比）	物理 / CSS 像素比	⭐ 前端必懂	决定要准备几倍图

八、可以直接背下来的几句话

1. DPI/PPI 只对打印有效，屏幕只认像素尺寸。 这是整条线的地基。
2. 改 PPI 标签 = 改一句只给打印机看的空话，像素、文件、屏幕显示纹丝不动。
3. @2x 的本质 = 像素翻倍，但显示大小不变，和 DPI 标签零关系。
4. DPI 不是「没用」，是「对屏幕没用」——拿去打印，72 和 300 天差地别。
5. 用几倍图取决于屏幕 DPR，不取决于图；用 srcset 让浏览器自动挑。
6. 图不是越大越清晰才好，过大的图浪费带宽、拖慢加载，够用就好。
7. 图标 / Logo 优先 SVG，矢量与分辨率无关，永不糊。

一句话总结心智模型：

像素数量 = 清晰度的本钱；显示尺寸 = 这笔本钱被摊开多大；PPI 标签 = 一句只对打印机有效的建议。 三者各司其职，再也不会打架。

附：日常自检清单

拿到一张图、要往页面上放之前，问自己三个问题：

1. 它有多少像素？ （够不够覆盖「CSS 显示宽度 × 目标 DPR」？）
2. 文件多大？ （会不会拖慢加载？要不要换 WebP/AVIF、要不要 srcset？）
3. 要不要管 PPI？ —— 网页：不用。打印：才用。

搞定这三个，图片这块就稳了。