图像 DPI 讲透：72 DPI 与 300 DPI 在网页上到底有没有用？

一句话结论：DPI 不是网页画质开关

对于普通网页图，72 DPI 和 300 DPI 并不能决定它在网页上看起来是否清晰。浏览器真正关心的是：

• 图像的真实像素尺寸，例如 1200 × 800；
• 页面上的 CSS 尺寸，例如宽 600 px；
• srcset、sizes 之类的响应式图像规则；
• 屏幕的设备像素比；
• 导出文件所用的压缩和图像格式。

一张标为 72 DPI 的 1200 × 800 JPG 和同样是 1200 × 800、只是标签换成 300 DPI 的 JPG，在网页里看基本一样，因为像素完全相同。DPI 值本质上更像是一条打印指令。

DPI 真正开始有价值，是在图像要落到某个物理尺寸的时候。300 DPI 下的 2 × 2 英寸护照照片需要 600 × 600 像素；300 DPI 下的 4 × 6 英寸相片需要 1200 × 1800 像素。就在这时，DPI 这个数字才把像素和英寸、毫米挂上钩。

所以当有人说「给我做 300 DPI」时，最好的回问是：

这是要拿去打印，还是你其实需要一张像素更多的网页图？

DPI、PPI、像素与 CSS 像素

DPI 在实际使用里被塞进了好几种意思，这也是网上建议常常互相打架的原因。

对数字图像文件而言，PPI 是更精确的叫法。文件里没有墨点，只有像素。但大家搜的是「DPI」，照相馆说的是「DPI」，客户口中的「DPI」很多时候其实是 PPI，所以本文两个词都会用，只是会分清楚场合。

实用公式很简单：

像素 = 打印英寸 × PPI
打印英寸 = 像素 / PPI

一张宽 3000 像素的照片，可以在 300 PPI 下打成 10 英寸宽，也可以在 150 PPI 下打成 20 英寸宽，或在 72 PPI 下打成 41.7 英寸宽。文件本身没有变好或变坏，只是同样的像素在纸上被摆得更密或更疏。

图像里的 DPI 值到底在做什么

很多图像格式可以存储一个分辨率或密度值。在日常软件里，你会看到它以下面这些形式出现：

• 72 DPI
• 96 DPI
• 240 PPI
• 300 PPI
• Photoshop 里的「分辨率」字段
• JPG 或 PNG 内嵌的横向、纵向密度元数据

这个值属于元数据，作用是给尊重该密度的版面或打印机一个建议尺寸，而不会给图像加上任何细节。

以一张 3000 × 2000 的照片为例：

像素完全一样，只有建议打印尺寸在变。

很多人就是在这里跌倒的。只改 DPI 字段并不是「把图为网页调小了」，也不是压缩过，更没有让它变清晰，只是换了一张打印标签。

浏览器到底看的是什么

在常见的网页显示里，浏览器依靠的是文件的像素数据以及页面本身的布局指令。

如果 HTML 或 CSS 说这张图要以 600 CSS 像素宽度显示，浏览器就会把它排成 600 CSS 像素宽。这时如果你提供一张 1200 像素宽的原图，就有足够像素供 2 倍高分屏使用；如果只给 400 像素宽，浏览器不得不把它拉大，结果就是发糊。

于是网页图工作常常是这样的节奏：

• 主视觉图：按预期最大显示宽度导出，必要时准备一组响应式版本。
• 博客配图：除非设计要求更大，通常做一份 1200-1600 px 宽的版本。
• 缩略图：贴近实际卡片尺寸导出。
• Retina 图标：按 CSS 尺寸的 2 倍或 3 倍准备原图像素。
• 页面偏慢：调像素、压压缩，而不是去改 DPI 标签。

MDN 关于 naturalWidth 的说明在这里很有帮助——它用的是 CSS 像素来描述图像宽度，而不是「DPI 标签写多少」。MDN 关于响应式图像的指南也解释了 srcset 和 sizes 如何帮助浏览器根据布局和设备条件挑选合适的图源。

技术上还有一个细节：CSS 有一个实验性的 image-resolution 属性，W3C CSS Images 里也提到了图像分辨率元数据。MDN 目前把 image-resolution 标为实验特性，指出浏览器支持还没到生产可用的程度。所以在常规网页发布里，不要指望 JPG 或 PNG 的 DPI 元数据能左右它在页面上的实际显示尺寸。

