webp格式图片相对于png/jpb格式图片优点

前言

经常在网上找素材的小伙伴应该了解，有时候下载的图片既不是png也不是jpg，而是webp格式的。这种类型的图片根本没法直接拿来当素材用，那么，为什么有好好png/jpg不用，还要来个webp呢？今天我们来了解一下webp格式文件相对于png/jpg格式文件的优劣点。

webp格式在是新起的一种图片格式，由谷歌推出。这种格式的图片支持有损压缩和无损压缩两种压缩模式。它的特点是体积小。它采用了一种优秀的压缩算法，可以在肉眼无法观测出差异的前提下，将图片压缩的比png/jpg更小。 在国内外有相对较高的知名度，大量使用这种格式图片的国外公司有谷歌，国内有淘宝，腾讯，美团等公司。

根据Google较早的测试，WebP的无损压缩比网络上找到的PNG档少了45%的文件大小，即使这些PNG档在使用pngcrush和PNGOUT处理过，WebP还是可以减少28%的文件大小。

体积小有什么好处？

体积小意味着加载时间更短。客户可以不用过长等待资源的加载，在客户体验感上会比较友好。更重要的是，体积小，同样也意味着更少的宽带流量。可以给企业减少在宽带上的支出。

所以，将png/jpg等格式的图片用webp替代是图片的优化策略之一。

在线png v/s webp 示例👉WebP 示例 (PNG 转 WebP) (isparta.github.io)

再来看看png和webp图片在数据上的比对。

在同样的压缩类型下。webp的压缩体积会比png格式的要小。

我用真实项目中的素材简单的做了一组测试数据，如下。

我在项目网站上找了一张jpg素材，将其格式转化后。体积确实小了很多。

Adnimated WebP(动态WebP)

当然，除了静态图片（png/jpg/...）可以转化为WebP格式以外。动态图片也可以转化为WebP。 2013年底，Google推出了Animated WebP,就是动态的WebP(WebP版gif)。

虽然Animated WebP压缩度没有达到Google所预期的状态，但是相较于gif原图还是有着不错的改善。 官方的Animated WebP案例

.webp的缺点

当然，虽然webp的体积会比传统的png/jpg小，但这并不意味着webp可以完全替代png/jpg。

webp的兼容性并不如png/jpg。一直到今天，webp在全球浏览器中的支持度大约在*95%*左右浮动。在未来浏览器对webp格式的兼容性会越来越好。

常规的目标客户完全可以采用webp去替代png和jpg（具体根据目标客户不同采用不同的格式，比如如果目标客户是政府外包的旧网站，使用很旧的浏览器，那可能就不是很适合使用webp）。

WebP的兼容处理方案

可以使用picture和source来处理兼容问题

<picture>
	<source type="MIME-TYPE" srcset="./image.webp"></source>
	<img src="./image.png">
</picture>

缺点：文件服务器上要同时存放这两种格式的图片

总结

WebP格式图片相对于jpg/png,Animated WebP相对于gif来说，会带来更小的图片体积。是图片优化的一种方案。但也存在一定的兼容问题，市面上95%的浏览器支持。主流浏览器基本支持。

如果是一些需要大量图片的网站，那么WebP会带来可观的性能优化。

在线压缩网站

Squoosh(在线压缩)

这篇好文章是转载于：学新通技术网