WebP的文件大小真的比JPG小吗？
我们在相同的538.6 KB照片上比较了JPG、WebP和AVIF，结果是JPG胜出。以下是原因以及公平比较的结果。
每个指南都告诉你WebP在匹配质量时大约比JPG小30%。谷歌自己的研究就是这个数据的来源。我们在自己的压缩工具上进行了比较，使用了一张3840x2160的照片texture.jpg，大小为538.6 KB，在相同的滑块位置上，JPEG的结果是286.1 KB，而WebP是290.3 KB。AVIF，这种应该超越两者的格式，结果是312.7 KB。
没有任何问题。三种格式对滑块的读取方式不同，其中一种是故意这样做的。一旦你知道是哪一种，结果就会回到你预期的方向，你会养成一个值得在你使用的任何工具中延续的习惯。
为什么在相同的滑块下WebP的文件更大而不是JPG？
我们的压缩工具有一个许多工具共享但几乎没有提到的特性。当输出格式为JPEG且输入已经是JPEG时，它会从源文件中读取量化表，估算该文件保存时的质量，然后将你的滑块乘以该估算值。一个在滑块为80时评分为60的源文件会被编码为48。WebP和AVIF没有这样的处理，因此80就是80，编码器会按照指示执行。顶部的运行是JPEG有效为48，而WebP则是字面上的80。经过更严格压缩的文件更小。
重新缩放赢得了它的位置。在将已经有损的JPEG以80重新编码时，如果它是以60写入的，会增加字节而不会增加任何细节，因此我们将滑块视为文件中剩余部分的一个分数。更深层次的问题在于JPEG本身：规格存储原始量化表，并且从不存储质量数字，因此在Photoshop中75、在MozJPEG中75和在某些PHP脚本中的75是三个不同的文件。在两个滑块上匹配数字并称其为公平测试是行不通的。
当你正确比较它们时，大小看起来如何？
| 编码 | 滑块 | 输出 |
|---|---|---|
| texture.jpg源文件 | 538.6 KB | |
| JPEG (MozJPEG) | 80，重新缩放到48 | 286.1 KB |
| WebP | 80，字面意思 | 290.3 KB |
| AVIF | 80，字面意思 | 312.7 KB |
| WebP | 63 | 200.6 KB |
| AVIF | 63 | 186.9 KB |
在63时，WebP从538.6 KB源文件中写出200.6 KB。AVIF在相同设置下为186.9 KB，而63是我们智能模式为AVIF选择的数字，因此这不是我们为了美化格式而选择的数字。首先匹配输出大小，然后在全尺寸下并排打开两个文件，看看哪个你能接受。这才是值得进行的比较。
那我应该直接使用AVIF吗？
在字节上，AVIF胜出。在耐心上，它却失败。将3840x2160的帧编码为AVIF在浏览器中大约需要10到11秒，而JPEG和WebP则立即返回。所有这些都是WebAssembly在你自己的机器上运行，因此是你的笔记本电脑在进行AV1内部编码，成本随着像素数量的增加而增加。还有第二个需要注意的陷阱：如果WASM编码器失败，我们会回退到浏览器的画布编码器，而画布可以写JPEG、PNG和WebP，但根本没有AVIF路径。对于大批量，谷歌建议使用本地的avifenc工具而不是WebAssembly构建，并且十个AVIF编码在一个标签页中的成本也有测量。
将JPG转换为WebP时我会失去什么？
有三件具体的事情。元数据首先消失：压缩或转换会将图像解码为原始像素并重新编码，因此EXIF、GPS坐标、ICC配置文件和嵌入的缩略图都将从输出中消失。方向信息得以保留，因为浏览器在解码时会应用它。如果你需要捕获日期，请保留原始文件。而有损的JPG重新编码为有损的WebP是第一代损失上叠加的第二代损失，因此请从你拥有的最佳源文件中进行一次转换。
色度是第二个损失。有损WebP被锁定在4:2:0子采样中，格式中没有4:4:4选项，因此一段语法高亮代码的截图或一个放在饱和红色背景上的徽标在WebP中可能看起来比同样重量的JPEG更糟。照片不在乎。渲染是第三个：渐进式JPEG会在早期绘制一个粗略的完整帧，并随着字节的到达而变得清晰，而WebP没有渐进模式，因此一个大的文件在足够的内容到达之前什么也不显示。在弱连接下的英雄图像，这会改变页面的感觉速度，即使文件更小。
如果图像具有透明度，WebP仍然胜出吗？
JPEG无法处理透明度。任何JPEG模式中都没有alpha通道，因此对于徽标或切割图像，真正的竞争是PNG与WebP之间的较量，而这两种格式的案例在这些相同的文件上进行了测量。我们的PNG数字设定了你必须超越的标准：alpha.png在900x606和942.4 KB的大小通过无损oxipng在3级压缩降至383.9 KB，并在imagequant将其减少到调色板后降至98.3 KB，这在保持透明度的情况下减少了90%。WebP即使在有损文件中也能无损存储其alpha，因此切割边缘保持干净。如果你一开始就制作切割图像，我们的背景去除工具始终写入带有alpha的PNG，而该PNG可以直接进入压缩工具。
我应该在网站上放哪个格式？
为照片选择WebP。每个当前浏览器都能解码它，包括Safari，一旦你停止比较滑块数字，节省是真实的。在旧软件中必须打开文件的地方，或者大型英雄图像更受益于渐进式渲染而不是受益于30 KB的地方，保留JPG。MDN的图像格式指南是你在将整个库提交给一种格式之前检查的参考。
首先检查像素。3840px的照片比960px的内容列宽四倍，而没有编码器能恢复重新调整大小所带来的免费收益，因此调整大小工具及其25/50/75的预设只需一键，通常会直接超越格式论点。质量阶梯比格式更重要。相同的texture.jpg在60时为212.4 KB，在30时为131 KB，而智能模式定格在286.1 KB，减少了47%，而没有询问你任何问题。
我如何在自己的图像上运行这个测试？
打开压缩工具，将你的照片放入并切换到手动模式。选择JPG，注意大小。将格式下拉框切换到WebP，在相同滑块下注意那个大小。然后将WebP滑块向下拉，直到两个文件的大小相差几KB，并在全尺寸下并排查看它们，因为这才是唯一能告诉你任何信息的比较。批量限制为10个文件和50 MB。如果你宁愿完全跳过滑块，JPG转WebP以固定质量80编码而不进行重新缩放，WebP转JPG则以透明度覆盖白色反向转换，而PDF操作指南涵盖了使文件变大的唯一转换。