网站的做用电商平台
图片压缩
对于图库网站来说，图片压缩是图片优化中最基本且最重要的操作，能显著减少图片文件的大小，从而减低带宽使用和流量消耗，大幅度降低成本的同时，提高图片加载速度。
有哪些压缩图片的方法呢？
- 将图片格式转换为体积更小的格式，比如 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);}测试
节约了稍微一点空间吧~