最近重构了我的个人项目图小小( Pic Smaller ),无论是技术上还是 UI 上都进行了重构,改动巨大,这次我决定完全开源它( Github 地址在文末)。因为之前跑了一年几乎无人问津,它一直是一个完全免费项目,没有广告,没有打赏,甚至联系方式都没有,做成这个样子属实让人很不甘,所以干脆完全开源算了,希望能吸引一些关注,先看看新版本预览效果:
图小小是一个图片压缩工具,基于 Vite+React 技术栈开发,它可以完全取代类似 TinyPNG 之类的在线图片压缩工具,且压缩之后视觉表现效果往往更好。但图小小有个更大的优势:通过图小小进行图片压缩完全是基于浏览器本地的,没有任何服务端交互,图片不会上传到远程服务器,所以非常安全,不用担心隐私图片被泄露。
目前图小小支持 JPEG/PNG/WebP/Gif 四种格式的图片压缩,基本上能满足绝大部分日常使用需求,本项目为个人业务时间开发,为了节约时间,采用了大量的第三方开源项目,所以图小小本身是没什么技术含量的,我个人认为图小小优秀在于提供了良好的 UI 和使用体验,虽然是缝合怪,但鲜有人做出类似的产品
简单说一下技术实现,感兴趣的自行研究,不得不感谢 Webassembly 技术的加持,让 PNG/Gif 编解码这类 CPU 密集计算型需求在纯网页端实现成为了现实,并且还有不错的性能表现
为了防止 UI 阻塞,运用了 Web Worker 技术进行编解码和压缩,同时为了防止同一时刻浏览器的内存占用过大(内存占用过大也会导致卡顿),用了一点小技巧在 Worker 端实现了一个简单的队列 Queue,这里不展开,有兴趣的自行研究源码
网站部署在 vercel 上,主要原因是穷,所以初次访问速度会有一定的影响,国内其实大部分地区已经屏蔽了 vercel ,为了让国内用户也能访问,不得已通过 Cloudflare 做别名解析了 txx.cssrefs.com 这个域名。这里要强烈推荐个人开发者采用国外的解决方案,这个网站除了域名(域名是以前在腾讯云买的),其他证书服务器等都是免费的,感谢万恶的资本主义
由于图小小是纯本地执行,因而不同的电脑配置会有不同的压缩表现,实测批量压缩成百上千张图片会有明显的卡顿甚至浏览器崩溃现象。这是正常的,由于没有任何限制,使用本工具可能会导致浏览器耗尽 CPU 和内存资源,所以使用时请自行评估
项目地址:https://github.com/joye61/pic-smaller
101
horizon 113 天前
不如做个浏览器插件
|
![]() |
102
shurimasoul 113 天前
感谢开源,已 star
|
![]() |
103
caqiko 113 天前
|
![]() |
104
caqiko 113 天前
|
![]() |
107
joye OP @caqiko 我试着将右侧的输出图片质量调整到 0.2 ,它的压缩率能达到 61.04%,最终输出 1.5M ,并且没有特别多的质量损失,你可以试着调整下参数多试几次不同的参数,本地执行很快,不会有太多的时间成本。越压越大的原因是**默认参数值**并不是很适合这张图片的压缩,需要手动调整参数。我用 tinypng 试了一下,它没有压缩选项,但压缩耗时很长,输出达到 3M
|
![]() |
108
chancat 113 天前 via Android
不错不错
|
![]() |
109
laohucai 113 天前
先 Star 一下
|
110
a455455b 112 天前 ![]() 从和菜头那边看到了你的贴子,老哥加油,愿你能走出困境。
|
111
binfreeze 112 天前 via Android
这种太常见的功能想变现太难了。我不用任何库,用 C 写的 PNG 编码解码也就 3000 行的代码量。照着规范研究下就是了。你这调包的情况下,里面的算法自己都不知道怎么回事,后续优化也只能是在交互上下手了。而如果为了更好的交互体验,不如写成某平台的原生程序更合适。可这东西,到底怎么收费呢,有那么多需求吗?我写的程序是为了集成在自己的 2D 游戏引擎里面,否则直接 PS 就够用了。
|
112
binfreeze 112 天前 via Android ![]() 这论坛上的老哥们都比较和气了。有说出问题所在的,也有鼓励你的。我之前在一个群里面,跟他们说自己写图片压缩是为了好奇心,想搞清原理,而且这种程序写完可以用一辈子,感觉花点时间挺值得的。结果换来的是群起而攻之,比如“你不需要吃饭的吗,写这种明明有库的程序,有这时间干点什么不好,巴拉巴拉。” 那种感觉就仿佛我是中世纪的女巫,要被这些人绑在树上烧死一样。相对之下,这里真是一片祥和。
|
![]() |
113
xclrr 112 天前
哈哈,看看我 webassembly+tfjs+worker 写的 图大大
https://cappuccino.moe https://github.com/xororz/web-realesrgan/ |
![]() |
114
joye OP @binfreeze 你说得很对,这仅仅是个整整合工具,本身不具备技术含量,我也没有研究过底层图形编解码相关知识。如果不是一些极端特定场景,在国内做程序我不建议研究底层,有现成的拿来就用是最好的选择,做好应用层的封装和调用就足够了,当然有很多技术之外的客观因素让我现在有这种感悟和判断,我工作很多年了,国内最好的大小厂都呆过,这些判断不一定适合你。早些年注册了一个公司,也陆续开发了一些小软件,当时做的第一个版本确实想过靠这个工具赚点小钱,这一次是真的纯为开源,去年底的时候公司已经注销了,我只希望以后回过头来能看到自己曾经因为爱好而做过技术的足迹,仅此而已
|
115
WhoMercy 110 天前 via Android
和菜头的文章提到了层主,ref link: https://www.hecaitou.com/2024/05/Little-thing-that-touch-the%20heart.html?m=1
|
![]() |
116
j6711 108 天前
|
![]() |
117
NiGuAnHeShang 108 天前
大佬,想用你的代码做二次开发,但是没有指定开源协议呢
|
![]() |
118
joye OP @j6711 前端的 SPA 应用部署有一点小挑战,需要配置单一入口,即将更新一个适用于生产环境的 Dockerfile 脚本。目前 Dockerfile 来自 PR ,且只能用于开发环境
|
![]() |
119
joye OP @NiGuAnHeShang MIT 许可,已更新
|
![]() |
120
cheung 102 天前
收藏收藏收藏
|
![]() |
121
opentrade 11 天前
一直用 https://tinypng.com/用了 10 多年
|
![]() |
122
ahyong 9 天前
支持文件夹上传还是不错的,支持开源
|