之前我一直觉得图片嘛能看就行，管它什么格式，JPG通用又方便，所以我的博客也帮朋友搞的小网站也图片都是无脑用JPG。没多想。
后来我接了个活儿，一个电商网站，客户对加载速度要求死高，说用户等不及就跑了。我把页面一套上去，一测速，好家伙，图片占了大头，加载慢得跟蜗牛似的。我当时就头大了，琢磨这怎么搞。
发现WebP这个东西
我就去网上瞎逛，看别人怎么优化网站速度的。很多人都提到一个叫WebP的图片格式。我一看介绍，说是文件小，质量还当时我就半信半疑，JPG用了这么久，还能有比它更牛逼的？
我当时就决定自己动手试试看，到底这WebP是个啥玩意儿，是不是吹牛逼的。
-
第一步：找测试图片。
我直接从我自己的博客里扒拉了几张JPG格式的大图，有风景照，有人物照，还有一些带文字的截图，都挺高清的，文件也都不小，大的有两三兆。
-
第二步：找转换工具。
我在网上随便搜了几个“JPG转WebP”的工具，有在线的，也有电脑上装的软件。我挑了个评价看着还行的在线工具，把那几张JPG图一股脑儿地扔进去，点了个转换。
-
第三步：对比文件大小。
转换完后，我立马把WebP格式的图下载下来，跟原始的JPG图放在一个文件夹里，然后鼠标右键，挨个看属性。不看不知道，一看吓一跳！原本两三兆的JPG图，转成WebP之后，小的就几十K，大点的也就一百多K，基本上都缩减了70%甚至更多！当时我就“卧槽”了一声，这差距也太大了。
实际效果的检验过程
光看文件大小还不行，得看效果。万一压缩得那么狠，图片都糊了？我可是对图片质量有要求的。
-
第四步：视觉效果对比。
我把原始JPG图和转换后的WebP图分别在浏览器里打开，然后挨个儿放大看细节。肉眼基本看不出啥区别！不管是风景的纹理，人物的毛发，还是文字的边缘，WebP的图片看起来都跟JPG的原图差不多清晰。这就让我更来劲了，文件小了那么多，质量还这么这是什么神仙操作？
-
第五步：网站加载速度测试。
这是最关键的一步。我专门搞了一个测试页面，把同样的图片，一组用JPG，一组用WebP，都放上去。然后我清空浏览器缓存，用开发者工具模拟不同网络环境（比如3G、4G、光纤），反复刷新测试。结果非常明显，用了WebP的页面，加载速度肉眼可见地快了一截，特别是那些图片多的页面，差异特别明显。在模拟3G网络下，WebP页面唰一下就出来了，JPG页面还在那转圈圈。
踩坑与解决
这么好的东西，肯定不能没问题？果然，我很快就遇到了坑。
-
兼容性问题。
我发现有些比较老的浏览器，或者是一些特殊的系统，它压根就不认WebP格式的图片。直接就显示不出来，或者是个破图图标。这下可把我愁坏了，总不能为了速度，丢掉一部分用户？
我就又去查，发现了个解决办法：用
<picture>标签。这个标签可以设置多个<source>，让浏览器自己去选择。我就把WebP格式的图放在前面，JPG格式的图放在后面作为备用。浏览器如果支持WebP，就加载WebP，不支持就加载JPG。这样一来，兼容性问题就解决了。 -
图片上传管理。
以前我都是直接把JPG图片上传到服务器。现在用了WebP，我得想办法怎么高效管理。是上传的时候就转还是用户上传JPG，服务器自动转成WebP？后来我决定，我的新项目就直接要求上传WebP，或者上传JPG后，后端自动处理生成WebP版本，再配合
<picture>标签。这样前端不用操心，用户也能看到最快的页面。
我的选择和心得
经过这一通折腾，我算是彻底明白了WebP的好处。现在要我选的话：
-
如果是新项目，或者对网站加载速度有极高要求的。
我肯定毫不犹豫地选择WebP。它文件小，加载快，还省流量，对用户体验和SEO排名都有好处。再配合上
<picture>标签解决兼容性，基本上就是最佳方案了。 -
如果是一些老项目，或者需要兼容非常非常老的浏览器。
那可能还是要多考虑一下。不过即便如此，我也建议尝试用WebP作为主流，JPG作为备用。毕竟速度快是真的香。
-
还有，如果是一些对图片质量要求极致高，比如摄影作品展示，需要保留每一个像素细节。
这时候可能还得看情况，WebP的压缩虽然是无损或有损，但极致情况下，JPG或者PNG甚至TIFF可能更稳妥。但我一般做的都是普通网站，WebP的质量已经绰绰有余了。
所以现在我的经验就是，WebP这东西，确实是未来趋势。如果你还在无脑用JPG，那真的可以花点时间去了解一下WebP，自己动手试试看。你会发现，你的网站速度会有一个质的飞跃。反正我的电商项目，用了WebP之后，客户反馈速度快了很多，流量也跟着涨了点，这钱没白花，力没白费。