评论

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

前段时间在做“高清壁纸推荐”小程序优化的时候,发现一个很实用的图片属性——能够实现最大化压缩图片大小、且图片质量最小的损失,在此之前一直没有注意,今天跟大家分享一下这个属性的用法

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

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

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

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



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

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

最后一次编辑于  2020-06-11  
点赞 2
收藏
评论

4 个评论

  • wang li
    wang li
    2020-06-11

    小姐姐很漂亮,哦不,小程序很漂亮

    2020-06-11
    赞同 1
    回复 1
    • 朱学超
      朱学超
      2020-06-13
      这不是文章重点,不对,这是一个亮点,haha
      2020-06-13
      回复
  • Julytian
    Julytian
    2020-06-11

    mac pc端微信小程序不支持webp格式,哈哈

    2020-06-11
    赞同 1
    回复 3
    • 朱学超
      朱学超
      2020-06-13
      是吗,看官方文档上没有说啊,看来以后写文章得更严谨了,哈哈
      2020-06-13
      回复
    • Julytian
      Julytian
      2020-06-14回复朱学超
      pc端是个半成品,mac pc端不支持webp官方回复说未来会支持,哈哈
      2020-06-14
      回复
    • 朱学超
      朱学超
      2020-06-15回复Julytian
      是的,pc端一般都直接忽略了,哈哈
      2020-06-15
      回复
  • 崇
    2020-06-15

    大佬 是通过七牛将图片全部换成webp格式吗 具体咋搞

    2020-06-15
    赞同
    回复 2
    • 朱学超
      朱学超
      2020-06-15
      2020-06-15
      回复
    • 朱学超
      朱学超
      2020-06-15
      通过上图“图片样式”即可
      2020-06-15
      回复
  • 朱学超
    朱学超
    2020-06-11

    关注公号:超阅认知,回复“小程序开发”,即可领取课程优惠券,并可获取课程课件!

    2020-06-11
    赞同
    回复
登录 后发表内容