PNG 与 WebP:该用哪一个

并排对比

大小和透明度的数字来自 Google 的 WebP 文档,该文档还说明带透明度的有损 WebP 通常比同等的 PNG 小三倍。

WebP 胜出的场合

• 您自己网页上的图片 每一款当前的浏览器都能显示 WebP。图片体积少四分之一,在移动网络上是实打实的速度收益。
• 带照片内容的透明图形 照片背景上的一个标志,正是带 alpha 的有损 WebP 相对 PNG 领先最多的地方。
• 大尺寸截屏和界面截图 平铺色块和锐利文字在无损 WebP 中压缩得很好,所以您保住了确切的像素,又去掉了体积。
• 任何带宽是瓶颈的地方 邮件通讯、文档站点和图片繁多的商品目录。

PNG 仍然正确的场合

把 PNG 留作母版,转换一份交付副本。这一条规则涵盖了下面的大部分情况。

1. 以后还要再编辑的文件 反复经过有损格式,每一次都会让图片劣化一点。无损母版彻底避开了这个问题。
2. 印刷和设计流程 不少排版和印前软件仍然期望 PNG 或 TIFF。把 WebP 交给印刷厂,只会招来一封您不想收的邮件。
3. 任何旧系统要打开的东西 老旧的内部工具、较早的文档查看器和某些上传表单会直接拒绝 WebP。
4. 您要发给别人的文件 使用较旧机器的同事可能无法双击打开它。这就是使用WebP 转 PNG 转换器的全部原因。

无损还是有损 WebP

WebP 是共用同一个文件扩展名的两种格式。无损模式完全保留每一个像素。有损模式丢掉编码器判断您不会注意到的细节，文件因此小得多。

标志、图表、截屏,以及任何有硬边缘或文字的内容,选无损。照片和没人会放大看的背景,选有损。文字在有损设置下会在字母周围出现柔和的光晕,这是人们最先注意到的瑕疵。

Vaultaire 转换器两种都提供。在无损模式下,它会把新文件读回来,除非输出确实是像素一致的无损 VP8L 图像,否则锁住下载。alpha 值必须完全一致,对于半透明的颜色,每个预乘的 8 位通道最多可相差 2,因为浏览器原生编码器会对这些值取整。

转换对元数据的影响

转换也是丢掉文件附带内容的一种办法。转换器不会把源文件的 EXIF、ICC、文本、时间或 C2PA 记录复制到新的 WebP 中,随后用一个独立的解析器扫描完成的文件,只要出现任何记录就让下载保持锁定。

当 PNG 来自手机截屏、相机导出或图像生成器时,这一点很重要。如果您想在决定之前先看看附带了什么,元数据查看器会把它们列出来。一切都在浏览器 worker 中运行,文件绝不会被上传。

转换器的实际限制:一张静态 PNG,最大 20 MB,任一边最多 4,096 像素,总计最多 16,000,000 像素。动态 PNG 会在解码前被拒绝,而不是悄悄导出它的第一帧。