格式对比
JPG、PNG、WebP 怎么选？用三张自制样例比较
查看渐变图、线条图和透明标记的实际字节数与可下载结果，理解不同图像内容怎样影响格式选择。
把同一张原图导出为不同格式并实际检查，比笼统推荐一种格式更容易做决定。我们为这篇文章制作了三张合成测试图，再用当前 Imgkind 压缩工具处理。
样例分别突出渐变细节、锐利边缘和透明区域。它们不是相机照片，测试数字也不能代表所有图片。你可以下载原文件，在自己的浏览器中复现。
先看限制，再检查候选格式
先看接收方：上传表单可能只接受 JPG，自己的网站则可以选择其他格式。接着判断透明区域和清晰边缘是否影响图片用途。
线条图适合把 PNG 留作候选；渐变样例值得试 WebP。透明标记需要同时检查背景和体积。文件有效，不代表它适合原来的布局。
| 用途 | 先试哪种 | 还要检查什么 |
|---|---|---|
| 限制格式的上传表单 | 允许的格式，例如 JPG | 表单能接收，细节仍清楚 |
| 线条或小字图形 | PNG，再比较 WebP | 按实际显示尺寸检查边缘 |
| 透明图形 | PNG 或兼容的 WebP | 透明区域是否保留 |
| 自己网站的插图 | 比较 JPEG 和 WebP | 体积、外观和接收端支持 |
用 100% 缩放观察线条图
下载原 PNG 和 JPEG 输出，放大检查白底上的深色边缘，观察是否出现轮廓或块状变化。文章里的自适应缩略图，可能隐藏这些差异。
把透明背景作为独立要求
压缩工具输出 JPEG 时会使用白底，因此它不能直接替代透明标记。把 PNG 和 JPEG 放到有颜色的幻灯片上，更容易看出实际区别。
格式转换工具与压缩工具使用不同编码流程和设置。这些测量描述的是方法说明里的 Canvas 压缩工具，不是站内所有工具的统一表现。
原创实测：样例文件与字节数
2026 年 10 月 12 日，在 macOS 的 Codex 内置浏览器中，使用 Imgkind Canvas 压缩工具实际处理。输入为自制合成 PNG，保持像素尺寸不变；JPEG 和 WebP 使用质量 80，PNG 不使用该质量设置。表中为真实字节数；工具的 KB 显示按每 KB 1024 字节换算。
| 样例 | 原始 PNG | JPEG · 80 | WebP · 80 | PNG |
|---|---|---|---|---|
| 渐变与细节网格960 × 640 px | 706,133 B | 61,795 B | 44,200 B | 138,496 B |
| 锐利线条图960 × 640 px | 7,864 B | 56,394 B | 11,650 B | 16,959 B |
| 透明标记512 × 512 px | 12,078 B | 7,872 B | 7,404 B | 23,522 B |
三张样例不能代表所有照片或文档。质量数值相同不等于视觉质量相同；JPEG 会用白底替换透明区域，素材属性也会变化。不同浏览器可能生成不同字节数，可用下方原图和生成脚本自行复现。
操作步骤
- 下载三张原图，或完整实验 ZIP。
- 在图片压缩工具中选择它们，先以 JPEG、质量 80 处理，查看逐张字节数。
- 重新从原图开始，分别测试 WebP 质量 80 和 PNG 输出。
- 按 100% 缩放比较边缘与透明区域。
- 结合实际用途选择候选格式，再用自己的图片重做比较。
实用建议
- 两个编码器的质量值同为 80，不等于视觉质量相同。
- 原 PNG 与重新编码的 PNG，可能采用不同压缩策略。
- 复现本次实验时，应保持原始像素尺寸。
常见问题
WebP 一定最小吗？
不一定。本次线条图的原始 PNG，比测试的两种有损输出都小。
样例是真实照片吗？
不是。它们是 Imgkind 自制的确定性合成图，提供生成代码和样例文件。
我可以使用样例吗？
可以。这组图形和输出由 Imgkind 为实验制作，开放用于自行测试。