图片压缩工具

原型：

效果：

网站顶部是一个常见的导航栏，左侧展示网站的 logo 以及标题，右侧展示内置的主题配色。

中间就是上传的核心区域了，左侧是上传图片的配置区域，右侧是压缩后的图片展示区域。

左侧选中图片之后，下方会出现一些配置，用户可以根据自己的需求进行调整。

1. 压缩方式分为俩种
   • 服务端压缩：通过走后端接口，把文件在服务器上进行压缩，然后通过接口返回压缩后的图片。当然这种方式支持所有类型格式的压缩，但是压缩效率极低。当然，通过服务端压缩是不会上传您的图片。
   • 客户端压缩：通过浏览器进行压缩，不过要注意的是avif 格式转换其他图片格式进行压缩，压缩后的图片质量会有损失，会出现不可预测的问题。
2. 输出格式: 只支持压缩为 jpg、png、avif、webp 等格式。
3. 压缩质量：压缩质量分为 0-1 等级，等级越高，压缩后的图片质量越好，但是压缩时间也会越长, 等级越低，压缩后的图片质量越差，但是压缩时间也会越短。
4. 压缩尺寸：支持针对不同的图片进行调整，用户可以自定义压缩后的图片尺寸，支持自定义宽度和高度，用户可以根据自己的需求进行调整。

当然针对于批量压缩图片，是不需要文件重复校验的。

点击压缩按钮之后，压缩结果会显示在右侧：

1. 展示压缩后的图片列表，用户可以直接下载和删除图片。
2. 压缩类女会显示：压缩前与压缩后的对比，可明显提示压缩效果。
3. 同时支持，对压缩后的图片进行预览，用户可以直接在右侧查看压缩后的图片。