uniapp中不使用大图，使用什么类型的图片-CFANZ编程社区

在 UniApp 中，为避免因大图导致的性能问题（如加载慢、内存占用高、页面卡顿），建议使用 轻量化图片格式 ：

一、推荐的图片格式

1. WebP 格式

优点：Google 推出的高效图片格式，支持有损/无损压缩，体积比 PNG/JPG 小 25%~35%。
适用场景：复杂图片（如照片、渐变背景）。
注意：需确保目标平台支持（iOS 需 iOS 14+，Android 4.0+ 基本支持，UniApp 会做兼容处理）。

2. SVG 格式

优点：矢量图形，无损缩放，文件体积极小。
适用场景：图标、简单图形、线条元素（如 Logo、按钮图标）。
注意：复杂 SVG 可能渲染性能较差，避免嵌套过多路径。

3. PNG-8 或压缩后的 PNG

优点：支持透明度，适合简单图形。
适用场景：需透明度的图标、简单插画。
优化工具：使用 TinyPNG 或 ImageOptim 压缩。

4. JPEG 有损压缩

优点：适合色彩丰富的照片，压缩率高。
适用场景：背景图、照片类内容。
优化参数：压缩质量设为 60%~80%（肉眼几乎无差异）。

二、优化策略

1. 按屏幕尺寸提供图片

根据设备分辨率提供 多倍图（如 1x, 2x, 3x），避免用大图缩小显示：
```
<image src="/static/icon@2x.png" mode="widthFix" />
```

2. 使用雪碧图（Sprite）

将多个小图标合并为一张图，减少 HTTP 请求：

.icon {
  background-image: url('/static/sprite.png');
  background-size: 200px 200px; /* 按实际尺寸调整 */
}

3. 懒加载（Lazy Load）

对非首屏图片启用懒加载，提升首屏速度：
```
<image lazy-load src="/static/banner.jpg" />
```

4. 启用 CDN 加速

将图片托管到 CDN，加速加载（如阿里云 OSS、腾讯云 COS）。

5. 压缩图片资源

工具推荐：
- Squoosh：在线压缩，支持 WebP/AVIF 转换。
- Sharp：Node.js 自动化压缩工具。

命令行一键压缩：

npx @squoosh/cli --webp '{quality:80}' input.jpg

三、UniApp 特有优化技巧

1. 使用 `image` 组件的 `webp` 属性

自动兼容 iOS/Android 的 WebP 支持：
```
<image src="/static/photo.webp" webp />
```

2. 启用本地资源压缩

在 vue.config.js 中配置图片压缩：

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|webp)$/i)
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true });
  },
};