WebP 转换器：如何将图片转换为 WebP 格式（并显示实际尺寸）

最后更新时间: June 27, 2026

将图片转换为 WebP 是提升网页性能最快速的改进之一 — 对于相同内容，WebP 比 JPEG 小约 25–35%，比 PNG 更小得多，并且拥有约 98% 的浏览器支持。本指南将展示如何将图片转换为 WebP，并提供预期的测量文件大小，以及为仍需要 JPEG 的浏览器保留回退方案的方法。

快速答案：如何转换为 WebP？

使用 cwebp 命令行进行快速处理和批量转换；使用浏览器转换器处理单个图片；或使用 Pillow 处理脚本。对于典型的照片，在匹配的质量下，从 JPEG 到 WebP 可以将文件大小减少约 30–45%。

WebP 实际节省了多少空间？

在一张 1400×933 的照片上测量，并以视觉匹配的质量进行转换：

对于 PNG 图形，无损 WebP 通常比具有相同像素质量的 PNG 小 20–30% — 这对于透明的 UI 资产非常有用。所有四种格式使用相同的源图片使得这种差距显而易见：

完整的格式比较可以在 image formats explained 中查看。

您应该选择 WebP 还是 AVIF？

它们都比 JPEG 小；AVIF 比 WebP 再小 20–30%，但编码速度更慢，且浏览器支持度略低。对于大多数网站来说，实用的答案是：同时发出 AVIF 和 WebP，并保留 JPEG 回退方案，让 <picture> 元素为每个浏览器提供其支持的最佳格式。如果只能添加一个，选择 WebP 更安全，因为它编码速度快且支持更广泛。当您准备添加 AVIF 时，请参阅 AVIF vs WebP comparison。

方法 1：浏览器转换器

对于单个图片，请使用 Imagic AI Image Converter：上传、选择 WebP、为照片设置约 80 的质量（或图形的无损模式），然后下载。若需要实时查看质量/尺寸控制，Squoosh 会在您移动滑块时显示输出大小。

方法 2：cwebp 命令行

cwebp 是官方的 WebP 编码器，速度快且易于脚本化。

## Lossy WebP from JPEG/PNG, quality 80
cwebp -q 80 input.jpg -o output.webp

## Lossless WebP (best for graphics, screenshots, sharp text)
cwebp -lossless input.png -o output.webp

## Resize to 1600px wide while converting
cwebp -q 80 -resize 1600 0 input.jpg -o output.webp

## A whole folder, in parallel
mkdir -p out
ls *.jpg | xargs -P 4 -I {} cwebp -q 80 {} -o out/{}.webp

若要解码，使用 dwebp；如果您已经在使用 ImageMagick，其 magick 也支持读取和写入 WebP。有关并行文件夹模式，请参阅 batch resize guide。

方法 3：Python (Pillow)

对于构建步骤或服务器，Pillow 可以进行转换并允许您以程序化的方式控制质量：

from PIL import Image
from pathlib import Path

def to_webp(src: Path, dest: Path, quality: int = 80, lossless: bool = False):
    with Image.open(src) as img:
        img.save(dest, "WebP", quality=quality, lossless=lossless, method=6)

for f in Path("images").glob("*"):
    if f.suffix.lower() in (".jpg", ".jpeg", ".png"):
        to_webp(f, Path("out") / f"{f.stem}.webp", quality=80)

method=6 是最慢的、最佳压缩编码努力——当您在上传时进行一次性编码，而不是每次请求时发生时是合适的。对于无损图形，请传递 lossless=True。

如何为 WebP 提供回退方案？

WebP 的支持率约为 98%，但剩余的 2%（旧版 Safari、某些嵌入式浏览器）需要 JPEG/PNG 回退方案。使用 <picture> 元素：

<picture>
  <source srcset="/img/photo.webp" type="image/webp">
  <img src="/img/photo.jpg" alt="Description" width="800" height="600" loading="lazy">
</picture>

浏览器会选择它支持的第一个类型。保留一个带有 JPEG src 的真实 <img> 作为最终回退，以防没有任何内容显示为空白。如果您还生成了 AVIF，请将其作为第一个 <source> 添加 — 请参阅 AVIF vs WebP comparison。

您应该使用什么质量和方法设置？

对于有损 WebP 照片，75–80 的质量是最佳选择 — 文件小，在正常观看距离下没有可见的损失。低于 70，平滑渐变和肤色开始显示伪影；高于 85，您花费的字节肉眼无法察觉。-m (method) 参数是用编码时间换取更小的文件：-m 0 最快，-m 6 最慢但能产生最小的输出。对于交互式工作使用 -m 4，对于一次性批量编码（速度不重要）使用 -m 6。