「网页 72 DPI」是怎么成为传说的

「网页要 72 DPI」这条规则，主要是老习惯的延续。

早期桌面出版的工作流里，屏幕像素、点、英寸之间的关系比现在紧密得多。老式 Macintosh 屏幕的约定常与「每英寸 72 像素」联系在一起，Windows 与 CSS 一路走来又把 96 DPI 带进了这个话题。W3C CSS Values 定义了 1in = 96px 的固定关系，MDN 关于分辨率的文档也说明在 CSS 里 1dppx 对应 96dpi。

但这并不意味着网页图就要按 96 DPI 导出。

它只是说 CSS 为自己的布局单位准备了一个参照系。实际的网页图仍然需要与呈现尺寸相称的像素。宽 5000 px 的照片，无论标签是 72 DPI 还是 300 DPI，在 300 px 的缩略图槽位里都太重；宽 400 px 的 logo，无论 DPI 字段写什么，在 600 px 的槽位里都可能糊。

对于网页图，更值得问的是：

这张图在版面里会占多少像素？为我在意的那些屏幕，我应该提供多少原图像素？

Photoshop 的重采样陷阱

Photoshop 及类似工具会把宽度、高度和分辨率放在同一个对话框里。这对打印很方便，但对网页工作是陷阱。

Adobe 的图像大小文档把以下概念做了区分：

• 尺寸（Dimensions）：像素总数。
• 宽度和高度：随单位不同而表示物理尺寸或版面尺寸。
• 分辨率：为打印品质服务的每英寸像素数。
• 重新采样：加或减像素的动作。

关键开关就是 重新采样。

关掉重新采样时，把 72 PPI 改成 300 PPI 只会改变与打印尺寸的对应关系，像素保持不变。3000 × 2000 的文件依然是 3000 × 2000，这是纯粹的元数据操作。

打开重新采样时，改分辨率会根据宽度、高度字段增加或删减像素，图像数据会真实变动：文件可能变大或变小，画面可能变锐或变软，如果放大过猛还会出现插值伪影。

在网页用途下，别再说「把它改成 72 DPI」这种模糊指令，直接说出真正的目标：

• 「把它调到宽 1600 px。」
• 「导出一张 320 px 的缩略图。」
• 「把这张 JPG 压到 200 KB 以内。」
• 「为宽 600 CSS px 的槽位做一张 2 倍图，也就是导出宽 1200 px。」

改 DPI 会让文件变小吗？

大多数时候不会。

只编辑 DPI/PPI 元数据的话，文件大小要么不变，要么因为元数据本身变化了几个字节。图像数据仍然是同一张像素栅格。

真正会让文件变小的，是下面这些动作：

• 调整像素尺寸。
• 裁掉一部分内容。
• 降低 JPG/WebP/AVIF 的质量。
• 转换到其他格式。
• 去除 EXIF 等元数据。
• 拼合透明度。
• 减少动图的帧数或时长。

如果网站要求上传不超过 500 KB，把 300 DPI 改成 72 DPI 是错的解法。请改像素尺寸、做压缩，或者两者一起做。

300 DPI 真正有意义的场景

300 DPI 是「近距离观看的印刷」常用的省略说法，意思是打印文件里每一英寸最终输出对应 300 个像素。

典型的 300 DPI 场景：

• 护照与签证照片。
• 4 × 6、5 × 7 英寸的相片冲印。
• 小型宣传单和折页。
• 图书和杂志里的图片。
• 会被近距离审视的产品标签。
• 小字和细线很关键的扫描件。

对应算术：

打印场景里物理尺寸不可省略。单说「300 DPI」信息是不完整的：2 × 2 英寸护照照片的 300 DPI 图是 600 × 600 像素，A4 页面的 300 DPI 图约 2480 × 3508 像素，是两种规模完全不同的文件。

300 DPI 意义不大的场景

在下列用途里死盯着 300 DPI，几乎都是抓错了重点：

• 网站图；
• 社交媒体贴图；
• 邮件附件；
• 商品缩略图；
• 博客截图；
• 应用图标与界面图形；
• 会校验像素尺寸和文件大小的在线表单。

