PNG 转 WebP：提升网站图片加载速度的实用指南

PNG 与 WebP 适用于不同场景

先辨别图片内容

PNG 采用无损存储，适合截图、界面素材、标志和需要清晰边缘的图形。若 PNG 尺寸很大，或者包含照片与复杂纹理，文件体积可能明显增加。

WebP 同时支持有损、无损压缩和 Alpha 透明通道。商品缩略图、插画或透明 UI 素材可以尝试 WebP，而不必先把透明背景压平。

本指南的工作流程示意图。

避免意外的转换步骤

用实际显示尺寸检查质量

质量判断应以视觉检查为主。体积减少只有在图片仍适合实际显示尺寸时才有意义。

1. 先按用途整理文件：照片、透明图形、截图和图标分开处理。
2. 打开 ImageTool.cc 的 PNG 转 WebP 工具并批量选择文件。
3. 除非已有明确的版位尺寸要求，否则先保留原图尺寸。
4. 以 100% 比例检查文字、细线和透明边缘。
5. 下载转换结果，并将原始 PNG 保留为可编辑源文件。

本指南的工作流程示意图。

案例：电商商品列表页

把源文件与交付文件分开

假设商品目录里有 120 张 2400 像素的 PNG，而列表卡片实际只显示 480 像素。先为网页版建立符合显示尺寸的副本，再转成 WebP，通常比直接投放超大源图更有效；透明商品抠图也可以保留透明背景。

保留高质量源图，另外生成网页尺寸的 WebP，并在网页中声明图片宽高，能兼顾设计存档和页面加载。

本指南的工作流程示意图。

什么时候应该继续使用 PNG

不要覆盖唯一源文件

如果项目要求像素无损、后续会反复编辑，或下游流程依赖特定格式，PNG 仍然是合适的源文件。对于很小的图标，格式转换带来的差异也可能不值得额外维护。

• 网站交付副本和透明商品图可测试 WebP。
• 无损源稿、像素级截图和特定兼容流程可保留 PNG。
• 没有透明需求且优先考虑广泛兼容时，可比较 JPG。