一开始我只是想写一个图片压缩页面。上传图片调用 Sharp设置质量参数返回压缩结果。代码并不复杂半天就能做出一个能跑的 Demo。但当我真的开始使用它问题很快出现了压缩后的图片为什么不够小固定质量是否适合所有图片PNG、JPEG、WebP 应该怎么选批量处理失败一张其他任务要不要继续用户不选择输出格式时应该转换格式还是保留原格式我逐渐意识到能处理图片和做一个好用的图片工具是两件完全不同的事。从固定质量到智能选择Pixel Slim 不再只使用一个固定质量参数而是生成多个压缩候选通过视觉误差比较在满足清晰度要求的结果中选择体积更小的版本。用户可以一次上传最多 20 张图片任务并发执行单张失败不会中断整个队列。默认保留原图格式也可以主动转换为 JPEG、PNG、WebP 或 AVIF。功能不是规划出来的而是“用”出来的上线压缩功能后我陆续收到了一些真实需求“能不能修改图片宽高”“裁剪时能不能预览”“批量图片只调整其中一张可以吗”“能不能拼长截图”“自由拼图为什么不能放大图片”“透明背景能不能导出”这些反馈推动项目从压缩工具变成了图片工具箱。现在它支持可视化尺寸调整、拖动裁剪、独立缩放、模板拼图、自由画布、长截图重叠识别、透明背景导出以及半透明水印处理。浏览器能完成的就不交给服务器项目使用 React、Vite 和 Canvas 构建。修改尺寸、拼图和水印处理全部在浏览器本地完成不需要上传图片。只有智能压缩由 Node.js、Express 和Sharp 即时处理并且不使用数据库保存文件。前端部署在 Cloudflare Workers压缩服务运行在 Render。考虑到免费实例资源有限我增加了 IP 限流、并发队列、像素上限、处理超时和内存优化在安全和正常用户体验之间做了平衡。做完功能只是开始为了让它真正可以被使用我还补上了移动端适配、中英文切换、SEO 页面、GA4 统计、自定义域名和异常状态提示。这个项目让我感受最深的是真正花时间的从来不是第一个版本而是后面那些不起眼却决定体验的细节。在线体验https://image.997728.xyz如果你也在做独立项目欢迎体验也欢迎交流从 Demo 走向产品过程中遇到的那些问题。
一开始我只是想写一个图片压缩页面。上传图片调用 Sharp设置质量参数返回压缩结果。代码并不复杂半天就能做出一个能跑的 Demo。但当我真的开始使用它问题很快出现了压缩后的图片为什么不够小固定质量是否适合所有图片PNG、JPEG、WebP 应该怎么选批量处理失败一张其他任务要不要继续用户不选择输出格式时应该转换格式还是保留原格式我逐渐意识到能处理图片和做一个好用的图片工具是两件完全不同的事。从固定质量到智能选择Pixel Slim 不再只使用一个固定质量参数而是生成多个压缩候选通过视觉误差比较在满足清晰度要求的结果中选择体积更小的版本。用户可以一次上传最多 20 张图片任务并发执行单张失败不会中断整个队列。默认保留原图格式也可以主动转换为 JPEG、PNG、WebP 或 AVIF。功能不是规划出来的而是“用”出来的上线压缩功能后我陆续收到了一些真实需求“能不能修改图片宽高”“裁剪时能不能预览”“批量图片只调整其中一张可以吗”“能不能拼长截图”“自由拼图为什么不能放大图片”“透明背景能不能导出”这些反馈推动项目从压缩工具变成了图片工具箱。现在它支持可视化尺寸调整、拖动裁剪、独立缩放、模板拼图、自由画布、长截图重叠识别、透明背景导出以及半透明水印处理。浏览器能完成的就不交给服务器项目使用 React、Vite 和 Canvas 构建。修改尺寸、拼图和水印处理全部在浏览器本地完成不需要上传图片。只有智能压缩由 Node.js、Express 和Sharp 即时处理并且不使用数据库保存文件。前端部署在 Cloudflare Workers压缩服务运行在 Render。考虑到免费实例资源有限我增加了 IP 限流、并发队列、像素上限、处理超时和内存优化在安全和正常用户体验之间做了平衡。做完功能只是开始为了让它真正可以被使用我还补上了移动端适配、中英文切换、SEO 页面、GA4 统计、自定义域名和异常状态提示。这个项目让我感受最深的是真正花时间的从来不是第一个版本而是后面那些不起眼却决定体验的细节。在线体验https://image.997728.xyz如果你也在做独立项目欢迎体验也欢迎交流从 Demo 走向产品过程中遇到的那些问题。
