[JS/TS] 开源图片压缩工具Pic Smaller：支持本地批量处理，基于浏览器WebAssembly技术

在日常开发和内容运营中，处理图片时常常会遇到体积过大导致上传失败或网站加载缓慢的问题。许多在线压缩工具需要将图片上传至服务器，这又带来了隐私泄露的担忧。近期，开源社区中出现了一款名为 Pic Smaller 的开源在线图像压缩工具，它基于 Vite + React 开发，最大的特点是所有压缩过程均在本地浏览器中完成，无需上传任何数据，在保障安全的同时，让图片处理变得更高效。

项目简介

Pic Smaller 是一款基于浏览器本地压缩的开源在线图片压缩工具，采用现代前端技术栈（Vite + React + WebAssembly + OffscreenCanvas + Web Worker）构建。用户无需将图片上传到服务器，所有压缩过程都在本地浏览器环境中执行，速度更快且绝对安全。它支持 JPEG、PNG、WEBP、AVIF、SVG 和 GIF 等多种主流图片格式，并提供了直观的拖拽上传、压缩前后效果对比等实用功能。

技术实现原理

Pic Smaller 能够实现高效的本地压缩，主要得益于以下现代浏览器技术的运用：

• WebAssembly 与 Web Worker：利用 WebAssembly 来加速核心的图像处理算法，再结合 Web Worker 的多线程机制，将繁重的计算任务移至后台，避免阻塞浏览器主线程，从而显著提升压缩速度。
• OffscreenCanvas：使用 OffscreenCanvas 在独立的 Worker 线程中进行图像渲染和处理，进一步优化了性能表现。
• 内置优化压缩算法：针对不同的图片格式，项目集成了经过优化的压缩库。例如，使用 MozJPEG 处理 JPEG，使用 wasm-image-compressor 处理 PNG，使用 gifsicle-wasm-browser 处理 GIF，使用 wasm_avif 处理 AVIF，以及使用 svgo 优化 SVG。这些算法能在保证视觉画质的前提下，最大化地减小文件体积。

该项目在 GitHub 上已获得超过 2.6k 的星标，得到了众多开发者的认可。

功能特性

• 多格式智能压缩：支持 JPEG、PNG、WEBP、AVIF、SVG 和 GIF 等多种图像格式，内置智能算法自动平衡文件大小与画质。
• 批量与文件夹处理：支持一次性上传多张图片或直接拖拽整个文件夹进行批量压缩，极大地提升了处理大量图片时的工作效率。

• 纯本地化处理：所有压缩过程均在浏览器本地完成，图片数据无需上传至任何服务器，彻底保障了用户隐私与数据安全。
• 灵活配置选项：允许用户自定义各项压缩参数，如输出质量、分辨率、目标格式、颜色数量等，并可实时预览压缩前后的效果对比。

• 跨平台与移动友好：界面响应式设计，适配桌面端与移动端各种浏览器，操作简洁直观。
• 国际化支持：提供多语言界面，满足全球不同地区用户的使用需求。

快速安装使用

在线体验

最快捷的方式是直接访问其官方在线页面：

https://picsmaller.com/

在页面中通过拖拽或点击选择图片后，压缩过程即刻在浏览器中开始，无需任何安装。

本地开发环境搭建

如果你想在本地运行或参与开发，Pic Smaller 基于 Vite 和 React 构建，搭建环境非常简单：

# 克隆仓库
git clone https://github.com/joye61/pic-smaller.git

# 切换目录
cd ./pic-smaller

# 安装依赖
npm install

# 启动开发服务器
npm run dev

Docker部署

如果你希望在自己的服务器上独立部署 Pic Smaller 服务，可以使用 Docker 快速完成：

# 构建Docker镜像
docker build -t picsmaller .

# 启动容器
docker run -p 3001:3001 -d picsmaller

部署完成后，通过访问 http://127.0.0.1:3001 即可使用你自己部署的 Pic Smaller 服务。

项目体验展示

项目界面设计简洁直观。打开后，最醒目的就是上传区域，支持拖拽、点击选择以及直接粘贴图片。上传后，界面会清晰展示每张图片压缩前后的文件大小、尺寸以及压缩率。你还可以根据需要调整输出配置。整个使用流程可以概括为：

1. 上传图片：通过拖拽、粘贴或文件选择器上传。
2. 执行压缩：工具自动调用本地算法进行压缩。
3. 对比效果：直观对比压缩前后的视觉差异。
4. 下载结果：一键下载压缩后的图片。

由于所有计算都在本地完成，整个过程的响应速度非常快，非常适合日常对图片进行体积优化的需求。

项目小结

作为一款开源且免费的图片压缩工具，Pic Smaller 凭借其广泛的多格式支持、出色的压缩率以及最重要的本地安全处理机制，精准地解决了图片处理中的常见痛点。无论是开发者优化网站资源、设计师处理素材，还是内容运营人员准备图文，这都是一款值得收藏和使用的效率工具。

更多详细功能、配置说明和开源实战细节，可以访问其项目地址查看：

https://github.com/joye61/pic-smaller