导出与交付

PNG、JPG、WebP、PDF 怎么选:用两张图测一次

同一张人像素材和文字测试图,比较格式、质量与实际文件体积;附局部放大图、原始文件和复现条件。

visdraw 团队阅读约 6 分钟更新于 2026年9月10日

导出时不必把所有选项拉满。先确定文件要交给谁、显示多大、有没有文字或透明区域,再选择格式与质量。下面先给选择表,再看同一份像素编码后到底有多大。

先按交付要求选格式

你的交付要求先选还要检查
网页上的照片或连续色调素材WebP目标系统是否接受;看实际文件与画质
第三方系统要求常见照片格式JPG透明区域会铺白,细小文字可能出现伪影
清晰截图、图形或无损中间文件PNG照片类内容的文件可能很大
需要透明背景PNG 或 WebP源图是否确有透明通道;导出后重新检查
对方要求单页文档附件PDF当前导出是 JPEG 图片嵌入单页,不会变成可编辑文字

两张 1024 × 1024 素材的编码结果

本次于 2026 年 9 月 10 日,在 macOS 的无头 Chrome 152 中,用 Canvas 对同一份 1024 × 1024 像素分别编码。人像样本来自站内既有素材;文字样本是包含小字、细线、纯色与渐变的合成测试图。质量值采用当前编辑器的映射;这是编码环节测试,不是完整编辑器导出性能测试。

格式界面质量人像素材文字测试图
PNG1343.5 KiB266.5 KiB
JPG6068.0 KiB50.6 KiB
JPG85125.3 KiB77.0 KiB
JPG100330.9 KiB149.5 KiB
WEBP6041.1 KiB30.4 KiB
WEBP8578.1 KiB43.0 KiB
WEBP100170.5 KiB70.9 KiB
1 KiB = 1024 字节。PNG 没有质量选项;不同编码器、素材与浏览器版本会得到不同结果。

这张人像在质量 85 时,JPG 为 125.3 KiB,WebP 为 78.1 KiB。但同一个质量数值不代表两种格式具有相同观感,不能只按这一行宣布某种格式永远更好。文字测试图即使有损文件更小,也要看细字边缘是否还能接受。

PNG、质量60的JPG和WebP局部对照,上排是文字,下排是人像边缘
从左到右:PNG、JPG 60、WebP 60。截取编码后的同一区域并放大 2 倍,关闭平滑;这张对照图以 PNG 保存,避免再次有损压缩。

重点看字母周围的杂色、细线附近的边缘,以及头发与天空的交界。网页缩小展示可能遮住差异,可以打开原尺寸对照图再看。PNG 保留的是这份输入像素,不会修复源素材原本已有的压缩或模糊。

下载本次样本:人像 PNGJPG 85WebP 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,交付版另存。

作者 · visdraw 团队 / 产品与工程

标签 · 图片导出 / PNG JPG WebP / 压缩质量 / 像素尺寸