WebP图片使用踩坑

前情

WebP是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，最初在2010年发布，目标是减少文件大小，相较于传统的 PNG、JPG，甚至是动图 GIF 的格式，WebP 比它们的空间更小。根据谷歌的测试，WebP 格式的图片可以比 JPEG 格式的图片小 26%-34%，比 PNG 格式的图片小 25%-34%，所以在最近的小程序项目中，我尝试引入WebP格式图片以来减小包体积。

坑位

一开始我负责的小程序是发布在抖音端和快手端，在抖音端使用WebP是没啥问题的，一切都挺顺利，但是直到在快手端自测时候发现，在iOS上部分有带透明的图片会显示异常。

我还给官方提了BUG：webp小图标显示异常，官方回复说是已经解决，虽然回复已经解决，但发版更新是需要时间的，后面不得不快速过了小程序的相关页面，把显示异常的小图标都换成了PNG格式图片，想到等后续稳定了再用回WebP吧。

最近公司项目又有变化，公司希望小程序有发布微信端，项目也落在了我名下，于是我又踩到了另一深坑，我一直以为在所有小程序端中微信是鼻祖，应该是最稳定的了，我一开始也是这么认为的，因为在开发者工具上并没有发现有什么大的问题，直到我在真机上测试，大颠眼睛，页面上到处是空白，一开始怀疑是布局出现兼容问题，直到定位代码才发现，全部是webp格式图片不支持，于是查看了微信的文挡，文挡是写得好好的，翻到最下面，说需要添加webp=“true”才可以，而且只支持网络图片，真的是脑袋发胀，心里恶狠狠的骂了回自己，给自己找事用什么WebP喽。

Why?

快手的问题就是平台的BUG，微信就是平台的限制，对于这些问题，我们开发者只能提BUG等待官方修复，但这一段修复的时间你不得不想办法绕开，但是微信小程序这个完全就是平台的限制了，你无能为力。

解决方案

方案1：使用网络WebP格式图片

个人亲测使用网络WebP格式图片确实是可以的，但是微信文挡又在瞎说，如果你用网络WebP格式图片的话，webp=”true”有没有都不影响图片的展示的，但是再微信小程序论坛搜搜，你又会发现WebP图片显示问题还挺多的，而且全换成网络图片工作量不会小，同时也会增加公司的CDN流量费用。

方案2：全部图片换成PNG

在一次次被恶心过后我最终还是决定所有WebP格式图片全部换回PNG图片，在替换过程中我发现如果你用PNG图片再通过 tinypng压缩后你的PNG图片也并不一定会比WebP格式图片小，我随便选了几张替换的图片做了下大小对比。

我在做图片替换的时候并不是重切所有图片，重切的话主要是找寻源图会点麻烦，我的做法是所有图片通过FreeConvert工具转PNG，再通过TinyNG做图片压缩以保证图片大小适当。

总结

此文并不是web项目，按目前情况，web项目是可以放心使用WebP的， WebP确实能在一定程序上减小项目资源大小，小程序项目还是推荐用PNG+tinypng压缩的方式使用吧，即保证图片体积适当，又避免踩到奇奇怪怪的问题。

抖音小程序可以放心使用WebP格式图片
如果你的小程序要发布快手端，推荐你先尝试尝试几个透明图片看看官方修复情况
微信小程序你想使用WebP的话，你得使用网络图片
其它小程序端欢迎各位大佬测试，有问题一起分享出来，能让大家少踩一坑是一坑，期待你的留言分享