第十六篇：做一个能把图片压缩到指定大小的工具

记录图片压缩到指定大小工具的设计与发布：为什么用户需要的是小于 100KB、500KB 这样的明确结果，而不是一个抽象压缩率。

第十六篇：做一个能把图片压缩到指定大小的工具

这次做的是一个很典型、很朴素，但搜索需求非常明确的小工具：图片压缩到指定大小工具。

它对应的关键词很直接：图片压缩、在线图片压缩、图片压缩到指定大小、JPG压缩、PNG压缩、图片压缩到100KB。背后的真实场景也很清楚：用户不是为了研究图片编码参数，而是因为某个网站、表单、简历系统、后台系统或者公众号素材上传入口提示“图片太大”。

很多图片压缩工具会给一个“压缩率”滑块。问题是，用户真正想说的是：我只想让这张图片小于 100KB，能不能直接给我结果？

为什么做这个工具

我之前已经做过一个报名照片压缩与证件照尺寸工具，它更偏考试报名、证件照尺寸、照片规格这样的细分场景。这次的 yuan-image-compressor 则是更通用的图片压缩工具，目标不是裁成某个证件照尺寸，而是围绕“文件大小上限”解决问题。

实际使用中，用户常见的问题是：

• 上传简历照片时限制 100KB。
• 后台系统要求图片小于 500KB。
• 公众号素材、表单附件、报名材料提示图片过大。
• 普通压缩工具只让调压缩率，但调完之后还要自己反复看文件大小。

所以这个工具的第一版功能很克制：选择图片，输入目标 KB，例如 20KB、100KB、500KB，然后尽量压到这个大小以内。

实现上的取舍

这个工具仍然沿用 Yuan Tools 的标准结构：

D:\dev\yuan-tools\yuan-image-compressor

技术栈是 Svelte + Vite + Tauri。Web 版可以作为静态页面放进主站，Windows 版通过 Tauri 打包成 EXE。

压缩逻辑放在浏览器端完成，不上传服务器。实现上主要用了 Canvas：

1. 读取用户选择的 JPG、PNG 或 WebP 图片。
2. 根据目标 KB 转成字节数。
3. 对 JPG 和 WebP 做质量二分搜索。
4. 如果质量降低后还太大，再逐步降低输出尺寸。
5. PNG 保留透明时压缩空间有限，所以自动模式会优先选择更适合控体积的 JPG。

这不是追求专业图像处理软件的全部能力，而是优先解决日常上传限制。

第一版功能

v0.1.0 做到了这些：

• 支持选择或拖拽 JPG、PNG、WebP 图片。
• 支持输入目标大小。
• 提供 20KB、100KB、500KB 快捷按钮。
• 支持自动推荐格式，也可以手动选择 JPG、PNG、WebP。
• 显示原图大小、压缩后大小、节省比例和输出尺寸。
• 点击下载生成新文件，不修改原图。
• Web 版和 Windows 桌面版都在本地处理图片。

这个工具的 SEO 文案也尽量围绕真实需求写，而不是泛泛地堆“图片压缩”。例如页面标题和说明会明确提到“图片压缩到指定大小”“图片压缩到100KB”“JPG压缩”“PNG压缩”这些用户会搜索的词。

发布结果

这次发布的仓库是：

https://github.com/yuan0727/yuan-image-compressor

GitHub Release：

https://github.com/yuan0727/yuan-image-compressor/releases/tag/v0.1.0

Release 资产包括：

• yuan-image-compressor-win-v0.1.0.exe
• yuan-image-compressor-web-v0.1.0.zip
• yuan-image-compressor-guide-v0.1.0.md

同时，根索引仓库 yuan-tools 也增加了这个工具的入口。

后续可以改进什么

第一版先保证“指定 KB 压缩”这个核心体验成立。后续可以考虑：

• 批量图片压缩。
• 保留 EXIF 或主动清理 EXIF 的选项。
• 更精细的 PNG 优化。
• 目标平台预设，例如“简历照片 100KB”“公众号封面 500KB”。
• 压缩前后图片对比滑块。

我喜欢这个工具的地方在于，它不是一个炫技功能，而是一个非常明确的用户句子：图片太大，帮我压到 100KB 以下。

很多小工具的价值，可能就藏在这种普通但高频的句子里。