点击上方亿元程序员+关注和★星标
引言
哈喽大家好 ，有小伙伴说他们公司的游戏项目，光图片资源就高达300M，最近正在考虑上架微信小游戏。
但是 ，如此庞大的游戏资源，想通过分包的形式肯定是不行的，只能放到服务器上，通过CDN让玩家下载。
笔者还是很好奇 ，什么样的资源如此巨大，通过对小伙伴的深入了解。
惊讶发现，他们的图片资源居然没有压缩！且不说图片是否过于精致、美术手笔是否过于奔放，不压缩实在是太难受了！
言归正传 ，本期将带小伙伴们一起来看下，在Cocos游戏开发中，如何省心省力地压缩图片，330M能压缩到多少。
本文源工程可在文末获取，小伙伴们自行前往。
图片压缩
图片压缩是一种在尽可能保持图片质量的前提下，减小PNG文件大小的技术。
游戏开发 中常用的图片压缩工具有TinyPNG、pngquant、Compressor.io等等。
pngquant是一款用于PNG图像有损压缩的命令行工具和函数库。
该转换工具 能显著减小文件大小（通常高达70%），同时保持完整的Alpha通道透明度。生成的图像兼容所有主流网页浏览器和操作系统。
常用的参数包括：
- quality min-max：质量，使用满足或超过"最大质量"所需的最少颜色数量。若转换后的质量低于"最低质量"要求，图像将不会被保存。
- speed N ：速度，从
1（暴力）到10（最快）。默认为3。速度10的质量降低5%，但比默认速度快8倍。
图片压缩实例
下面 一起来看下，在Cocos游戏开发中，如何通过插件集成到项目，使其构建后自动压缩图片。
1.资源准备
先准备 一张PNG图片，原图大小0.97M，用来确认压缩是否成功，压缩质量如何。
2.创建扩展
新建 一个项目，通过菜单扩展->创建扩展打开扩展创建面板。
我们选择构建插件，这是官方自定义构建插件的一个简单示例，点击创建扩展，我们直接在上面扩展我们的自动压缩。
3.启用扩展
通过 菜单扩展->扩展管理器打开扩展管理器，在已安装扩展中找到我们新建的插件，将其改成开启状态。
4.扩展界面
首先 我们删掉我们不需要的asset-handlers.ts和panel.ts·，在builder.ts中只保留hooks配置。
接下来我们给构建面板加上一组配置，用来控制压缩是否开启、压缩的质量以及压缩的速度：
代码整理如下：
- 启用复选框 （ui-checkbox）：默认不开启。
- 最小质量滑块 （ui-slider）：
0-100，默认65，步进1。
- 最大质量滑块 （ui-slider）：
0-100，默认80，步进1。
- 速度滑块 （ui-slider）：
1-10，默认3，步进1。
- 校验最大质量>=最小质量 :
最后 通过npm install和npm run build编译即可。
打开构建面板就可以看到我们添加的内容：
5.构建后压缩
界面 控制添加完之后，我们需要把pngquant压缩植入到构建完成的钩子（onAfterBuild）里，使其构建完成后自动按照配置的参数进行压缩。
代码整理如下：
- 检查 是否启用了质量控制：
- 提前 准备好压缩的工具，这里包括win 和mac 的，并且根据系统选择：
- 在构建后目录 递归查找所有图片文件：
- 组装命令开始逐个压缩 ：
6.测试
编译代码后，打开我们的构建面板，开始进行构建，构建完成后可以点开日志查看：
从日志 可以看出原文件大小: 1002.9KB, 压缩后大小: 179.6KB, 压缩了82.1%，提示压缩成功。
打开构建好的目录，找到我们的资源，可以看到已经压缩完成：
图片压缩进阶
1.过滤
通常游戏中会有一些图片为了避免模糊，例如主界面，会通过配置的或者特殊文件名开头的形式进行过滤，不进行压缩，小伙伴们在面板或者文件配置，然后压缩前过滤即可。
2.记录
图片比较多 ，每次构建耗时比较长的话，可以把压缩提前到构建之前，并通过MD5记录表示图片已经压缩，直接跳过该文件，避免重复压缩。
结语
通过 压缩，小伙伴的图片资源从330M降到了273M，压缩了18%。感觉剩余资源还是比较大，建议从其他方式进行检查和处理，例如查找没依赖的资源删除 、找美术重造等等。
不知道小伙伴们有没有其他更好的办法呢？
本文源工程 可通过私信 发送 PngExtension 获取。
我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。
AD:笔者线上的小游戏《打螺丝闯关》《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》《方块掌机经典》大家可以自行点击搜索体验。
实不相瞒，想要个赞 和爱心 ！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐专栏：
点击下方灰色按钮+关注。