俗话说:一图胜千言。在网上,图片虽然可以让用户更加简单明了地看到更多信息,但是图片体积也可以抵过上千字节甚至更多。研究表明,打开一个 HTTP 网页,其中图片平均占比为 64%。在图片占比如此高的情况下,用户对图片的体积就有非常高的要求了。

我们可以通过图片压缩的方式来缩小图片体积。但是要如何保证图片体积缩小的同时而不大幅降低图片质量呢?传统的图片格式,如 JPEG,PNG,GIF 等格式图片已经没有太多的优化空间,而 Google 于 2010 年推出 WebP 图像格式。WebP 图像在相同素质下,比 JPG 体积小 25-34%,比 PNG 则小 26%,并且,WebP 更可以做到动态 GIF 的部分功能,也支持透明化及失真,无失真压缩等模式。

市面上的浏览器,例如 Chrome,Firefox,Microsoft Edge 都已经支持 WebP,随着 iOS 14 以及 macOS Big Sur 的发布,在 WebP 发布的 11 年后,苹果终于跟进,Safari 开始支持 WebP。至此,主流浏览器均已正式支持 WebP 格式相信今后 WebP 会获得更为广泛的部署和支持。

1.png

△ 浏览器 WebP 支持情况


WebP 的由来

WebP 的诞生起初是因为 Google 开发了一种基于 VP8 视频编码格式的 WebM 视频格式,Google 的工程师意识到 WebM 格式非常适合压缩关键帧,由此开发了 WebP 图片格式。

WebP 主要目标是使图片质量和 JPEG 格式质量相同的情况下,减少图片文件的体积,从而减少互联网上图片的发送时间和流量消耗。发布不久之后,WebP 便被整合到 Chrome 以及 Android 系统中,并且 Google 发布了函数库,让 iOS 应用等其他平台支持 WebP 格式。

相较于 JPEG 只能提供有损压缩,WebP 同时提供有损压缩和无损压缩:

  • 有损 WebP 压缩使用的图像编码方式与 VP8 视频编解码器中压缩视频关键帧的方法相同。利用图像已编码部分预测未编码部分,将图像细分来进行预测处理,分块越细预测越准确。获取编码数值后将原图像数据减去预测数据得到差值,仅对差值进行编码,以此控制大小;

  • 无损 WebP 压缩使用已知的图像片段来精确地重建新的像素,在无法找到相应的匹配值的情况下,使用本地调色板进行优化。


WebP 的压缩效果

与其他图片格式相比,WebP 集合了多种图片文件格式的优点。它可以像 JPEG 一样适合压缩照片和其他细节丰富的图片,或者像 GIF 一样显示动态图片,又或者像 PNG 一样支持透明图像。根据 Google 的测试,WebP 无损压缩图片比 PNG 图片少了 45% 的文件体积,即使这些 PNG 图片在使用 pngcrush 和 PNGOUT 处理后,WebP 依旧可以减少 28% 的文件体积。

2.png

△ WebP 与其他图片体积对比情况

同等质量下得到体积更小的图片,这也是 WebP 的意义。通过压缩图片体积来降低带宽的消耗,为线上服务降低流量成本,更快的展示和更短的图像共享时间,为网站及移动应用用户带去更好的用户体验。像淘宝、京东这类有着大量商品图片的电商网站,或者如花瓣、unsplash 等图库业务,都已经开始使用 WebP 来提高页面加载速度。

3.png

△ 淘宝图片格式使用 WebP

在项目中使用 WebP

既然 WebP 有这么多优势,并且浏览器平台基本都已经支持,那如何在项目中部署 WebP 呢?

我们可以先使用 webpack、gulp 等插件来批量转换出一批 WebP 图片格式的图片,然后在前端使用 <picture> 标签,在访问端支持 WebP 的情况下,实现自动加载 WebP 格式的图片。

    <picture class="picture">
      <source type="image/webp" srcset="image.webp">
      <img class="image" src="image.jpg">
    </picture>

    如果浏览器支持WebP格式,就会加载image.webp,否则会加载image.jpg。

    又或者,我们有很多的页面往往会用到图片的“懒加载”——通常是把图片的 URL 放在 img 元素的一个自定义属性中,然后用 JS 在适当的时机将 URL 赋值给 src 属性。用类似的原理,我们可以根据浏览器是否支持 WebP 格式,给 img 元素赋予不同的 src 值,例如下方的伪代码。

      
      $('[data-url]').each(function(item, index){
          var ext = window.__supportWebP__ ? '.webp' : ''
          $(this).attr('src', $(this).attr('data-url') + ext)
      })

      以上都是常见的一些项目改造实现使用 WebP 的操作方法。但是这类改造都要涉及到代码改造、项目重新部署,那么有没有更加优雅、更加快捷的方式,来使自己的网页快速用上 WebP 呢?

      又拍云目前已经支持 WebP 图片格式转换,而且还支持 WebP 自适应功能。在又拍云后台一键开启 WebP 自适应功能,即可通过 CDN 平台智能判断客户端浏览器是否支持 WebP 解码,如果支持则返回 WebP 格式图片,如果不支持则会返回原图,在客户端以及源站无需任何改动。

      4.png

      △ 一键开启 WebP 自适应

      在我们的实践中,使用了 WebP 格式后,图片的体积普遍缩小了 1/3 以上,既加快了网页/App 的加载速度,节省了带宽访问流量,也让用户流畅丝滑的访问体验更上一层楼。我们也做了一个 WebP 的压缩效果体验页面,您也可以来快速体验 WebP 的神奇魔力