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