小程序图片压缩：轻松解决大图片上传问题！

前端

2022-11-05 04:32:58

了解小程序图片压缩，优化用户体验

在现代影像设备的加持下，照片动辄几MB甚至几十MB，高品质图片固然赏心悦目，但上传慢、占用云存储空间大等问题随之而来。对于小程序开发者来说，图片压缩至关重要，它能有效提升小程序的加载速度和用户体验。

为何需要图片压缩？

缩减文件大小，加快上传速度： 大型图片上传耗时，压缩后能大大提升上传效率。
节省云存储空间，降低成本： 压缩后的图片体积更小，节省云存储空间，从而降低存储成本。
优化小程序加载速度和性能： 减少图片文件大小，能加速小程序加载和运行。
提升用户体验，增强小程序易用性： 加载速度快的小程序更受用户青睐，图片压缩能有效提升用户满意度。

图片压缩方法

图片压缩分为两种方式：

无损压缩： 不改变图片像素，仅缩减文件大小。PNG、GIF等算法常用于无损压缩。
有损压缩： 牺牲部分图片质量以减小文件大小。JPEG、WebP等算法适用于有损压缩。

小程序图片压缩方法

小程序提供两种图片压缩方式：

微信小程序 API：

wx.compressImage({
  src: filePath, // 图片路径
  quality: 80, // 压缩质量，0~100
  success(res) {
    console.log(res.tempFilePath) // 压缩后临时文件路径
  }
})

第三方库：
第三方库如 sharp、imagemin、jimp 等提供丰富的压缩选项，满足不同需求。

如何选择合适的方法？

无损压缩： 适用于产品详情页、证件照等需要保持图片原有质量的场景。
有损压缩： 适用于列表页、缩略图等对图片质量要求不高的场景。

保证图片质量的前提下压缩图片

设置合适压缩质量： 压缩质量越高，图片质量越好，文件大小也越大。一般推荐使用 70%~80% 的压缩质量。
选择合适的图片格式： PNG 支持无损压缩，但文件大小较大；JPEG 支持有损压缩，文件大小较小但质量降低；WebP 是一种新兴图片格式，支持无损和有损压缩，且文件大小较小。

小程序图片 Base64 编码

Base64 是一种将二进制数据转换为文本字符串的编码方式。小程序提供以下方法将图片编码为 Base64 字符串：

wx.getFileSystemManager().readFile({
  filePath: filePath, // 图片路径
  encoding: 'base64', // 编码类型
  success(res) {
    console.log(res.data) // 图片的 Base64 编码字符串
  }
})

小程序 Base64 解码为图片

将 Base64 编码字符串解码为图片，小程序提供了以下方法：

wx.getFileSystemManager().writeFile({
  filePath: filePath, // 图片路径
  data: base64String, // 图片的 Base64 编码字符串
  encoding: 'base64', // 编码类型
  success() {
    console.log('图片保存成功')
  }
})

常见问题解答