《uni-app跨平台开发完全指南》- 11 - 图片处理与优化

今天我们来聊聊移动开发中最常见也最让人头疼的问题——图片处理。别小看这张图，处理不好，整个App体验会很拉胯。

图片为什么这么重要？

在uni-app开发中，情况更复杂。同一个App要跑在iOS、Android、微信小程序、支付宝小程序、H5这五个平台上，每个平台对图片的处理方式都不一样。

---

一：图片压缩

1.1 压缩原理

很多人以为压缩就是把图片压扁，其实远不止这么简单。图片压缩分两种：

• 有损压缩：丢弃人眼不敏感的数据，忽略了一定的图片质量
  优点：压缩率高，文件大幅减小；
  缺点：质量有损失，不能无线压缩；
• 无损压缩：优化存储算法，图片保持高精度
  优点：优化存储算法；
  缺点：压缩率低，文件仍较大；

在实际的业务开发场景中，根据场景要具体分析，比如：

• 用户头像可以用有损压缩；
• 商品二维码必须无损压缩，不然用户扫不出来了；
• 页面背景图，可以适当进行有损压缩，图片加载速度和质量都得到了兼顾；

1.2 图片压缩

选择时直接压缩

// 选择图片并进行压缩
uni.chooseImage({
   
   
  count: 3, // 最多选3张
  sizeType: ['compressed'], // 压缩模式
  sourceType: ['album', 'camera'], 
  success: (res) => {
   
   
    // tempFilePaths 数组就是压缩后的图片路径
    const compressedImages = res.tempFilePaths
    console.log('压缩完成')
  }
})

自定义压缩参数

// 对已选图片进行精细压缩
uni.compressImage({
   
   
  src: '/path/to/large-image.jpg',
  quality: 80, // 质量 0-100，默认80
  compressedWidth: 1024,  // 压缩后宽度
  compressedHeight: 1024, // 压缩后高度
  success: (res) => {
   
   
    // 压缩后的临时路径
    const tempFilePath = res.tempFilePath
  }
})

1.3 压缩策略

1. 按场景选择压缩参数

使用场景	推荐尺寸	建议质量
用户头像	200×200	85%
商品主图	800×800	80%
详情长图	750×不限	75%
背景大图	1200×600	70%

2. 如何选择？

如果需要透明背景：用PNG（无损）或WebP（有损）

是照片还是图标？
照片 → 用JPG或WebP
图标/图形 → 用PNG或SVG

如果需要动画：用APNG或Lottie，不需要就选静态格式即可

3. 常见问题

• 压缩得越小越好
• 过度压缩会产生噪点和色块
• 建议：不断调整压缩比例，找到质量和大小的平衡点

---

二：懒加载

2.1 工作原理

原理其实很简单，最直观的理解：看不见的就不着急

懒加载就是这样工作的：