共计 2156 个字符，预计需要花费 6 分钟才能阅读完成。
俗话说：一图胜千言。在网上，图片尽管能够让用户更加简单明了地看到更多信息，然而图片体积也能够抵过上千字节甚至更多。钻研表明，关上一个 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">
</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 的背地是什么，你晓得么？
网页呈现不河蟹弹窗？那是被劫持了！