gpt4 book ai didi

WebP图片使用踩坑

转载 作者:撒哈拉 更新时间:2024-12-16 20:47:42 58 4
gpt4 key购买 nike

前情

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的话,你得使用网络图片
  • 其它小程序端欢迎各位大佬测试,有问题一起分享出来,能让大家少踩一坑是一坑,期待你的留言分享

最后此篇关于WebP图片使用踩坑的文章就讲到这里了,如果你想了解更多关于WebP图片使用踩坑的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

58 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com