当前位置：首页 > news >正文

文件上传优化（图片压缩）

news 来源：原创 2025/6/22 6:52:45

图片压缩

对于图库网站来说，图片压缩是图片优化中最基本且最重要的操作，能显著减少图片文件的大小，从而减低带宽使用和流量消耗，大幅度降低成本的同时，提高图片加载速度。

有哪些压缩图片的方法呢？

将图片格式转换为体积更小的格式，比如 Webp 或其他格式
对图片质量进行压缩
缩小图片尺寸

当然对于图片网站来说，我们希望可能不要影响图片的质量，因此更推荐第一种方法。

图片压缩格式

格式上，有两种选择：

1）Webp：由 Google 开发的现代图片格式，支持有损和无损压缩。相比传统格式：

比 PNG 文件小约 26%
比 JPEG 文件小约 25%~34%
支持透明背景
兼容性：大部分主流浏览器均已支持 Webp

2）AVIF：基于 AV1 视频编码技术的图片格式，压缩率更高。

比 Webp 的文件大小更小，画质更优。
支持透明背景和高动态范围（HDR）

虽然 AVIF 看起来更牛，但目前其兼容性没有 Webp 好，为了保证图片在不同浏览器都能正常加载，建议选择 Webp 格式。

图片压缩方案

跟解析图片的操作一样，可以使用本地的图像处理类库自行操作，也可以利用第三方云服务完成。

因为我们图片已经上传到了腾讯云COS 对象存储服务，可以直接利用数据万象服务。通过配置图片处理规则，在图片上传的同时自动进行压缩处理，减少开发成本。

访问图片时实时压缩
上传图片时实时压缩（√）
已上传图片压缩

对于我们的需求，要将图片格式转化为 Webp，在上传文件时，传入 Rules 规则。使用 HTTP API调用时，传入处理规则参数：

后端开发

为了实现方便，我们此处仅对文件格式进行转化，不进行质量变换之类的其他处理。

1）修改 CosManage 上传图片的方法，将图片后缀转为 webp，并且使用数据万象将图片格式转为 webp

   public PutObjectResult putPictureObject(String key, File file) {PutObjectRequest putObjectRequest = new PutObjectRequest(cosClientConfig.getBucket(), key,file);// 对图片进行处理（获取基本信息也被视作为一种处理）PicOperations picOperations = new PicOperations();// 1 表示返回原图信息picOperations.setIsPicInfo(1);List<PicOperations.Rule> rules = new ArrayList<>();//图片压缩（转成 webp 格式）String webpKey = FileUtil.mainName(key) + ".webp";PicOperations.Rule compressRule = new PicOperations.Rule();compressRule.setRule("imageMogr2/format/webp");compressRule.setBucket(cosClientConfig.getBucket());compressRule.setFileId(webpKey);rules.add(compressRule);// 构造处理参数picOperations.setRules(rules);putObjectRequest.setPicOperations(picOperations);return cosClient.putObject(putObjectRequest);}

2）修改 PictureUploadTemplate 上传图片的方法，从图片处理结果中获取到缩略图，并设置到返回结果中

  //获取图片处理结果ProcessResults processResults = putObjectResult.getCiUploadResult().getProcessResults();List<CIObject> objectList = processResults.getObjectList();if(CollUtil.isNotEmpty(objectList)){CIObject compressedCiObject = objectList.get(0);//封装压缩图返回结果return buildResult(originFilename,compressedCiObject);}