Photopea 怎么把透明 PNG 导出为 WebP：导出面板与透明背景核对

需要把一张带透明背景的 PNG 交给网页端或设计同事时，直接改文件后缀并不会得到可靠的 WebP。Photopea 网页版可以在浏览器里打开文件或新建透明画布，再从“文件 → 导出为”进入格式面板；关键是先看到棋盘格透明区域，最后再检查 WebP 的透明预览。

最稳的路径是：确认透明背景 → 打开“文件 → 导出为” → 选择 WebP → 保持透明选项 → 导出并检查文件后缀与预览。

第1步：从 Photopea 官方入口进入编辑器

打开 Photopea 官方网站，点击首页的“Start using Photopea”。页面会进入 Photopea 编辑器，而不是要求先安装客户端。这个入口适合临时处理一张 PNG；涉及私人素材时仍应先确认文件不包含账号、合同或个人信息。

看到顶部“文件、编辑、图像、图层”等菜单，左侧出现工具栏，说明已经进入编辑器。若仍停留在宣传首页，不要开始找导出菜单。

第2步：打开 PNG 或建立透明画布

已有文件时，按“文件 → 打开”，选择 PNG。文件载入后，画布中没有像素的区域会显示灰白棋盘格。如果只是验证导出流程，也可以点“新建”，在“背景色”下拉框选择“透明”，再点击“创建”。

新建透明画布后，图层缩略图与画布会保留棋盘格。下面这张实际界面可用来做导出前检查：中央画布是棋盘格，右侧图层面板仍显示 Background 图层。

可见成功状态是：画布透明区域没有被白色或其他底色填满。若 PNG 原本有白底，这一步不会自动抠图，需要先处理图层，再继续导出。

第3步：从“文件 → 导出为”选择 WebP

点击顶部“文件”，再选择“导出为”。不要选择“存储为 PSD”，那是 Photopea 工程文件，不是交付给网页使用的图片格式。文件菜单截图中可以看到“导出为”位于保存相关选项之后。

在格式列表中选择 WebP。导出面板通常会提供质量设置；透明画布不需要额外铺白底，保留透明背景即可。若导出面板显示尺寸、质量或文件名，先按交付需求填写，再执行导出。

第4步：保存后核对 WebP 是否仍然透明

点击导出按钮后，浏览器会下载 WebP 文件。先在下载记录中确认文件后缀是 .webp，再把它重新拖回 Photopea，或用支持透明预览的图片查看器打开。重新打开后仍看到棋盘格，才说明透明通道被保留下来。

质量滑块应该怎么取

图标或界面素材边缘较多时，质量不要一开始就压得很低；照片类素材可以在文件体积和细节之间取平衡。透明是否存在与质量不是同一个开关，不能用“文件变小了”推断透明导出成功。

最容易踩到的三个坑

• 把“存储为 PSD”当成 WebP 导出，得到的是工程文件。
• 新建画布时背景色仍是“白色”，导出的 WebP 自然会带白底。
• 只看下载文件名，不重新打开检查，无法发现透明通道被填充的问题。

相关问题

Photopea 导出 WebP 后为什么看起来是白底？

先回到源文件看棋盘格。如果源文件本身已经有白色 Background 图层，导出 WebP 时白底会被正常保留；需要先隐藏或删除该图层。

PNG 一定比 WebP 更适合透明图片吗？

不一定。PNG 适合无损和像素边缘清晰的素材，WebP 往往更节省体积；最终选择要结合接收方的浏览器、设计软件和体积要求。

没有安装 Photopea 客户端也能完成吗？

可以。Photopea 官方页面直接在浏览器中提供编辑器入口，本轮操作没有使用桌面安装包。

小结

这项任务的检查点只有三个：进入真实编辑器、导出前确认棋盘格透明区域、下载后重新打开确认透明通道。顺序不能颠倒；尤其不要因为文件名是 WebP，就跳过最后一次预览核对。