共计 2023 个字符，预计需要花费 6 分钟才能阅读完成。
当初的网站或者 app 等各类利用，凡是有图片资源，基本上都是通过 CDN 的形式加载，而 CDN 方面大概率也就是阿里云或者腾讯云了。在 CDN 中会做的一个事件，必然是对图片资源的优化、压缩。长此以往，大家仿佛也开始逐步淡忘了图片格式应该如何抉择，图片是不是要进一步压缩以节约带宽。
这个节约并不只是针对用户拜访网站时，通过 4G 或者 5G 所应用的流量节约，而是企业方在 CDN 上的带宽费用。
背景
在《闲来无事，折腾一个小程序玩玩，漫脸不是曼联，是捏脸的……》一文中提到过，目前所开发的捏脸小程序并未思考应用任何服务器，所以图片资源都是打包在小程序外部，也就须要思考如何利用无限的 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 个捏脸小程序，尽管没能把所有图片素材都放进去，不过前面的素材通过这么一轮轮的压迫，比之前的量减少了很多。办法总比问题多，就看怎么抉择怎么解决了。
