强劲迷你，Safari 14.0 的功臣你不来看看么？

俗话说：一图胜千言。在网上，图片虽然可让用户更加简单明了地看到更多信息，可是图片体积也能够抵过上千字节甚至更多。研究代表，打开一个 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 会得到更为普遍的部署和支持。

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％ 的文件体积。

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

在项目中使用 WebP

既然 WebP 有这么多优点，而且浏览器平台基本都已经支持，那如何在项目中部署 WebP 呢？

咱们能够先使用 webpack、gulp 等插件来批量转换出一批 WebP 图片格式的图片，而后在前端使用 <picture> 标签，在访问端支持 WebP 的状况下，实现自动加载 WebP 格式的图片。

<picture class="picture">
  <source type="image/webp" srcset="image.webp">
  ![](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 格式图片，若是不支持则会返回原图，在客户端以及源站无需任何改动。

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

推荐阅读

Doge.jpg 的背后是什么，你知道么？

网页出现不河蟹弹窗？那是被劫持了！