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