对于无损 WebP（图形、截图、锐利文本），-lossless -m 6 能提供最佳的比例；与相同内容相比，无损 WebP 比 PNG 大约优秀 20–30%。如果一个图形颜色很少，也尝试先减少调色板——颜色越少，在任何无损格式中压缩效果就越好。这些调整细节与 image compression deep dive 中的更广泛指导是一致的。

何时不适合使用 WebP？

• 电子邮件。 许多邮件客户端忽略 WebP。请为电子邮件使用 JPEG/PNG。
• 旧嵌入式浏览器（早于 WebP 支持的旧智能电视、自助终端）。
• 合作伙伴/市场平台 Feed，它们只接受 JPEG。
• 当工具链无法发出它时。 如果您的 CMS 无法提供 <picture>，那么采用仅支持 JPEG 的流程比对抗它更简单。

对于这些情况，format guide 提供了正确的替代方案。

常见错误

• 转换后没有调整尺寸。 一个 4000px 的 WebP 文件仍然是一个 4000px 的下载。请先调整尺寸。
• 对锐利图形使用有损 WebP。 有损 WebP 会模糊细边，就像 JPEG 一样；对于截图和文本，请使用 -lossless。
• 提供 WebP 但没有回退方案。 旧浏览器如果没有 JPEG <img> 回退，将无法渲染任何内容。
• 在相同的质量数字下进行比较。 视觉感知质量上，JPEG q85 ≈ WebP q80 ≈ AVIF q68；请进行视觉比较，而不是按数字比较。
• 每次请求都过度编码。 上传时编码一次；WebP 的编码速度比 JPEG 慢。

常见问题解答

WebP 实际节省了多少空间？

与等质量的 JPEG 相比，小 25% 到 35%，对于带有透明度的图形来说，通常比 PNG 更小。节省的空间是进行网页交付转换的原因。将原始文件作为主图保留；为交付导出 WebP。

我应该选择 WebP 还是 AVIF？

WebP 是安全的默认选择（通用浏览器支持，易于编码）；AVIF 适用于现代浏览器的最小文件（比 JPEG 小约 50%，但编码更慢，且在旧浏览器上存在差距）。通过 <picture> 元素使用 AVIF 并以 WebP 作为回退方案。

命令行转换是什么？

cwebp -q 80 input.jpg -o output.webp。-q 参数设置质量（80 是网页默认值）。批量处理时可以使用 shell 循环或 ImageMagick。对于无损模式，请使用 -lossless。

所有浏览器都支持 WebP 吗？

所有当前浏览器都支持。非常旧的浏览器（旧版 IE）不支持，这就是为什么您需要通过 <picture> 元素提供 JPEG 或 PNG 回退方案。回退方案覆盖了剩余的小差距。

如何批量转换到 WebP？

使用 shell 循环配合 cwebp (for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done)、ImageMagick 或 Python 脚本 (Pillow)。命令行可以处理数千个文件，没有每个文件的限制和注册要求，这也是目录册的最佳选择。请参阅 batch processing guide。

WebP 实际节省了多少空间？

与等质量的 JPEG 相比，小 25% 到 35%，对于带有透明度的图形来说，通常比 PNG 更小。节省的空间是进行网页交付转换的原因。将原始文件作为主图保留；为交付导出 WebP，并为旧浏览器提供回退方案。

WebP 是有损还是无损的？

两者都是——WebP 支持有损模式（用于照片，更小）和无损模式（精确像素，用于图形和主图）。根据内容选择：照片使用有损模式，带有锐边或文本的图形使用无损模式。这种双重支持是 WebP 取代 JPEG 和 PNG 进行网页交付的原因之一。

cwebp 命令是什么？

cwebp -q 80 input.jpg -o output.webp 将 JPEG 转换为 WebP，质量为 80。-q 参数设置质量；添加 -lossless 用于无损输出，并添加 -resize W 0 来调整到目标宽度。批量处理时使用 shell 循环：for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done。它是免费的、无限制的批处理方案。

图片鸣谢

• JPEG/WebP 之前和之后以及尺寸条形图 — 由作者使用一个电子商务风格的照片（Pexels #16675632，照片由 Mikael Blomkvist 提供）生成，以展示真实的 JPEG 到 WebP 节省空间。