已经把这个网站上的所有 JPEG 和 PNG 图片转换为 WebP 格式。

感觉自己的小站又“现代化”了那么一丢丢～ 🤳️🚀️

目录

WebP 介绍

Google 一直在研究提高网页加载速度的方法（利人又利己）。一种方法是缩小网页图像的大小。在大多数网页中，图像约占 60%-65% 1 的字节。页面大小是影响总渲染时间的一个主要因素，对移动设备尤其重要，因为较小的图像可以节省带宽和电池寿命（省电、省流量）。

WebP 是 Google 开发的一种相对较新的图像格式，旨在平衡网站图像的质量和实用性。目前，Chrome、Safari、Firefox、Edge、Opera 等浏览器以及许多其他工具和软件库都原生支持 WebP，开发人员还在各种图像编辑工具中增加了对 WebP 的支持。

截至 2021 年，支持 WebP 格式的 Web 浏览器拥有 96% 的市场份额。2

与 PNG 和 JPEG 图像相比，在同等视觉质量下，WebP 图像的大小平均要小 30% 左右 3 4。此外，WebP 图像格式也具有与其他格式对等的功能，它支持：

  • 有损压缩
    • 基于 VP8 关键帧编码。VP8 是由 On2 Technologies 创建的一种视频压缩格式，作为 VP6 和 VP7 格式的继承者。
  • 无损压缩
    • 由 WebP 团队开发。
  • 透明度
    • 8 位 Alpha 通道对图形图像很有用。
    • Alpha 通道可以和有损 RGB 一起使用，这是目前任何其他格式都没有的功能。
  • 动画
    • 支持真彩色的动画图像。
  • 元数据
    • 可以附加 EXIF 和 XMP 元数据。
  • 颜色配置文件
    • 可以嵌入 ICC 配置文件。

由于更好地图像压缩和支持所有这些功能，WebP 可以很好地替代大多数图像格式：PNG、JPEG 或 GIF。更妙的是，WebP 可以提供新的图像优化机会，例如支持具有透明度的有损图像？是的！

带透明度的有损 WebP

除了有损 WebP（RGB 颜色）和无损 WebP（带 Alpha 的无损 RGB）之外，还有一种 WebP 模式，允许对 RGB 通道进行有损编码，同时对 Alpha 通道进行无损编码。这种可能性（有损 RGB + 无损 Alpha）在任何现有的其他图像格式中都是不存在的。今天，需要透明度的网站站长或 Web 开发人员必须在 PNG 中对图像进行无损编码，这导致了显著的尺寸膨胀。WebP 的 Alpha 以较低的每像素比特数编码图像，为减少这类图像的大小提供了一种有效的方法。与有损（质量为 90）的 WebP 编码相比，带上无损压缩的 Alpha 通道仅增加了 22% 的额外字节。

总的来说，用有损 + Alpha 的 WebP 取代透明的 PNG，平均可以节省 60-70% 的大小。这对富含图标的移动网站具有很大的吸引力。

嗯，有瑞士军刀那儿味儿了～

那么，这个“魔法”是如何实现的呢？感兴趣的同学戳这里 Compression Techniques 。

来组官方数据

与 PNG 相比，WebP 无损图像要小 26%。3

在同等的 SSIM（结构相似性）指标下，WebP 有损图像比等效的 JPEG 图像小 25-34%。4

无损 WebP 支持透明度（也称为 alpha 通道），代价是增加 22% 的额外字节。

有损 WebP 也支持透明度，文件大小通常比 PNG 小 3 倍。

WebP 动画同时支持有损、无损压缩和透明度。GIF 动画转换为有损 WebP 平均缩小 64%，而转换为无损 WebP 平均缩小 19%。5

不同的声音

2013 年 3 月以前，Mozilla 拒绝在 Firefox 中支持 WebP，因为该格式尚未提供比 JPEG 更明显的优势。多年来，该格式不断发展，Mozilla 表示正在重新评估 WebP，但没有承诺将其纳入 Firefox。

2013 年 10 月，Mozilla Research 的 Josh Aas（mozjpeg 的主要参与者）发表了一份关于当前有损编码技术的综合研究报告 6，表示并不能得出 WebP 以任何显著优势胜过 mozjpeg 的结论。7

有评论者指责 Mozilla 为了自己的目的而试图控制网络标准。

2019 年 1 月，终于，Firefox 65 版本开始提供 WebP 支持。发布说明中写道：

改善性能和网络兼容性，支持 WebP 图像格式。WebP 以较小的文件尺寸带来与现有格式相同的图像质量，从而节省带宽并加快页面加载速度。8

2020 年 9 月，Apple 在 Safari 14 版本中增加了对 WebP 图像的支持 9。在此之前，经常有用户到 Apple 支持社区发送反馈并提交功能请求。

当然，技术决策往往是个人偏好、政治阴谋和公司竞争的结果。

自己试一试

OK，不管他们怎么说，自己测试一下就知道。

我拿本站现有的 157 张图片（含 30 张 PNG，127 张 JPEG）做了转换测试，结果非常不错。

