Pic Smaller (图小小)
Pic Smaller 是一款免费开源的浏览器端批量图片压缩工具，支持 JPEG、PNG、WebP、GIF、SVG、AVIF 等格式的智能压缩，以及 HEIC/HEIF 本地解码、格式转换、缩放裁剪等功能。所有处理通过 Web Workers、WebAssembly、Canvas 和浏览器编解码器在本地完成，图片不会上传到服务器，完全保护隐私。
社区作者 · zZz
它解决什么问题
Pic Smaller (图小小) 是一个完全在浏览器中运行的免费开源批量图片压缩器。核心功能包括：批量压缩 JPEG、PNG、WebP、GIF、SVG 和 AVIF 图片；支持本地解码 HEIC/HEIF 并导出为 JPEG、PNG、WebP 或 AVIF；可进行格式转换、调整大小、裁剪以及控制编码质量；支持通过文件选择器、文件夹选择器、拖拽或剪贴板粘贴导入图片。界面提供原图与压缩结果交互式分屏对比，可下载单个结果或将整个批次保存为 ZIP 压缩包。
由于图像处理完全依赖浏览器本地能力（Web Workers、WebAssembly、Canvas 和浏览器编解码器），用户图片不会离开设备，隐私安全性高。配图 1 展示了核心工作区，结合了批量输入、压缩结果、输出设置和下载操作。项目还提供 Pic Smaller Desktop 旗舰桌面版，支持更多图片格式、处理大型文件和文件夹库，并集成了背景移除、水印移除和高保真图像放大等 AI 工具。项目使用 MIT 许可证，适合 Web 开发者、设计师、内容创作者以及任何需要高效批量压缩图片并注重隐私的用户。
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
本指南适用于希望自行部署或开发 Pic Smaller 的开发者，也适用于希望了解本地运行方式的普通用户。
环境要求：
- Node.js 22 LTS 或更新版本
npm 10 或更新版本开发环境安装与运行步骤：
- 克隆仓库：
git clone https://github.com/joye61/pic-smaller.git- 进入项目目录：
cd pic-smaller- 安装依赖：
npm ci- 启动开发服务器：
npm run dev常用命令：
npm test：运行测试套件npm run lint：运行 ESLintnpm run build：构建独立 Node.js 服务器npm run build:pages：导出静态 Cloudflare Pages 站点到 out/ 目录部署说明：
Cloudflare Pages（公开站点方式）：
- 生产分支：master
- 预览分支：develop
构建命令：
npm run build:pages- 输出目录：out
- Node.js 版本：22
- 推送 master 更新生产环境，推送 develop 创建预览部署，其他分支不会自动部署。
- Pages 构建会移除 Next.js 生成的顶层 404.html，以让 Cloudflare Pages 使用原生的单页应用回退机制。
Docker（私有或自托管方式）：
- 构建镜像：
docker build --pull -t pic-smaller:latest .- 运行容器：
docker run -d \--name pic-smaller \ --restart unless-stopped \ --read-only \ --tmpfs /tmp:rw,noexec,nosuid,size=64m \ --cap-drop ALL \ --security-opt no-new-privileges \ -p 127.0.0.1:3000:3000 \ pic-smaller:latest
- 打开 http://127.0.0.1:3000 访问。如需公网访问，应将容器置于 TLS 终止反向代理（如 Caddy、nginx 或 Traefik）之后；仅当有意直接暴露网络时才移除 127.0.0.1: 绑定前缀。
密钥与配置：
- Web 应用不需要 API 密钥。切勿提交凭据、Cloudflare tokens、.env 文件、.dev.vars、私钥或本地 Wrangler 状态，仓库忽略规则已排除这些文件。
- 如果未来功能需要密钥，应存储在部署平台的密钥管理器中，并仅在 .env.example 文件中提供文档化的占位名称。
项目结构：
- src/app/：Next.js 应用入口
- src/components/：可复用界面组件
- src/engines/：浏览器编解码器、workers、变换和压缩队列
- src/locales/：翻译文件
- src/views/：应用视图
- public/：构建时准备的浏览器编解码器和 WebAssembly 资源
- scripts/：编解码器准备和部署构建辅助脚本
- tests/：Node.js 测试套件
贡献指南：
- 从 develop 分支创建新分支。
- 运行 npm test、npm run lint 以及相应生产构建。
- 当行为或界面变化时更新文档和截图。
- 提交聚焦的 Pull Request，并附带清晰描述和验证说明。
常见问题：
- 浏览器兼容性：需要使用支持 Web Workers、WebAssembly、Canvas 和现代浏览器编解码器的浏览器。
- 私有部署时如需公网访问，请务必配置 TLS 反向代理并限制端口暴露。
来源教程配图
