Google 出品，开源、免费图片压缩 99.9% 画质高保真 | 芋道源码 —

阅读全文

⭐⭐⭐ Spring Boot 项目实战	⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》	《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》	《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》	《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》	《Java 面试题 + Java 学习指南》

摘要: 原创出处 http://www.iocoder.cn/Fight/squoosh-image-compress/ 「芋道源码」欢迎转载，保留摘要，谢谢！

🙂🙂🙂关注微信公众号：【芋道源码】有福利：

RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表

RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址

您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。

新的源码解析文章实时收到通知。每周更新一篇左右。

认真的源码交流微信群。

给公众号配图、往后台传附件、把方案塞进 PPT，每到最后一步，总有一张图卡在体积上。画质不能再降，尺寸只能一缩再缩，实在不行就把想说的那部分删掉。

过去只有两条路能解决。一条是装 Photoshop，在「存储为 Web 所用格式」里把参数一个个试过去。另一条是把原图传到别人的网站上等它转完，代价是这张图得先离开你的电脑再回来。

Google 的 Chrome Labs 团队做了个网页，把这两条路都绕开了。它叫 Squoosh，2018 年在 Chrome 开发者峰会上第一次露面，官方出品，完全免费，开源，不用注册，不限次数。

一个网址就能用，别的什么都不用装

地址是 https://squoosh.app/ ，源码在 https://github.com/GoogleChromeLabs/squoosh 。

Squoosh 官网首页

打开之后不用登录，也找不到那个「免费版每天五张」的按钮，因为它没有。首页中间那个粉色的圆，把图拖进去，或者直接按 Ctrl+V 粘贴。

Squoosh 压缩界面

进去之后是这样一个界面。左边一行显示原图信息，右边是可调参数，中间那条竖线能左右拖，同一个位置实时对比压缩前后，不用来回切窗口。

默认参数是 MozJPEG 编码器加质量 75。我打开首页自带的那张示例图试了一轮，界面底部写着压缩前 2.79MB，压完 862kB，体积只剩三成，狐狸毛的边缘没有出现明显的糊块。质量滑块从 0 到 100 随便拖，想更小往下走，想更保真往上推，右边体积跟着变，看到满意再下载。

右边那两个开关也值得点一下。Resize 能把图缩到指定的宽高，处理手机直出的四五千像素大图时特别省事。Reduce palette 会把颜色数量压到一个上限，扁平风格的插画和图标用它可以再省一大截。面板最下面收着一个 Advanced settings，展开是编码器的进阶参数，日常用不着碰。

基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能

项目地址：https://github.com/YunaiV/ruoyi-vue-pro

视频教程：https://doc.iocoder.cn/video/

那张图从头到尾没离开你的电脑

这一条值得单独讲，因为它和大多数在线压缩工具的做事方式不一样。

它把 MozJPEG、libwebp、libavif、libjxl、OxiPNG 这些业界顶级的编解码器编译成 WebAssembly，塞进网页里让浏览器直接调用。你拖进去的那张图，从解码到压缩到导出，三步全在你自己的机器上跑完，一个字节都没有出门。它也是因为这个才敢把「图片不会离开你的设备」写在自己首页上。

本地与联网的分界

顺带一个好处，断网也能用。它本身是个 PWA，装到桌面或者手机上之后，离线打开照样压图。经常过客户素材、合同扫描件、设计稿的人，这条比省体积更值钱。

有一点得说清楚。图片确实不上传，但页面挂了 Google Analytics，会记录访问数据，里面包含压缩前后的体积数值。官方 README 把这四项写得明明白白。介意这一点，下一节可以自己搭一个。

基于 Spring Cloud Alibaba + Gateway + Nacos + RocketMQ + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能

项目地址：https://github.com/YunaiV/yudao-cloud

视频教程：https://doc.iocoder.cn/video/

四个格式，什么时候用哪个

它内置的编码器一共十种，日常真正会用到的就四个。

四个格式怎么选

JPG 最通用，任何设备都能打开。参数里有 0 到 100 的质量滑块，还能换成 MozJPEG 编码器，同样的画质下体积再小一截。

PNG 留给截图和要求透明背景的图。可以选 8 位或 24 位色深，限制调色板数量，决定要不要保留透明通道。

WebP 和 AVIF 是同等画质下体积最小的一档，一般比 JPG 小一半左右。代价在兼容性，老系统和一部分 App 打不开 AVIF，发出去之前最好先确认接收方认不认。

拿不准就先出 WebP，体积还不满意再换 AVIF。

十种编码器里还有个叫 QOI 的，全称是 Quite OK Image format，直译过来就是「还挺行的图片格式」。一个专门的图像编码标准，名字起得这么躺平，压缩圈里也找不出第二个。

它也有边界，而且不止一条

仓库首页实时截图

先看量级。这个仓库两万六千多 Star，Apache-2.0 协议，代码随你改随你用，也不用担心界面哪天突然开始收费。

第一条边界在兼容性。改格式能省体积，但省下来的那一半要靠接收方认这个格式才成立。给客户交付、发到群里、传到老系统，JPG 和 PNG 永远是最稳的选择。

第二条边界更要紧。官方在 2023 年初把命令行工具和 Node 库从仓库里拿掉了，只留网页版继续维护。你要是想批量压一整个文件夹，它帮不上忙，想装它的命令行，那条路也已经断了。

第三条是它替代不了专业软件。调色、锐化、批处理、色彩管理这些活，它一样都不干。它把自己钉在「把一张已经定稿的图变小」这一件事上，别指望用它修图。

想不依赖它，三条命令搬回自己电脑

如果一张图都不想经过别人的网页，或者想留一份在自己机器上，把源码拉到本地就行。

git clone https://github.com/GoogleChromeLabs/squoosh.git
cd squoosh
npm install
npm run build
npm run dev

前提是本机装了 Node.js 和 npm，没有别的依赖。跑完最后一条，终端会给出一个本地地址，浏览器打开它，界面和官网看到的一样，功能也一个不少。之后断网、官网哪天关掉，你手里这份都还在。

最后说一个替代品。TinyPNG 也是个很优秀的免费工具，压缩效果够用，界面更简单，缺点是免费额度用完要付费，而且图要先上传到它的服务器。