有些上传窗口在说明里提到 DPI，是因为最终结果会被打印。即便如此，窗口真正在意的常常是像素尺寸、宽高比、文件大小、色彩模式、面部位置等，而不是那个元数据标签。当要求写着「2 × 2 英寸，300 DPI」时，请把它换算成像素：600 × 600。

屏幕用途看像素要求；打印用途看像素要求加物理尺寸。

Retina 与高分屏并不是「300 DPI」

高分屏需要比老屏幕更多的原始像素，但这跟把文件元数据改成 300 DPI 是两码事。

举个例子：

• 设计里，一张商品图按 600 CSS 像素宽显示。
• 1 倍屏用一张宽 600 px 的原图就够。
• 2 倍屏可以从宽 1200 px 的原图里获益。
• 3 倍屏在细节重要时可以从宽 1800 px 的原图里获益。

图像仍然可以标 72、96 或 300 DPI，布局逻辑并不受影响。真正决定效果的是原图像素和显示 CSS 像素之间的比例。

这就是响应式图像使用 1200w 或 2x 这类描述符，而不是「300dpi」的原因。浏览器要根据实际渲染尺寸、屏幕密度和网络状况，选一张像素够用的图。

把常见需求翻译一下

不少 DPI 变更请求，其实想说的是别的事。动手改文件之前，先把请求翻译一下。

多问的这一句，往往就能挡掉大多数 DPI 相关的错误。

PhotoTools 是怎么处理 DPI 相关任务的

PhotoTools 的设计思路始终围绕真正影响输出的东西：像素。

网页工作：

1. 用调整尺寸确定真实的像素尺寸；
2. 有文件大小目标就配合压缩；
3. 原文件保持不动；
4. 用能看出用途的文件名导出网页版本，例如 hero-1600.jpg 或 card-600.webp。

护照/证件照打印：

1. 打开护照照片制作工具；
2. 选择 2 × 2 英寸、35 × 45 mm 之类的预设，或者自定义尺寸；
3. 工具会按所选 DPI 把物理照片尺寸换算为像素；
4. 在浏览器里排出 4 × 6 或 6 × 4 英寸的打印版面；
5. 按 100 % 实际大小打印，务必关闭「适应页面」；
6. 提交前用尺子量一下打出来的照片。

本地实现会用所选照片尺寸、版面尺寸和 DPI 算出像素尺寸。例如 300 DPI 下 4 × 6 英寸的版面会变成 1200 × 1800 像素的画布，300 DPI 下 2 × 2 英寸的照片框会变成 600 × 600 像素。

这才是真正的打印版面，而不是打开一张小小的网页图、把元数据字段改成 300、然后祈祷打印结果会变清晰。

实用检查清单

有人一提到 DPI，你就动手改文件之前，请对照这份清单：

• 目的地是网页？先要像素尺寸和文件大小上限。
• 目的地是打印？先要物理尺寸和目标 DPI/PPI。
• 文件太大？改像素或压缩，别改元数据。
• 图像看着糊？检查原图像素、压缩、显示尺寸。
• 打印偏软？算一算原图像素是否足够。
• 打印物理尺寸不对？检查打印机缩放和纸张尺寸。
• 是护照或签证照片？量一下打出的成品，并核对官方要求。

一句话总结：DPI 把像素和纸张连起来；决定网页的是像素和 CSS。

查证过的技术资料

本文对照了以下资料进行审校：

• W3C CSS Values and Units Module Level 4：CSS 绝对单位、分辨率单位以及 1dppx = 96dpi 的关系。
• W3C CSS Images Module Level 4：CSS 如何定义图像分辨率与 image-resolution 属性。
• MDN: image-resolution：当前实现说明，以及 CSS image-resolution 的实验状态。
• MDN: HTMLImageElement naturalWidth：浏览器如何按 CSS 像素处理图像尺寸。
• MDN: img 元素参考：srcset、sizes、宽度描述符以及浏览器选源的方式。
• Adobe Photoshop — 图像大小与分辨率：Photoshop 中尺寸、分辨率与重新采样的区分。
• Adobe Photoshop — 调整大小与重新采样：重新采样如何改动像素数据，以及分辨率、物理尺寸为何是打印侧的概念。

总结一句：真的需要靠改 DPI 标签解决问题的情况很少。先明确目的地，再去调整那个目的地真正需要的像素、压缩或打印版面。