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

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

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

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

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

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

我的公众号:zxcknowmore,关注后第一时间获取更多文章!

(关注公众号,回复“福利”,即可领取学习礼包一份!)

技术大佬:我去,这个容易被忽略的小程序Image图片属性,竟然这么屌!的更多相关文章

  1. 跨端开发技术 | 拼团商城项目同时开发app和小程序的要点

    此项目为拼团商城类型,主要功能包括商品分类.商品详情.商品搜索.拼团.订单管理等. 项目源码在 https://github.com/apicloudcom/group-ec 仓库的 widget 目 ...

  2. 微信小程序压缩图片并上传到服务器(拿去即用)

    这里注意一下,图片压缩后的宽度是画布宽度的一半 canvasToTempFilePath 创建画布的时候会有一定的时间延迟容易失败,这里加setTimeout来缓冲一下 这是单张图片压缩,多张的压缩暂 ...

  3. 腾讯技术分享:微信小程序音视频技术背后的故事

    1.引言 微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...

  4. 小程序容器技术,App热更新与敏捷开发新方案

    作为追求代码洁癖的软件工程师,我们对"紧耦合"的技术实现可以说是深恶痛绝.要解决当前企业移动端App日益沉重.难以真正迭代.投入产出比低的问题,首先在技术架构上要实现真正的&quo ...

  5. 黄文俊:Serverless小程序后端技术分享

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 黄文俊,现任腾讯云SCF无服务器云函数高级产品经理,多年企业级系统开发和架构工作经验,对企业级存储.容器平台.微服务架构.无服务器计算等领域 ...

  6. 浅析微信小程序技术架构(原创)

    周末万里虎抽空体验了下微信小程序的DEMO,对小程序的开发有了一个基础的了解与认识,今天就来和大家分享一下我对小程序的看法. 从官方DEMO来看,小程序在技术架构上非常清晰易懂.JS负责业务逻辑的实现 ...

  7. 【纯·技术干货】更 App 化的小程序开发

    2018 年 10 月13 日,由又拍云和知晓云联合主办的 Open Talk 丨2018 小程序开发者沙龙系列活动广州站拉开帷幕,糗事百科前端负责人宋航在沙龙上做了<更App化的小程序开发&g ...

  8. 腾讯技术分享:微信小程序音视频与WebRTC互通的技术思路和实践

    1.概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebR ...

  9. 实时视频直播客户端技术盘点:Native、HTML5、WebRTC、微信小程序

    1.前言 2017 年 12 月,微信小程序向开发者开放了实时音视频能力,给业内带来广阔的想象空间.连麦互动视频直播技术在 2016 年直播风口中成为视频直播的标配,然而只有在原生的 APP 上才能保 ...

随机推荐

  1. POJ 2230 Watchcow 欧拉回路的DFS解法(模板题)

    Watchcow Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 9974 Accepted: 4307 Special Judg ...

  2. DP 60题 -2 HDU1025 Constructing Roads In JGShining's Kingdom

    Problem Description JGShining's kingdom consists of 2n(n is no more than 500,000) small cities which ...

  3. Python的内存管理和垃圾回收

    内存管理 与Python对象创建相关的结构体 #define _PyObject_HEAD_EXTRA \ struct _object *_ob_next; \ struct _object *_o ...

  4. FastDFS文件服务器安装指南附安装包和自启动(看此篇就够了)

    安装包在最后,本文为博主自己亲自安装记录 转载请注明出处 注意文字不清晰请放大看,放大看!! 安装包地址

  5. 前端【JS】,深拷贝与浅拷贝的区别及详解!

    我是前端小白一枚,为了巩固知识和增强记忆,开始整理相关的知识,方便以后复习和面试的时候看看.OK,让我们进入正题~ 先说说浅拷贝和深拷贝的理解吧,个人是这样理解的:两个对象A.B, A有数据B为空,B ...

  6. Linux下3种常用的网络测速工具

    大家好,我是良许. 不管你用的是什么操作系统,网速都是你非常关心的一个性能指标,毕竟,谁都不想看个视频结果网速卡到你怀疑人生.本文介绍三个 Linux 命令行下的网络测速工具,让你随时随地知道你的网络 ...

  7. [hdu5402 Travelling Salesman Problem]YY

    题意:给一个n*m的矩形,每个格子有一个非负数,求一条从(1,1)到(n,m)的路径(不能经过重复的格子),使得经过的数的和最大,输出具体的方案 思路:对于row为奇数的情况,一行行扫下来即可全部走完 ...

  8. Mockito不能mock final类的解决办法

    Mockito是很常用的测试工具,使用过程中可能会遇到下面的问题: Mockito cannot mock/spy because : - final class 问题重现: 引入该依赖到项目的mav ...

  9. 常用DOS命令大全

    常用DOS命令大全 常用的内部命令有MD.CD.RD.DIR.PATH.COPY.TYPE.EDIT.REN.DEL.CLS.VER.DATE.TIME.PROMPT 常用的外部命令有DELTREE. ...

  10. C# 数据操作系列 - 8. EF Core的增删改查

    0.前言 到目前为止,我们看了一下如何声明EF Core的初步使用,也整体的看了下EF Core的映射关系配置以及导航属性的配置. 这一篇,我带大家分享一下,我在工作中需要的EF Core的用法. 1 ...