图片加载优化——从资源压缩到懒加载

一、图片在 App 中的重要性

在我们的英语学习 App 中，图片无处不在：首页 Banner 轮播图、功能栏图标、课程封面、用户头像、单词卡片配图等。图片是 UI 体验的重要组成部分，但也是性能消耗的大户——大尺寸图片会拖慢页面加载速度、增加内存占用、降低帧率。

HarmonyOS 提供了丰富的图片处理能力，但开发者需要了解如何正确使用这些能力。本文从格式选择、资源引用、渲染配置三个维度，系统介绍图片加载的优化策略。

二、图片格式选择：PNG vs SVG vs WebP

不同的图片格式有不同的特点和适用场景：

PNG（便携式网络图形）

• 无损压缩，支持透明通道
• 适合图标、Logo 等需要清晰边缘的图片
• 文件较大，不适合大尺寸图片
• 在我们的项目中，大量图标文件使用了 PNG 格式，如ic_back.png、ic_more.png

SVG（可缩放矢量图形）

• 矢量格式，任意缩放不失真
• 文件小巧，适合图标和简单图形
• 不支持复杂颜色渐变和照片级图像
• 项目中部分图标使用了 SVG 格式，如ic_home.svg、ic_mic.svg

WebP

• Google 推出的现代图片格式
• 同等质量下文件大小比 PNG 小 26%、比 JPEG 小 25-34%
• 支持有损/无损压缩和透明通道
• HarmonyOS 原生支持 WebP 格式

在我们的项目中，首页的 Banner 图片采用的是 PNG 格式（如banner1.png），而功能栏的部分图标采用了 SVG 格式。建议将大尺寸的 Banner 图从 PNG 迁移到 WebP 格式，可以显著减少资源包体积和加载时间。

三、$r 资源引用的最佳实践

在 HarmonyOS 中，图片资源通过$r()函数引用。例如首页 Banner 组件的图片引用：

@ParambannerArray:Array<ResourceStr>=[$r('app.media.banner1'),];

$r()的语法格式为$r('app.media.文件名')，其中文件名不需要包含扩展名。资源文件放在src/main/resources/base/media/目录下。

资源引用的最佳实践：

1. 使用资源限定符：针对不同屏幕密度提供不同分辨率的图片资源。在resources/目录下使用mdpi、ldpi、xdpi等限定符目录，系统会自动选择最合适的资源。

2. 按模块组织资源：在 11 模块架构中，每个模块的图片资源放在各自模块的resources/base/media/目录下，避免跨模块引用。公共资源（如通用图标）放在 commonLib 模块中共享。

3. 避免大图直接引用：尺寸超过 1000px 的大图在加载时建议压缩后再使用，或使用Image.fitMode控制显示区域。

四、Image 组件的 interpolation 配置

Image组件提供了interpolation属性，用于控制图片放大时的像素插值算法：

Image(item).interpolation(ImageInterpolation.High).objectFit(ImageFit.Fill).draggable(false).borderRadius(16)

ImageInterpolation有三个可选值：

• None：不进行插值，性能最好但放大后会出现马赛克
• Medium：中等插值，性能和质量平衡
• High：高质量插值，放大后图像最平滑，但性能开销最大

在我们的 Banner 组件中，由于 Banner 图片需要自适应容器宽度（从 sm 到 xl 不同尺寸），建议仅在图片放大超过原始尺寸时启用 High 模式。如果图片原始分辨率足够高，可以设置为 Medium 以平衡性能。

五、Swiper 中的图片懒加载

首页 Banner 使用 Swiper 组件实现轮播图：

Swiper(){ForEach(this.bannerArray,(item:ResourceStr)=>{Image(item).interpolation(ImageInterpolation.High).objectFit(ImageFit.Fill).draggable(false).borderRadius(16).margin({left:6,right:6})},(item:string,index:number)=>item+index);}.indicator(false).nextMargin(2).prevMargin(2).loop(true).autoPlay(true).displayCount(this.swiperDisplayCount.getValue(this.breakpointModel.currentBreakpoint))

Swiper 默认具有懒加载能力——只有当前显示的项和相邻的项会被渲染，其他项在滑到前不会加载。但对于图片来说，“不渲染"不等于"不加载”——setTimeout预加载、框架预取机制仍可能导致不可见图片的资源加载。

优化方案：

1. 使用 Image 的syncLoad属性：设置为false（默认值）可以让图片解码异步执行，不阻塞 UI 线程
2. 使用占位图：在图片加载完成前显示一个轻量级的占位图
3. 大小适配：根据断点模型动态设置图片尺寸

.width(newBreakpointType<number>({sm:496,md:496,lg:496,xl:496}).getValue(this.breakpointModel.currentBreakpoint)).height(newBreakpointType<number>({sm:159,md:189,lg:189,xl:189}).getValue(this.breakpointModel.currentBreakpoint))

这种方法根据设备宽度调整图片显示尺寸，避免了在手机上加载超大图片的开销。

六、图片资源的构建时压缩

在 Release 模式下，Hvigor 构建系统会自动对图片资源进行压缩。但开发者仍需要做好以下工作：

1. 控制图片原始尺寸：一张 Banner 图不要超过 1920×1080 分辨率
2. 使用合适的格式：照片类用 JPEG 或 WebP，图标类用 SVG 或 PNG
3. 使用资源限定符：为不同密度设备提供不同分辨率图片
4. 定期清理未使用的图片资源：使用 DevEco Studio 的资源检查工具

七、总结

图片加载优化是 App 性能优化的关键环节。从资源格式的选择（PNG/SVG/WebP）、资源引用的规范（$r 引用、模块化组织）、Image 组件的 interpolation 配置，到 Swiper 的懒加载机制，每个环节都有优化空间。在我们的项目中，图片优化的核心原则是：按需加载、适配合适的分辨率、选择轻量的格式。这不仅减小了应用包体积，也显著提升了页面渲染速度和滚动流畅度。