FIELD NOTE / 07

PNG、JPEG、WebP：带文件的实测对比

相同的 600 × 600 画面，三份真实文件、精确字节数与明确的测试边界。

LumenLab 编辑台 · 更新于 2026 年 10 月 17 日

测试条件与可复现步骤

2026 年 10 月 17 日，我们在 Codex 内置浏览器打开正式站工具，加载 1024 × 1024、686,429 字节的 PNG 原图，选择 600 × 600、调整尺寸并锁定比例。每次导出都来自同一张已加载原图。JPEG 与 WebP 使用界面 82% 设置；PNG 不使用该有损画质参数。下载后另行读取文件的尺寸和字节数，记录中附有 SHA-256，便于核对是否为同一份文件。

如何读这些数字

该画面的 WebP 为 3,780 字节，JPEG 为 8,965 字节，PNG 为 408,201 字节。以 600 像素 PNG 为基准，WebP 字节数约少 99.07%，JPEG 约少 97.80%。这只是体积比较，不证明画质相等。直接与 1024 像素原图比较，还混入了缩小尺寸的影响，不能归因于格式本身。样图背景简单、颜色克制，因此这组结果的适用范围很窄。

下载后检查哪些位置

按原生 600 像素尺寸打开各文件，重点看灰背景上的浅色杯口、杯身凹槽、接触处深色阴影，以及台座的大面积平滑渐变。WebP 在这个小尺寸仍能表现主体，但不能据此声称无损。如果计划展示尺寸下出现轮廓破碎、光晕或色带，应提高画质或保留更大文件。不要看缩略图觉得正常，就把同一文件放到大屏展示。

按用途选择，不发布通用冠军

小型概念配图可以先评估 WebP 下载版；如果需要保留缩放后的像素结果或继续编辑，可将 PNG 作为中间文件，原始 PNG 仍单独留存。这张方图没有透明区，所以不能用它评估透明效果；裁剪教程中的横版完整放入另有透明留边实例。给全站设定统一参数前，应拿自己的复杂照片、文字图重复测试。浏览器版本和编码器差异也可能改变字节数。