将不透明的 PNG 转换为 WebP 并比较结果

一个摄影 PNG 值得测试 WebP 对于一个网站。 它可以是从设计工具导出的相机图像、渲染的房间场景或扁平化的宣传图形。 进行单独的导出并将其与原始导出进行比较，而不是删除 PNG 立即。 文件大小取决于图像，因此有用的节省是您实际测量的。

透明度需要特别小心。 虽然 WebP 格式可以存储 alpha，此工具当前呈现 WebP 在白色背景上的输出。 因此，一个透明的输入将失去出口中的透明区域。 保持 PNG 对于需要位于不同背景的徽标、剪切和叠加层，并将此转换用于适合不透明结果的图像。

预设保持尺寸并以 90% 的质量开始，并关闭锐化。 尝试一个有小文本的文件，另一个有摄影背景的文件。 检查细边框、彩色字体和平滑渐变。 当以预期尺寸显示时，设计可以一目了然地在标签旁边显示彩色光晕时看起来很好。

如果 PNG 是界面的屏幕截图，可读性可能比削减几个字节更重要。 比较一个 PNG出口 或者在 WebP 软化关键细节时保留源代码。 对于大型不透明照片，在进一步降低质量之前，在实际显示范围内进行测试拟合。 当网站从不显示不必要的像素时，首先减少不必要的像素，但为预期的位置保留足够的分辨率。

WebP 质量滑块控制此导出的有损编码。 更高的设置不会恢复源中缺少的细节，相同的数字并不意味着不同格式的相同视觉结果。 将其用作比较工具：稍微调整一下，检查结果并保持满足您自己质量需求的最小版本。

PNG 不会以同样的方式使用该质量控制，因此更改扩展是一个真正的工作流程选择。 如果您的 PNG 包含微小的图表标签或精确的颜色边界，则即使其文件较大，保留 PNG 也可能是正确的决定。 此转换器不会减少 PNG 调色板、生成无损 WebP 设置或编辑平面图形中的对象和图层。

下载转换后的图像并将其上传到您实际网站系统中的测试页面。 确认浏览器接收到 WebP，显示的裁剪正确，没有透明的边缘已意外变为白色。 在页面背景上查看它，特别是如果源是为黑暗部分设计的。 转换应在上下文中检查，而不仅仅是在文件预览中。

然后查看移动显示器。 大型营销图形可能需要更简单的布局而不是更压缩的副本，因为它的字体在手机上无法读取。 响应图像选择和保留维度保持独立的网站任务。 一旦样本是合理的，将文件匹配在一起。 在此转换期间，您的图像数据保留在浏览器中，源 PNG 保持不变。

例如，在转换任何品牌资产之前，在透明像素上测试白色字标。 白色不透明的输出可以完全隐藏标记，仅文件大小比较就会错过。