导出时不必把所有选项拉满。先确定文件要交给谁、显示多大、有没有文字或透明区域,再选择格式与质量。下面先给选择表,再看同一份像素编码后到底有多大。
先按交付要求选格式
| 你的交付要求 | 先选 | 还要检查 |
|---|---|---|
| 网页上的照片或连续色调素材 | WebP | 目标系统是否接受;看实际文件与画质 |
| 第三方系统要求常见照片格式 | JPG | 透明区域会铺白,细小文字可能出现伪影 |
| 清晰截图、图形或无损中间文件 | PNG | 照片类内容的文件可能很大 |
| 需要透明背景 | PNG 或 WebP | 源图是否确有透明通道;导出后重新检查 |
| 对方要求单页文档附件 | 当前导出是 JPEG 图片嵌入单页,不会变成可编辑文字 |
两张 1024 × 1024 素材的编码结果
本次于 2026 年 9 月 10 日,在 macOS 的无头 Chrome 152 中,用 Canvas 对同一份 1024 × 1024 像素分别编码。人像样本来自站内既有素材;文字样本是包含小字、细线、纯色与渐变的合成测试图。质量值采用当前编辑器的映射;这是编码环节测试,不是完整编辑器导出性能测试。
| 格式 | 界面质量 | 人像素材 | 文字测试图 |
|---|---|---|---|
| PNG | — | 1343.5 KiB | 266.5 KiB |
| JPG | 60 | 68.0 KiB | 50.6 KiB |
| JPG | 85 | 125.3 KiB | 77.0 KiB |
| JPG | 100 | 330.9 KiB | 149.5 KiB |
| WEBP | 60 | 41.1 KiB | 30.4 KiB |
| WEBP | 85 | 78.1 KiB | 43.0 KiB |
| WEBP | 100 | 170.5 KiB | 70.9 KiB |
这张人像在质量 85 时,JPG 为 125.3 KiB,WebP 为 78.1 KiB。但同一个质量数值不代表两种格式具有相同观感,不能只按这一行宣布某种格式永远更好。文字测试图即使有损文件更小,也要看细字边缘是否还能接受。

重点看字母周围的杂色、细线附近的边缘,以及头发与天空的交界。网页缩小展示可能遮住差异,可以打开原尺寸对照图再看。PNG 保留的是这份输入像素,不会修复源素材原本已有的压缩或模糊。
下载本次样本:人像 PNG、JPG 85、WebP 85、文字测试图。完整字节数、浏览器标识与测试方法在测量记录中。
质量滑块不是清晰度百分比
JPG、WebP 与 PDF 使用有损质量控制;PNG 不显示该选项。当前编辑器将 1~90 映射为编码器的 0.01~0.90,将 90~100 映射为 0.90~0.98。因此界面质量 100 也不代表无损。WebP 格式本身可以无损,但当前面板没有单独的无损开关。
实操时先试 85,再分别导出 75 和 95,看你真正关心的部位与文件体积。不要把数字理解为“保留了多少百分比细节”,也不要把不同格式的同值当作等画质。浏览器接口的质量参数说明见 MDN:Canvas toBlob.
先定尺寸,再压质量
把本次人像从 1024 × 1024 缩到 512 × 512,仍用 WebP 85,文件从 78.1 KiB 降到 28.6 KiB。像素总数变为四分之一,文件体积却没有严格按四分之一变化。缩小也会减少细节,只有目标尺寸允许时才这样做。
网页配图可从“实际显示宽度 × 目标像素密度”计算:例如 600 CSS 像素宽、按 2 倍像素密度准备,可从 1200 像素宽开始,并保持宽高比。平台有明确规格时以平台为准;源图不足时,单纯放大导出不会增加原始细节。
PDF 到底增加了什么
当前实现将画面铺在白底上编码成 JPEG,再放入单页 PDF。它增加的是文档容器,不是图层、矢量文字或清晰度。透明会丢失,质量滑块仍影响内部 JPEG。没有纸张规格、页边距、多页排版或印前色彩设置;需要精确打印交付时,用支持这些设置的排版工具。
最后检查三件事
- 重新打开导出文件:格式、宽高、透明与目标要求一致吗?
- 以实际使用尺寸看整图,再以 100% 查看文字、渐变和高反差边缘。
- 保留源文件;需要继续编辑的拍平中间文件用 PNG,交付版另存。


