uni-app 图片优化

核心知识点

1. 图片格式选择

  • JPEG/JPG：适合照片等色彩丰富的图片，支持有损压缩
  • PNG：支持透明背景，适合图标、logo 等
  • WebP：现代图片格式，压缩率更高，质量更好
  • SVG：矢量图格式，适合图标、插图等需要缩放的场景

2. 图片压缩策略

  • 在线压缩工具：TinyPNG、Compressor.io 等
  • 批量压缩：使用脚本或工具批量处理图片
  • 压缩参数设置：根据图片用途设置合适的压缩质量
  • 响应式图片：为不同设备提供不同分辨率的图片

3. 图片懒加载

  • uni-app 内置懒加载：使用 lazy-load 属性
  • 自定义懒加载：基于 Intersection Observer API 实现
  • 预加载策略：提前加载即将显示的图片
  • 加载占位符：使用占位图提升用户体验

4. CDN 加速

  • CDN 服务选择：阿里云 CDN、腾讯云 CDN 等
  • 图片存储与分发：将图片存储在 CDN 上
  • 缓存策略：设置合理的缓存头
  • 图片处理：使用 CDN 提供的图片处理服务

5. 图片加载优化

  • 图片尺寸优化：使用合适尺寸的图片
  • 图片请求优化：减少图片请求次数
  • 精灵图：将多个小图标合并为一张图片
  • Base64 编码：适合小图标，减少 HTTP 请求

6. 跨平台图片处理

  • 平台差异：不同平台对图片格式和处理方式的支持
  • 条件编译：为不同平台提供不同的图片处理方案
  • 原生能力：使用平台原生的图片处理 API

实用案例

案例 1：电商应用商品图片优化

需求分析

  • 商品列表页需要展示大量商品图片
  • 商品详情页需要展示高清图片
  • 首页需要快速加载图片，提升用户体验

实现方案

  1. 图片格式选择

    • 商品列表页：使用 WebP 格式，压缩率高
    • 商品详情页：使用 JPEG 格式，保证清晰度
    • 图标：使用 SVG 格式，支持缩放

  2. 图片压缩

    # 使用 tinyjpg-cli 批量压缩图片
npm install -g tinyjpg-cli
tinyjpg --api-key=YOUR_API_KEY ./static/images/

  3. 懒加载实现

    <!-- 商品列表页 -->
<template>
  <view class="goods-list">
    <view v-for="item in goodsList" :key="item.id" class="goods-item">
      <image 
        :src="item.imageUrl" 
        mode="aspectFill" 
        lazy-load 
        class="goods-image"
      />
      <text class="goods-name">{{ item.name }}</text>
      <text class="goods-price">{{ item.price }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goodsList: []
    }
  },
  onLoad() {
    this.loadGoodsList()
  },
  methods: {
    loadGoodsList() {
      // 模拟加载商品列表
      this.goodsList = Array.from({length: 20}, (_, index) => ({
        id: index,
        name: `商品${index + 1}`,
        price: `¥${(Math.random() * 1000).toFixed(2)}`,
        imageUrl: `https://example.com/goods/${index + 1}.webp`
      }))
    }
  }
}
</script>

<style scoped>
.goods-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx;
}
.goods-item {
  width: 48%;
  margin: 1%;
  background-color: #fff;
  border-radius: 8rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}
.goods-image {
  width: 100%;
  height: 300rpx;
}
.goods-name {
  padding: 10rpx;
  font-size: 28rpx;
  line-height: 1.4;
}
.goods-price {
  padding: 0 10rpx 10rpx;
  font-size: 32rpx;
  color: #ff4d4f;
  font-weight: bold;
}
</style>

  4. CDN 配置

    • 将图片存储在阿里云 OSS 上
    • 配置 CDN 加速
    • 使用图片处理服务生成不同尺寸的图片
    // 生成不同尺寸的图片 URL
function getImageUrl(url, width, height) {
  return `${url}?x-oss-process=image/resize,m_lfit,w_${width},h_${height}`
}

  5. 响应式图片

    <template>
  <view class="product-detail">
    <image 
      :src="getResponsiveImage(product.imageUrl)" 
      mode="aspectFit" 
      class="product-image"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      product: {
        imageUrl: 'https://example.com/product/1.jpg'
      }
    }
  },
  methods: {
    getResponsiveImage(url) {
      const { windowWidth } = uni.getSystemInfoSync()
      const width = windowWidth > 750 ? 750 : windowWidth
      return `${url}?x-oss-process=image/resize,m_lfit,w_${width}`
    }
  }
}
</script>

案例 2：社交媒体应用图片处理

需求分析

  • 用户上传头像和图片
  • 需要支持图片裁剪和编辑
  • 图片需要快速加载和展示

实现方案

  1. 图片上传优化

    <template>
  <view class="upload-section">
    <button @click="chooseImage" type="primary">选择图片</button>
    <view class="image-list">
      <image 
        v-for="(image, index) in images" 
        :key="index" 
        :src="image" 
        mode="aspectFill" 
        class="uploaded-image"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      images: []
    }
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 9,
        sizeType: ['compressed'], // 选择压缩后的图片
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.images = res.tempFilePaths
          this.uploadImages(res.tempFilePaths)
        }
      })
    },
    uploadImages(imagePaths) {
      // 上传图片到服务器
      imagePaths.forEach((path, index) => {
        uni.uploadFile({
          url: 'https://example.com/upload',
          filePath: path,
          name: 'file',
          formData: {
            'user': 'test'
          },
          success: (uploadFileRes) => {
            console.log('上传成功', uploadFileRes.data)
          }
        })
      })
    }
  }
}
</script>

  2. 图片裁剪

    <template>
  <view class="crop-section">
    <button @click="chooseAndCropImage" type="primary">裁剪头像</button>
    <image :src="avatar" mode="aspectFill" class="avatar" v-if="avatar" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      avatar: ''
    }
  },
  methods: {
    chooseAndCropImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          // 使用 uni-app 内置的图片裁剪功能
          uni.getImageInfo({
            src: res.tempFilePaths[0],
            success: (info) => {
              // 这里可以使用第三方裁剪插件或自定义裁剪组件
              this.avatar = res.tempFilePaths[0]
            }
          })
        }
      })
    }
  }
</script>

  3. 图片加载优化

    • 使用渐进式加载：先加载低质量占位图，再加载高质量图片
    • 实现图片加载失败处理
    • 使用骨架屏提升用户体验

学习目标

  1. 掌握 uni-app 中图片优化的各种技术和方法
  2. 学会根据不同场景选择合适的图片格式
  3. 掌握图片压缩和懒加载的实现方法
  4. 了解 CDN 加速和图片处理服务的使用
  5. 能够处理跨平台图片加载的差异
  6. 提升应用性能和用户体验

总结

图片优化是 uni-app 应用性能优化的重要组成部分，通过合理选择图片格式、压缩图片大小、实现懒加载、使用 CDN 加速等方法，可以显著提升应用的加载速度和用户体验。在实际开发中，开发者应该根据具体场景选择合适的优化策略，平衡图片质量和加载速度，为用户提供最佳的视觉体验。

同时，开发者还需要注意跨平台图片处理的差异，使用条件编译或平台特定的 API 来处理不同平台的图片加载问题，确保应用在所有平台上都能正常运行和展示图片。

« 上一篇 uni-app 字体图标 下一篇 » uni-app 视频优化
↑