这个容易被忽略的小程序Image图片属性，竟然这么屌！小程序开发Image组件使用技巧讲解

前段时间在做“高清壁纸推荐”小程序优化的时候，发现一个很实用的图片属性——能够实现最大化压缩图片大小、且图片质量最小的损失，在此之前一直没有注意。今天跟大家分享一下这个属性的用法，主要是让大家能够，意识到有这种需求或者是遇到下面类似的问题，可以通过这种方式来进行解决！

说到这次小程序优化，源于收到七牛云的账单提醒，3月份的账单显示7块多，在此之前一个月也就才一两块的样子。当然这中间的费用增加，取决于两方面：一方面是壁纸在不断的增加，另一方面是用户量在逐渐上升——最近几个月平均每天活跃用户在60人左右。由于小程序提供的都是高清壁纸，每一张壁纸图片，基本上都在3MB以上，用户浏览和下载壁纸，对带宽消耗比较高，导致cdn费用一下上涨不少。所以，优化的主要目标就是，想办法能够降低壁纸图片的大小。再进一步将目标细化，需要达到的效果是：降低压缩图片大小的同时，能尽可能保证图片依然高清，就说图片质量能够不会有明显的损失！

优化目标已明确，首先压缩图片大小，可以直接通过七牛云“图片样式”，轻松解决，经对比测试，webp格式可以满足优化的要求，其压缩效果最好，同样图片处理质量下，压缩后的大小为jpg格式的一半。具体可查看，演示图片webp，演示图片jpg

上面图片压缩已搞定，现在就要测试小程序端的显示效果了。一看发现，小程序Image组件默认无法显示webp格式图片，需要设置属性webp=true，说明如下图：

小程序Image组件属性

 

高清壁纸推荐

 

最终，优化效果如上图，看起来还是挺不错的，喜欢美女壁纸的，可以随便撸啦，哈哈……

好了，这篇文章就写到这里，有疑问欢迎评论交流！前段时间在CSDN学院上更新了《微信小程序开发3天快速入门》和《微信小程序直播开发快速入门》的视频课程，对微信小程序开发感兴趣的朋友，可以去看看！

 

超阅认知

 

我的公众号：zxcknowmore，你的关注与支持，是我多写博文的动力！（关注公众号，回复“福利”，即可领取学习礼包一份！）