唉，一年了无人问津，开源算了

[joye]

最近重构了我的个人项目图小小（ 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

---

[horizon]

不如做个浏览器插件

[shurimasoul]

感谢开源，已 star

[caqiko]

怎么越压缩越大呢？

[caqiko]

@caqiko #103 原始图片文件： https://images.pexels.com/photos/534164/pexels-photo-534164.jpeg

[aecra]

@wlf92 @joye #13 我记得浏览器是可以读取本地文件夹的，可以考虑增加一个选择本地目录的功能，这样是不是可以直接对本地目录进行操作？

[joye]

@aecra 此完整功能正在实现中，已经有网友贡献了代码，现在入口页直接拖拽文件夹是可以的，我正在实现点击选取文件夹的功能

[joye]

@caqiko 我试着将右侧的输出图片质量调整到 0.2 ，它的压缩率能达到 61.04%，最终输出 1.5M ，并且没有特别多的质量损失，你可以试着调整下参数多试几次不同的参数，本地执行很快，不会有太多的时间成本。越压越大的原因是**默认参数值**并不是很适合这张图片的压缩，需要手动调整参数。我用 tinypng 试了一下，它没有压缩选项，但压缩耗时很长，输出达到 3M

[chancat]

不错不错

[laohucai]

先 Star 一下

[a455455b]

从和菜头那边看到了你的贴子，老哥加油，愿你能走出困境。

[binfreeze]

这种太常见的功能想变现太难了。我不用任何库，用 C 写的 PNG 编码解码也就 3000 行的代码量。照着规范研究下就是了。你这调包的情况下，里面的算法自己都不知道怎么回事，后续优化也只能是在交互上下手了。而如果为了更好的交互体验，不如写成某平台的原生程序更合适。可这东西，到底怎么收费呢，有那么多需求吗？我写的程序是为了集成在自己的 2D 游戏引擎里面，否则直接 PS 就够用了。

[binfreeze]

这论坛上的老哥们都比较和气了。有说出问题所在的，也有鼓励你的。我之前在一个群里面，跟他们说自己写图片压缩是为了好奇心，想搞清原理，而且这种程序写完可以用一辈子，感觉花点时间挺值得的。结果换来的是群起而攻之，比如“你不需要吃饭的吗，写这种明明有库的程序，有这时间干点什么不好，巴拉巴拉。” 那种感觉就仿佛我是中世纪的女巫，要被这些人绑在树上烧死一样。相对之下，这里真是一片祥和。

[xclrr]

哈哈，看看我 webassembly+tfjs+worker 写的 图大大
https://cappuccino.moe
https://github.com/xororz/web-realesrgan/

[joye]

@binfreeze 你说得很对，这仅仅是个整整合工具，本身不具备技术含量，我也没有研究过底层图形编解码相关知识。如果不是一些极端特定场景，在国内做程序我不建议研究底层，有现成的拿来就用是最好的选择，做好应用层的封装和调用就足够了，当然有很多技术之外的客观因素让我现在有这种感悟和判断，我工作很多年了，国内最好的大小厂都呆过，这些判断不一定适合你。早些年注册了一个公司，也陆续开发了一些小软件，当时做的第一个版本确实想过靠这个工具赚点小钱，这一次是真的纯为开源，去年底的时候公司已经注销了，我只希望以后回过头来能看到自己曾经因为爱好而做过技术的足迹，仅此而已

[WhoMercy]

和菜头的文章提到了层主，ref link： https://www.hecaitou.com/2024/05/Little-thing-that-touch-the%20heart.html?m=1

[j6711]

大哥，提个问题，我发现用 dockerfile 文件打镜像的时候报错，chatgpt 给我说的是多了个;号，去掉后打镜像成功了，看看是否多加了这个符号呢~

[NiGuAnHeShang]

大佬，想用你的代码做二次开发，但是没有指定开源协议呢

[joye]

@j6711 前端的 SPA 应用部署有一点小挑战，需要配置单一入口，即将更新一个适用于生产环境的 Dockerfile 脚本。目前 Dockerfile 来自 PR ，且只能用于开发环境

[joye]

@NiGuAnHeShang MIT 许可，已更新

[cheung]

收藏收藏收藏

[opentrade]

一直用 https://tinypng.com/用了 10 多年

[ahyong]

支持文件夹上传还是不错的，支持开源