Squish 🎨

一种基于浏览器的现代图像压缩工具，利用 WebAssembly 进行高性能图像优化。Squish 支持多种格式，并提供直观的界面来压缩图像而不影响质量。

✨ 特征

• 🖼️ 支持多种图像格式：

  • AVIF（AV1 图像格式）
  • JPEG（使用 MozJPEG）
  • JPEG XL
  • PNG（使用 OxiPNG）
  • WebP

• 🚀 主要功能：

  • 基于浏览器的压缩（无需服务器上传）
  • 批处理支持
  • 格式转换
  • 每种格式的质量调整
  • 实时预览
  • 尺寸缩小统计
  • 拖拽界面
  • 用于压缩大量文件的智能队列

🛠️ 科技

Squish 采用现代网络技术构建：

• 用于 UI 的 React + TypeScript
• Vite 实现极快的开发
• 用于原生速度图像处理的 WebAssembly
• 用于样式的 Tailwind CSS
• 用于图像编解码器实现的 jSquash

🚀 开始

前提条件

• Node.js 18 岁或以上
• npm 7 或更高版本

安装

1. 克隆存储库：

1
2
git clone https://github.com/addyosmani/squish.git
cd squish

1. 安装依赖项：

1
npm install

1. 启动开发服务器：

1
npm run dev

1. 为生产而构建：

1
npm run build

💡 用法

1. 拖放或选择图像：将图片拖放到上传区域或点击选择文件
2. 选择输出格式：选择所需的输出格式（AVIF、JPEG、JPEG XL、PNG 或 WebP）
3. 调整质量：使用质量滑块在文件大小和图像质量之间取得平衡
4. 下载：下载单个图像或使用“全部下载”按钮进行批量下载

🔧 默认质量设置

• AVIF：50%
• JPEG：75%
• JPEG XL：75%
• PNG：无损
• WebP：75%

🤝 贡献

欢迎投稿！请随时提交拉取请求。对于重大更改，请先打开一个问题来讨论您想要更改的内容。

1. 分叉存储库
2. 创建功能分支 （git checkout -b feature/AmazingFeature)
3. 提交您的更改 （git commit -m 'Add some AmazingFeature')
4. 推送到分支 （git push origin feature/AmazingFeature)
5. 打开拉取请求

📝 许可证

该项目根据 MIT 许可证获得许可 - 请参阅 LICENSE 文件了解详情。

🙏 确认

• jSquash 用于 WebAssembly 图像编解码器
• MozJPEG 用于 JPEG 压缩
• libavif 用于 AVIF 支持
• libjxl 支持 JPEG XL
• Oxipng 用于 PNG 优化