首先必须强调一下，用于测试的图片已经是优化过的，方法戳这里 优化和压缩 JPEG 或 PNG 图像 。

转换后大小对比：

$ du -h
3.3M    ./png # 30 张 PNG 图像所在目录
2.1M    ./webp_src_png # PNG 转换成的 WebP 图像所在目录

$ du -h
19M    ./jpeg # 127 张 JPEG 图像所在目录
8.4M   ./webp_src_jpeg # JPEG 转换成的 WebP 图像所在目录

可以看到：

  • PNG 无损转为 WebP 后，文件大小减少 36%
  • JPEG 有损转为 WebP 后，文件大小减少 55%
  • 综合来看，这 157 张图片的整体大小减少了 50%

注：样本有限，不具有普遍意义；不同图像压缩率也会不同，仅对于测试图片而言。

数据很亮眼，那质量呢？

我个人肉眼看下来，视觉感受几乎没差，当然无限放大进行对比，还是能看出来有些细微差别。不过，看网页上的图片，没人会去抠像素吧。🧐️ 什么？你是像素眼，那…臣退下了～

在不影响观感的情况下，文件大小显著缩小，对于我这个小破站来说，没有什么理由不使用 WebP。

果断换之。

权衡利弊

使用 WebP 的好处

  1. 网站加载速度更快，用户体验更好

    • 通过将网站上使用的所有图像转换为 WebP，减少了图片的大小，缩短了网站的加载时间。
    • 即使用户对你的内容感兴趣，如果站点的加载时间过长，也存在离开的风险。
    • 网站加载越快，用户等待压力越小，降低跳出率，网站停留时间就会变长，让更多的用户能够阅读文章。

  2. 降低成本

    • 如果网站使用计费云服务，使用 WebP 图像也有助于降低云存储和带宽费用。
    • 也有助于用户节省流量。

  3. 间接进行了 SEO

    • 更快的网站加载速度不仅提供了更好的用户体验，甚至还可能提升网站在搜索引擎中的排名。
    • 页面显示速度是 Google 搜索算法中的评价点之一。转换成 WebP 提高显示速度，更容易被算法判断为有用的页面，来提高网页排名，所以也是一种 SEO 措施。

可能会带来的问题

  1. 老旧浏览器不支持

    • 因为 Apple 的 Safari 对 WebP 的支持比较晚，使用 Safari 14 之前的版本访问本站会看不到图片。我也不想为旧浏览器提供后备图像，不过我也不太在意，Apple 用户换新设备的频率不是挺高的吗？！ 👀️
    • 还有 IE，不想说了…

  2. 需要转换图片

    • 多了将 PNG 和 JPEG 等传统格式的图像转换为 WebP 格式这一步。（其实这点不是问题，一条命令的事儿）
    • 当然，WebP 是为用于 Web 的图像设计的，其他图片使用场景该怎么用还怎么用，不影响。比如手机或相机拍照通常默认保存为 JPEG 或 Raw 格式，如果只是本地离线使用照片，也没必要转换格式。

  3. 质量损失

    • 只要是有损的，即使是少量的压缩也会降低图像的质量。如果你需要高质量图像，而不是用于 Web，那么能不压缩就不压缩，能不转换就不转换。

总而言之

WebP 是一种结合了 JPEG、PNG 和 GIF 的优点和高压缩比的格式，主要为 Web 设计，适用于使用大量图像的网站。目前已被广泛支持，但还没有被广泛使用。与其他图像格式相比，它的主要优势是文件尺寸小得多，使得网页加载速度更快，并减少带宽使用，有助于优化页面性能。而且 WebP 是开源的。

附上我自用的转换操作 

# Convert one JPEG image to WebP
cwebp -q 90 -m 6 -sharp_yuv -exact input.jpg -o output.webp

# Convert one PNG image to WebP
cwebp -q 100 -m 6 -lossless -exact input.png -o output.webp

# Convert multiple JPEG images to WebP
for P in *.jpg
do
  cwebp -q 75 -m 6 -sharp_yuv -exact -quiet $P -o ${P%.*}.webp
done

# Convert multiple PNG images to WebP
for P in *.png
do
  cwebp -q 100 -m 6 -lossless -exact -quiet $P -o ${P%.*}.webp
done

  1. https://httparchive.org/reports/state-of-images  ↩︎

  2. https://caniuse.com/webp  ↩︎

  3. https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study  ↩︎ ↩︎

  4. https://developers.google.com/speed/webp/docs/webp_study  ↩︎ ↩︎

  5. (https://developers.google.com/speed/webp/faq#fn1 ) ↩︎

  6. https://research.mozilla.org/2013/10/17/studying-lossy-image-compression-efficiency/  ↩︎

  7. https://research.mozilla.org/2014/07/15/mozilla-advances-jpeg-encoding-with-mozjpeg-2-0/  ↩︎

  8. https://www.mozilla.org/en-US/firefox/65.0/releasenotes/  ↩︎

  9. https://developer.apple.com/documentation/safari-release-notes/safari-14-release-notes  ↩︎