JPEG、PNG 与 WebP:先复核再选择

从透明度、内容、编码行为、接收端支持和实测结果比较浏览器图片输出。

先列出不能妥协的要求

必须保留 Alpha 透明度:排除 JPEG,测试 PNG,并在接收端支持时测试 WebP。

无 Alpha 的照片:在可接受画质下比较 JPEG 与 WebP。

文字、图表或界面截图:检查 PNG 与 WebP 边缘,不预设唯一赢家。

接收端未知:转换前先确认可接受的 MIME 类型。

实测对比:透明标志

使用四角透明的 1200 × 800 PNG 标志。PNG 应检查 image/png 与 Alpha;本转换器的 JPEG 路径会填充白色并应显示 image/jpeg,要检查抗锯齿边缘;WebP 只有在 Blob.type 为 image/webp 时才下载,并要在目标上传器或编辑器中测试。

质量值不是保留信息的百分比

JPEG/WebP 滑块只是 Canvas 编码提示。0.9 不表示 90% 保真、90% 字节或无损。应在最终显示尺寸下比较多个生成文件,并测量每个实际文件。

命名前先发现编码回退

请求格式不受支持时,Canvas 序列化可能返回另一类型。AIGClub 工具会比较实际 Blob MIME 与请求,不会在回退后生成误导性的 .webp 或 .jpg 下载。

不要推断元数据、色彩或动画行为

像素解码再导出不能建立 EXIF、其他元数据、ICC 配置、动画或精确色彩解释的契约。保留源图;任何属性成为硬性要求时,使用专用检查流程。

针对一个接收端做验收测试

记录本次测试的浏览器与操作环境。

打开下载结果,确认 MIME 与固有像素尺寸。

检查透明或背景、渐变、锐利边缘、小字和照片细节。

测量字节,并在真实接收端上传或打开。

保留源图和证据,因为软件版本会改变支持。

常见问题

关于本文主题

WebP 一定比 JPEG 或 PNG 小吗?

不一定。画面内容、编码器、设置和所需画质共同决定实测字节,应比较实际输出。

透明标志转 JPEG 为什么显示白色?

JPEG 没有 Alpha,本转换器会在编码前主动铺白;批准前仍要检查边缘像素。

PNG 导出能否代表整个流程无损?

不能笼统保证。PNG 像素编码不等于浏览器解码、元数据、色彩配置或前序处理都有同一保证。

怎样确认浏览器真的生成了 WebP?

检查输出摘要或下载文件 MIME;只有 Blob.type 与 image/webp 一致时,工具才显示下载。

延伸阅读

继续探索