图片压缩工具 | 需求思考及桌面应用开发技术选型
🤔 背景故事
消费降级后，逛咸鱼发现图片压缩类的工具卖的挺火的，心里就飙出一个想法，我为什么不搞一个？然后配置自动发货（网盘链接），多少也能创造点价值😄。
其实更简单粗暴的做法是做二道贩子，花1块钱买下来后转卖，不过这不符合我的码农理念，能自己做为什么要花钱买，而且我还计划着做迭代升级。
我想要的工具是能够支持现在流行的 WebP、AVIF 格式。
WebP 与 AVIF
WebP 和 AVIF 是两种现代图像格式，目标都是减小文件大小、提升加载速度、同时保持较高画质，但它们的底层原理、压缩能力、浏览器支持等方面有所不同。
| 维度 | WebP | AVIF |
|---|---|---|
| 开发者 | Alliance for Open Media（AOM） | |
| 发布年 | 2010 | 2019 |
| 基础 | 基于 VP8 视频编码技术 | 基于 AV1 视频编码技术 |
| 支持 | 广泛（Chrome, Firefox, Edge, Safari ≥14） | 新兴（Chrome, Firefox, Safari ≥16，部分较慢） |
| 有损压缩 | 比 JPEG 小 25~35% | 比 WebP 小 30~50%（同等质量） |
| 无损压缩 | 支持 | 支持（更强） |
| 体积表现 | 小于 JPEG | 通常小于 WebP（特别是复杂图） |
| 压缩速度 | 快（适合实时生成） | 慢（尤其在编码时） |
| 解码速度 | 快（低 CPU 占用） | 慢一点（对性能有要求） |
| 渐变、色彩过渡 | 偶有色带 | 更自然平滑 |
| 细节保留 | 表现良好 | 更优秀（尤其是纹理/暗部） |
| 透明度支持 | 支持 Alpha 渐变 | 支持（更细腻，压缩比高） |
使用场景建议
| 使用场景 | 推荐格式 | 原因 |
|---|---|---|
| 广告图 / Banner 图 | AVIF | 更小体积，加载快，画质高 |
| 需要快速编码的图（如服务端处理、用户上传） | WebP | 编码快，兼容好 |
| 图像处理工具输出 | WebP + AVIF 混合 | 根据浏览器支持情况进行内容协商（内容协商方案） |
| 高清透明图 | AVIF | 支持 Alpha 且压缩比高 |
💻 功能设计
功能点
- 图片压缩（JPG/JPEG、PNG、GIF）
- 图片转换（JPG/JPEG、PNG、WEBP、AVIF 之间互转）
- 其他功能
- 配置压缩率、宽度
- 背景填充：指定宽高及颜色值
- 批量改名
- 处理结果反显（处理前后文件大小对比😄）
界面设计
初步设想的简单为主的界面
程序基本逻辑
目前的基本设想
- 用户运行程序，选择待处理图片文件
- 配置处理步骤
- 格式转换
- 压缩
- 背景填充
- 角度旋转
- 裁剪
- 选择保存路径
- 程序串行处理任务，前端反显结果
🔧 开发技术选型
该软件目前只考虑桌面版本，并以 windows 平台为主。我比较熟悉 Java/Kotlin、JavaScript，所以筛选的技术栈会侧重考虑这些领域，其他的方式（如 C#+WPF、QT等）怎不列入备选范围😄
另外一个重要的权衡要素是处理图片的工具库。
桌面开发技术方案
| 特性 / 框架 | Electron | Tauri 2 | Flutter | KMP (Kotlin Multiplatform) |
|---|---|---|---|---|
| 跨平台原理 | HTML + JS + Node.js + Chromium | HTML + JS + Rust + 系统原生 WebView | 自绘 UI（Skia 引擎） | 共享业务逻辑（Native UI） |
| UI 渲染方式 | Chromium 浏览器 | 系统自带 WebView | Skia 引擎绘制（自绘 Canvas） | 每个平台使用原生 UI 实现 |
| UI 代码复用率 | 💯（完全复用） | 💯（完全复用） | 💯（完全复用） | ❌ UI 不复用，逻辑复用 |
| 性能表现 | ❌ 较差，资源占用高 | ✅ 较好，轻量级，内存小 | ✅ 接近原生（尤其在移动端） | ✅ 原生性能 |
| 体积（打包后） | 📦 非常大（~100MB 起） | 📦 小很多（~3–10MB） | 📦 中等（10–30MB） | 📦 小（看平台） |
| 跨平台支持 | ✅ Win / macOS / Linux | ✅ Win / macOS / Linux / Web（计划） | ✅ iOS / Android / Web / 桌面 | ✅ iOS / Android / Web / 桌面 |
| 原生功能支持 | ✅ 调 Node.js 或原生模块 | ✅ Rust 写桥接逻辑，较安全灵活 | ✅ 用 Dart FFI 插件或平台通道 | ✅ 原生支持好 |
| 生态成熟度 | 🌟 非常成熟 | ⭐ 新兴，但发展快速 | 🌟 成熟，社区活跃 | ⭐ 成长中，主打后端共享 |
| 开发语言 | JavaScript / HTML / CSS | JS/TS + Rust | Dart | Kotlin |
| 适用场景 | 快速开发桌面应用 | 高性能、轻量级桌面应用 | 移动端优先的全平台应用 | 移动端为主，共享业务逻辑 |
Electron/Tauri 是前端+WebView（使用 HTML+CSS 能够做出绚丽界面😎），Flutter 是自绘 UI 引擎，KMP 是逻辑层复用的 SDK 工具。
Electron ⭐⭐⭐⭐⭐
- 把 Chromium + Node.js 打包进来，运行 HTML/CSS/JS 应用。
- UI 运行在 Chromium 浏览器中。
- 类似一个「打包浏览器」的桌面应用。
Tauri2 ⭐⭐⭐⭐
- UI 一样用 HTML/CSS/JS（运行在系统的 WebView 中）。
- 后端逻辑用 Rust 编写，比 Electron 更轻量。
- 架构清晰、安全性高，可以脱离 Node.js。
- 构建过程需要下载较大的文件（我本地大概是2GB+）
KMP（Kotlin）⭐⭐⭐⭐
- 共用业务逻辑，如网络、数据库、模型等（用 Kotlin 编写）。
- UI 在每个平台用原生实现（Jetpack Compose / SwiftUI）。
- 更像是“跨平台 SDK”，不是“跨平台 UI 框架”。
Flutter ⭐⭐
- 使用 Dart 编写 UI 和逻辑，运行在 Flutter 引擎之上。
- 所有 UI 不是用原生控件，而是 自己绘制（Skia 引擎）。
- 性能好、体验统一，但体积稍大，调原生功能需通过平台通道。
工具库对比
图片压缩需要支持 webp、avif 两个格式，需要对应库的支持：
| 框架 | webp库 | avif库 |
|---|---|---|
| Electron | sharp.js | sharp.js |
| Tauri2 | image | ravif |
| Flutter | ||
| KMP | thumbnailator |
- 强大的 sharp.js 库支持 webp、avif（2025年新版本后），不过打包时需要额外配置。
- Java 原生图像库（如 ImageIO）尚未支持 AVIF，但你可以通过 Java 调用外部 AVIF 编码器工具（如 avifenc）来实现转换。
- Rust 的
image库只能解码 WebP，不能编码 WebP⚠️，扣分😂。 - 如果有更好的工具，欢迎各位看官提出😄。
综上，Electron 是最优的选择。
🪴项目技术栈
本项目用 VSCode 开发，打包工具使用 RsBuild，前端框架为 VUE3 + Naive UI
| 组件/框架 | 版本 | 说明 |
|---|---|---|
| electron | 36.3.0 | 直接用最新版本 |
| rsbuild | 1.3.21 | 基于 rspack 的打包工具，快 |
| vue | 3.5.14 | |
| Naive UI | 3.41.0 | 我常用的UI库 |
| sharp | 0.34.2 | 2025年后的版本才支持 avif |
| electron-builder | 26.0.12 | electron打包工具 |
🛜 开源地址
项目在 GITHUB 上开源，地址是 https://github.com/0604hx/open-image-tiny，如果对您有帮助，麻烦顺手点个星星✨。