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的话,你得使用网络图片
  • 其它小程序端欢迎各位大佬测试,有问题一起分享出来,能让大家少踩一坑是一坑,期待你的留言分享
相关推荐
贝格前端工场1 小时前
小程序订阅消息设计:用户触达与隐私保护的平衡法则
大数据·小程序
weixin_lynhgworld1 小时前
盲盒一番赏小程序:用科技重新定义“未知的快乐”
科技·小程序
Bruce_Json1 小时前
微信小程序ts+sassjlin-ui
微信小程序·小程序·sass
说私域5 小时前
淘宝直播与开源链动2+1模式AI智能名片S2B2C商城小程序的融合发展研究
人工智能·小程序·开源
说私域8 小时前
互联网生态下赢家群体的崛起与“开源AI智能名片链动2+1模式S2B2C商城小程序“的赋能效应
人工智能·小程序·开源
雪碧聊技术14 小时前
v-for的用法及案例
vue3·uniapp·v-for·购物车案例
The_era_achievs_hero15 小时前
微信小程序71~80
微信小程序·小程序
!win !16 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
澄江静如练_20 小时前
微信小程序发体验版
微信小程序·小程序
张晓~183399481211 天前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5