与小程序的 2M 空间斗智斗勇之图片优化
现在的网站或者 app 等各类应用,但凡有图片资源,基本上都是通过 CDN 的方式加载,而 CDN 方面大概率也就是阿里云或者腾讯云了。在 CDN 中会做的一个事情,必然是对图片资源的优化、压缩。久而久之,大家似乎也开始逐渐淡忘了图片格式应该如何选择,图片是不是要进一步压缩以节约带宽。
这个节约并不只是针对用户访问网站时,通过 4G 或者 5G 所使用的流量节约,而是企业方在 CDN 上的带宽费用。
背景
【与小程序的 2M 空间斗智斗勇之图片优化】在《闲来无事,折腾一个小程序玩玩,漫脸不是曼联,是捏脸的……》一文中提到过,目前所开发的捏脸小程序并未考虑使用任何服务器,所以图片资源都是打包在小程序内部,也就需要考虑如何利用有限的 2M 大小来加载更多图片素材。
对于图片优化我所认为的普遍认知
基本上大家都知道现在的图片都是通过 CDN 请求加载,并且在 CDN 中是可以设置图片加载的方式,包括是否使用压缩率很高的 .webp
格式,比如这样一个 URL:
https://gw.alicdn.com/..省略一串..saturn_solar.jpg_300x300q90.jpg_.webp
可以看到有
300x300
以及 .webp
,如果我们直接修改 300x300
为 800x800
的话,那么看到的图片是大的;如果查看 http 请求头信息呢,会看到 content-type: image/webp
图片类型是 .webp
格式的;假如我们把 URL 后面 _300x300q90.jpg_.webp
这部分去掉,看到的就应该是后台上传到 CDN 上原始图片了。简单来说,站点中使用的图片会根据需要,结合 CDN 的功能去选择图片大小和格式,以节约带宽资源。当然,CDN 默认一般来说是会对图片进行一次压缩。
在小程序包中我所做的事情
既然打算把图片丢到小程序包中,且所有静态资源和代码文件总大小不能超过 2M,那么想要存放更多图片素材,只能从图片上着手。代码上再怎么节约,最多也就是那么几 K 的事情,完全可忽略不计。
图片格式选择 在图片格式的选择中,捏脸的素材基本上都是带 alpha 通道的 png24/32 图,也就是那种无损的带透明效果的
.png
图,仅有类似背景这样的图片可以考虑转为 .jpg
格式图片。图片的二次压缩 在对图片格式选择,导出之后,基本上也已经考虑了大小的压缩。当时拿到素材包的时候,被告知已经经过某款图片压缩软件进行过一次压缩了。
可能是我个人习惯性的行为吧,拿到图片就直接丢到自己一直在使用的图片压缩工具 ImageOptim 再进行一次压缩,结果发现还是有压榨的空间。
文章图片
我以为我已经压缩到极致了 5 个小程序,从一开始,通过 ImageOptim 压缩后,我以为已经是压缩到极致了,从小程序包这样的提示
文章图片
逐步演变到这样的提示
文章图片
理论上应该是很满足了。的确,从 4368 kb 到 2168 kb 这样十分接近 2048 kb 的情况下,实在不行那就删掉几张捏脸素材不就可以了。
是的,前面个别小程序我的确是这样做了,捏脸素材虽然是黑白色,但还是删掉了一些素材,最终满足小于 2M 的要求,然后发布上线。
我以为的以为其实是错误的 在后来几个版本的捏脸小程序中,使用的素材是彩色的,素材大小也更大了,刚开始我很纠结。无意间突然想到,既然不能把图片尺寸变小,图片格式也不能换,那么要改变图片大小只能尝试更换不同的图片压缩工具了。
因为,早期曾经参与的一个图片压缩项目中,大概了解到,对于 png 的压缩算法是有多种的。既然如此,那么换一个图片压缩工具是不是就可以呢。于是,首选大家普遍会去使用的 tinypng(https://tinypng.com/),没想到结果让我很意外。
文章图片
这压缩率,真的是杠杠的啊。原本已经被压缩过的图片,结果还有这么大的压缩空间。于是直接找@地狱京 同学要更多素材。
文章图片
刚开始他还以为我把图片质量降低很多,后来看了看,也就没说什么了。
你以为就这样 前面提到,我只是随手把本地压缩过的图片丢到 tinypng 网站上再压缩了一次,但为了能够在 2M 的空间内塞入更多图片,我肯定不会就这样放过可以压榨的机会。
当时在蚂蚁金服的时候,有次我把图片放在内部某平台上,压缩了一次又一次,直到出现压缩结果为 0% 才结束。所以,现在也是一样,本就努力在压榨这 2M 空间,怎么可能就简简单单搞一次呢。
于是我就耐着性子,一次次地把通过 tinypng 压缩过的图片再次压缩,一直到 1% 甚至是 0% 才放弃继续使用 tinypng 来压缩。
为什么说是耐着性子呢,因为免费的东西是最贵的,需要消耗的时间。
文章图片
一次 20 张图片,并且第二次或者第三次的时候,会报错。操作过于频繁,嫌弃我这样薅羊毛的穷鬼。不过没关系,我一次 20 张,中间停留几分钟,然后继续一次 20 张,毕竟我现在穷的只剩下时间了。
并且,同时我把已经在 tinypng 中压缩到极致的图片,在本地继续通过 ImageOptim 再压缩一次。
文章图片
终于
终于初步完成了这 5 个捏脸小程序,虽然没能把所有图片素材都放出来,不过后面的素材经过这么一轮轮的压榨,比之前的量增加了很多。方法总比问题多,就看怎么选择怎么处理了。
文章图片
推荐阅读
- 爆火小游戏《羊了个羊》,我偏不玩
- 石家庄新华区都市阳光小区等3地降为低风险地区
- 你可得知道物理地址与IP地址
- 投稿|对话柠萌:原创、女性与系列化
- Python|Python 编程1000例(8)(特招录取选拔、抓小偷、阿姆斯特朗数案例)
- 关于递归循环的总结(包含题目解析与思路)
- 滑模控制|VSC/SMC(十三)——快速和非奇异Terminal滑模控制(含程序模型)
- 付费知识之数据库学习|少儿编程 | 探讨C++课程、MIT Scratch课程、python课程、Noi竞赛、蓝桥怎么引导(如何才能让小孩子飞的更高?附开发工具的下载与安装
- 洛谷|高精度算法详解 [包括高精除低精与高精除高精]
- LeetCode|【C语言刷LeetCode】717. 1 比特与 2 比特字符(E)