WebP由Google于2010年开发，源自WebM视频格式中使用的VP8视频编解码器技术。它被设计为JPEG和PNG的统一继任者——能处理照片、图形和透明图像。核心成果：在相同视觉质量下，WebP文件通常比JPEG小25–35%，比无损PNG小约26%。对于高流量网站，这一差异直接转化为更快的加载速度和更低的带宽成本。

有损WebP：VP8编解码器

有损WebP基于VP8构建——与WebM动画帧压缩使用的是同一编解码器。这一技术传承使有损WebP拥有1992年设计的JPEG所没有的能力。

与JPEG类似，有损WebP在频域工作：将图像块转换为频率系数，然后丢弃人眼最不敏感的高频细节。但JPEG在整个图像中使用8×8的块大小，而VP8使用灵活的基于宏块的预测。在编码每个16×16宏块之前，编码器会根据已编码的相邻块预测其外观，然后只编码差异（残差）。这意味着平滑的渐变和纹理可以用更少的比特表示。

帧内预测 — VP8为亮度（亮度）宏块支持10种预测模式，包括水平、垂直、DC和对角线模式。JPEG没有等效的预测步骤。
灵活的熵编码 — VP8对残差使用算术编码而非哈夫曼编码。算术编码对图像块等相关数据能更接近理论信息熵极限。
更好的渐变和纹理处理 — 预测模式和算术编码的组合使VP8能以比JPEG少得多的伪像对天空、肤色、模糊背景等平滑渐变进行编码，在相同文件大小下效果更佳。

实际上，有损WebP在相同感知质量下实现了比JPEG小25–34%的文件大小。对于为数千张产品图片或文章照片提供服务的典型网站，切换到WebP可以在无可见质量变化的情况下将图像负载减少三分之一。

无损WebP：VP8L编解码器

无损WebP使用一个名为VP8L的独立编解码器，该编解码器专门为无损压缩开发，并非源自VP8。它被设计来取代PNG，采用了PNG的Deflate算法所没有的四种核心压缩变换。

空间预测 — 每个像素使用14种预测模式之一从已编码的相邻像素预测。只存储实际值与预测值之间的差异。
色彩空间变换 — VP8L可以变换绿色、红色和蓝色通道，使它们彼此更相关，从而使后续压缩步骤更高效。
颜色索引和调色板模式 — 当图像使用少于256种唯一颜色时，VP8L将颜色值替换为调色板索引，类似于索引颜色PNG，但编码更高效。
LZ77反向引用和哈夫曼编码 — 与PNG的Deflate类似，VP8L使用LZ77引用重复像素模式，并使用哈夫曼编码压缩输出。但VP8L在上述变换之后应用这些，使其处理的数据更加规整。

累积效果：无损WebP文件平均比同等PNG文件小26%。对于网络图形——图标、徽标、UI截图、插图——从PNG切换到无损WebP是无任何质量损失的直接收益。

Alpha通道支持

WebP相对于JPEG的一个显著优势是原生Alpha透明度支持。WebP在有损和无损模式下都支持Alpha，而JPEG根本无法存储透明度。

在无损WebP中，Alpha通道与RGB数据使用相同的VP8L编解码器进行无损压缩。在有损WebP中，颜色数据是有损压缩的，但Alpha通道仍然使用VP8L无损存储。这意味着在保持清晰、无伪像边缘的同时，透明图像也能获得有损WebP的文件大小优势。

与PNG对比 — 透明WebP通常比具有Alpha的同等PNG小3倍。对于徽标、产品抠图和具有透明度的UI元素，这是巨大的节省。
与JPEG对比 — JPEG根本无法存储透明度。将照片使用JPEG、透明资产使用PNG的工作流程可以统一在WebP下，简化图像管道。
部分透明 — 与只支持二值透明（完全不透明或完全透明）的GIF不同，WebP支持具有平滑半透明渐变的完整8位Alpha。

WebP动画

WebP通过动态WebP容器格式支持动画，该格式使用ANIM（动画元数据）和ANMF（动画帧）块存储多个帧。每个帧可以是单独的有损或无损WebP图像，容器为每个帧存储时间、循环次数和混合模式。

