社区编辑申请
注册/登录
开源的在线图片压缩工具-Squoosh
开发 前端
前几天,我要压缩几张自己的照片用于电子请柬,不想把这些私有图片上传到别人的网站上,就想着找个开源的。最终还真找到一个非常不错的开源图片在线压缩工具-squoosh。

说到图片压缩,大部分人应该都知道tinypng这个在线图片压缩工具,不得不说,这货的压缩质量还挺不错的。而且,我也经常用到它。前几天,我要压缩几张自己的照片用于电子请柬,不想把这些私有图片上传到别人的网站上,就想着找个开源的。最终还真找到一个非常不错的开源图片在线压缩工具-squoosh。

开源的在线图片压缩工具-Squoosh

squoosh在压缩图片时,都是在本地执行,不会将图片上传到服务端,这样就保障了用户隐私安全。但是,Squoosh用到了谷歌分析工具,会收集一些基础信息。

开源的在线图片压缩工具-Squoosh

如果连基础信息你也介意的话,反正代码在你手上,想怎么干就看你自己了。

我们去Github把代码下载下来,解压源代码,进入到源码根目录,安装依赖包。

npm install

安装过程可能会因为网络原因安装失败,这里是用nrm来替换镜像源。

然后执行编译。

npm run build

开源的在线图片压缩工具-Squoosh

最后,执行运行命令:

npm run dev

因为我用的是Windows,执行npm run dev会报错,所以,就修改了package.json的内容,将:

"scripts": {
"build": "rollup -c && node lib/move-output.js",
"debug": "node --inspect-brk node_modules/.bin/rollup -c",
"dev": "DEV_PORT=\"${DEV_PORT:=5000}\" run-p watch serve",
"watch": "rollup -cw",
"serve": "serve --listen=$DEV_PORT --config ../../../serve.json .tmp/build/static",
"prepare": "husky install"
},

改为:

"scripts": {
"build": "rollup -c && node lib/move-output.js",
"debug": "node --inspect-brk node_modules/.bin/rollup -c",
"dev": " run-p watch serve",
"watch": "rollup -cw",
"serve": "serve --listen=5000 --config ../../../serve.json .tmp/build/static",
"prepare": "husky install"
},

如果是Linux,则不需要做如上的调整。

现在执行运行命令:

开源的在线图片压缩工具-Squoosh

启动成功后,浏览器访问http://127.0.0.1:5000,就可以开始压缩图片了。

开源的在线图片压缩工具-Squoosh

这里,我随便找一图片原图大小为776KBpng图片压缩并转换为jpg后的大小为101KB。

开源的在线图片压缩工具-Squoosh

当然,这里的转换格式和压缩质量也可以通过设置来调整的。通过网页的方式,我们可以一张张的进行压缩,如果我们压缩的图片较多时,这样的操作效率就有些低了,其实,Squoosh还提供了API和客户端命令来批量压缩。

开源的在线图片压缩工具-Squoosh

开源的在线图片压缩工具-Squoosh

有兴趣的,可以按照Github中的说明安装下来尝试一下。

责任编辑:姜华 来源: 今日头条

同话题下的热门内容

如何创建一个无代码的自助客户聊天机器人Java 服务 Docker 容器化优秀实践程序员不得不知道的 API 接口常识如何提高 TypeScript 的代码质量?聊聊 13 种锁的实现方式11个 ES2022(ES13)中惊人的 JavaScript 新特性使用 Vite 和 TypeScript 带你从零打造一个属于自己的 Vue3 组件库Hooks时代,如何写出高质量的react和vue组件?

编辑推荐

太厉害了,终于有人能把TCP/IP协议讲的明明白白了!牛人5次面试腾讯不成功的经验HBase原理–所有Region切分的细节都在这里了Javascript如何监听页面刷新和关闭事件如何搭建一个HTTPS服务端
我收藏的内容
点赞
收藏

51CTO技术栈公众号