移动APP图片优化指南

移动端图片优化的重要性

移动设备流量和性能限制更严格，图片优化可以：

• 减少流量消耗，节省用户费用
• 提升加载速度，改善用户体验
• 降低电量消耗
• 减少存储空间占用

Android优化方案

1. 使用WebP格式

// 在res/mipmap目录使用WebP
// Android 4.0+支持WebP
// 体积比PNG小26-34%

2. 生成多尺寸资源

<!-- 建议的尺寸配置 -->
mipmap-mdpi: 48x48
mipmap-hdpi: 72x72
mipmap-xhdpi: 96x96
mipmap-xxhdpi: 144x144
mipmap-xxxhdpi: 192x192

3. 使用VectorDrawable

<!-- 适合图标，体积小，可缩放 -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <!-- SVG内容 -->
</vector>

4. Glide图片加载优化

Glide.with(context)
    .load(url)
    .override(800, 600) // 限制尺寸
    .format(DecodeFormat.PREFER_RGB_565) // 减少内存
    .diskCacheStrategy(DiskCacheStrategy.ALL)
    .into(imageView)

iOS优化方案

1. 使用Asset Catalog

• 自动生成1x, 2x, 3x资源
• 自动压缩和格式转换
• 支持App Thinning

2. 使用HEIF格式

• iOS 11+支持
• 体积比JPG小50%
• 支持动态图片

3. Kingfisher优化

imageView.kf.setImage(
    with: url,
    options: [
        .processor(DownsamplingImageProcessor(size: viewSize)),
        .scaleFactor(UIScreen.main.scale),
        .cacheOriginalImage,
        .transition(.fade(0.2))
    ]
)

通用优化技巧

1. 压缩策略

2. 缓存策略

• 使用内存缓存和磁盘缓存
• 设置合理的缓存过期时间
• 支持离线访问

3. 渐进式加载

• 先显示模糊缩略图
• 逐渐加载高清图
• 提升感知速度

工具推荐

• TinyPNG：在线压缩工具
• ImageOptim (Mac)：批量优化
• Squoosh：Google开源工具
• 本站在线工具：支持批量压缩