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

​
 
说到这次小程序优化，源于收到七牛云的账单提醒，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. muduo网络库源码学习————无界队列和有界队列

    muduo库里实现了两个队列模板类:无界队列为BlockingQueue.h,有界队列为BoundedBlockingQueue.h,两个测试程序实现了生产者和消费者模型.(这里以无界队列为例,有界队 ...

  2. VMware的安装与部署Linux系统

            首先我们需要准备好我们将会用到的东西:VMware12.RHEL7.0         网址我就不放了,大家自行百度哟. 一.安装VMware         我们需要安装VMware ...

  3. Shell脚本(五)函数

    总结下shell中的函数用法 #!/bin/bash function add_v1() { echo "call function add" } function add_v2( ...

  4. centos8-django项目部署 nginx+uwsgi

    1.虚拟环境virtualenv安装 1.安装virtualenv pip3 install virtualenv 2.创建目录,把项目文件传过来 mkdir My cd My 3.创建独立运行环境- ...

  5. 第三章：Python高级编程-深入类和对象

    第三章:Python高级编程-深入类和对象 Python3高级核心技术97讲 笔记 3.1 鸭子类型和多态 """ 当看到一直鸟走起来像鸭子.游泳起来像鸭子.叫起来像鸭子 ...

  6. Spring Boot在Controllder中常用注解

    1.@RestController @RestController 相当于@Controller+@ResponseBody 注解如果使用@RestController 注解Controller 中的 ...

  7. matlab数值数据和变量名

    1.2MATLAB数值数据 l  数值数据类型的分类 l  数值数据的输出格式 l  常用数学函数内部函数 1．数值数据类型的分类 l  整型 l  浮点型 l  复数型 (1)整型 1．数值数据类型 ...

  8. 【Spark】RDD的依赖关系和缓存相关知识点

    文章目录 RDD的依赖关系 宽依赖 窄依赖 血统 RDD缓存 概述 缓存方式 RDD的依赖关系 RDD和它依赖的父RDD的关系有两种不同的类型,即窄依赖(narrow dependency) 和宽依赖 ...

  9. Day_09【常用API】扩展案例2_测试小字符串在大字符串中出现的次数

    分析以下需求,并用代码实现 1.键盘录入一个大字符串,再录入一个小字符串 2.统计小字符串在大字符串中出现的次数 3.代码运行打印格式: 请输入大字符串: woaiheima,heimabutongy ...

  10. 关于 k210 的 micropython 添加 ussl 模块，实现 https 访问支持的那些事。

    起因 事情已经过去快一周了吧,继上次修复 maixpy k210 的 esp8285 at 通信后,突然遇到泽畔大大问,要不要做 ussl 的支持? 评估了一下各方的实现,想了一下自己也刚好在做网络层 ...