动态WebP相比GIF有显著优势：

色彩深度 — GIF每帧限制为256色。动态WebP支持完整的24位色彩（1670万色）加Alpha透明度。
文件大小 — 根据Google自己的基准测试，动态WebP文件有损情况下比同等GIF小64%，无损情况下小19%。
透明度质量 — GIF只有1位Alpha（开/关）。动态WebP支持每帧平滑的8位Alpha，实现干净的淡入淡出效果和平滑边缘。

对于以前作为GIF提供的网络动画——表情包、贴纸、短循环——动态WebP以极小的文件大小提供了显著更好的质量。

有损WebP的质量设置

有损WebP接受0到100的质量参数，类似于JPEG质量。值越高，在更大文件大小的代价下保留更多细节。关系不是线性的：从100降到约85时获得最大的文件大小节省。

质量75–85 — 大多数网络图像的最佳点。在质量80时，WebP文件比质量80的JPEG小约30%，视觉输出相近。这是产品图像、文章照片和营销资产的推荐范围。
质量60–75 — 适用于不需要完美保真度的缩略图、社交预览和装饰性背景。文件比同等JPEG小40–50%。
质量90–100 — 用于存档或近无损使用。文件更大，但仍比最高质量JPEG小10–20%。网络传输很少需要。

实用起始点：以质量80导出并进行视觉比较。如果在平坦颜色区域或平滑渐变中看到伪像，提高到85。对于具有复杂纹理的照片，质量75通常与85在视觉上难以区分。

浏览器支持

自2020年以来，所有主流浏览器都支持WebP。Chrome于2011年添加支持，Firefox和Edge于2018年，Safari在版本14（macOS Big Sur，2020年发布）中添加支持。截至2026年，全球WebP支持率超过97%——唯一值得注意的例外是微软已停止支持的Internet Explorer。

对于来自非常旧浏览器的少数流量，标准回退模式是HTML <picture>元素：

<picture>
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="描述" />
</picture>

支持WebP的浏览器使用<source>。较旧的浏览器回退到 <img>标签。实际上，大多数团队现在直接跳过回退，直接提供WebP。

如何将图片转换为WebP

将现有JPEG或PNG图像转换为WebP最简单的方法是使用Picovert的 JPG转WebP转换器。它完全在浏览器中运行——文件不会上传到任何服务器——几秒钟内即可完成转换。您可以调整质量滑块在文件大小和视觉质量之间取得平衡，并可以单独或作为ZIP压缩包下载结果。

对于在构建管道中处理图像的开发者，sharp库（Node.js）和cwebp（Google的命令行编码器）是标准工具。使用cwebp：

cwebp -q 80 input.jpg -o output.webp

批量转换目录中的所有JPEG：

for f in *.jpg; do cwebp -q 80 "$f" -o "$(basename $f .jpg).webp"; done

实用建议

针对网络开发者和内容创作者，以下是涵盖最常见场景的指南：

所有网络图像使用WebP — 97%以上的浏览器支持率意味着新网络内容不再有默认使用JPEG或PNG的充分理由。WebP提供更小的文件和相同或更好的视觉质量。
以JPEG或PNG格式保留原始文件 — 始终以原始格式保留源文件用于编辑。重新编码WebP进行进一步编辑会在有损模式下引入额外的质量损失。将WebP视为传输格式而非编辑格式。
照片选择有损WebP — 之前保存为JPEG的任何图像（照片、产品图像、主图）都应转换为有损WebP。网络传输使用质量75–85。
图形选择无损WebP — 徽标、图标、插图、UI截图以及之前保存为PNG的任何图像都应转换为无损WebP。在零质量损失的情况下获得更小的文件。
关键路径图像优先使用WebP — 出现在首屏的图像——主图、列表页的产品缩略图——对感知加载时间影响最大。优先转换这些图像。
审查动态GIF — 网站上的所有动态GIF都是转换为动态WebP或MP4的候选。两者都能大幅减少文件大小，MP4是较长、类视频动画的更好选择。

要开始使用，可用Picovert的图片转换器进行格式转换，用图片压缩器微调文件大小。两个工具都无需账号，在浏览器中直接运行。