面试题：Flutter中如何优化图片资源以减小内存占用

Question

在Flutter应用开发里，图片资源往往占据较大内存。请阐述至少两种优化图片资源从而减小内存占用的方法，并说明每种方法在实际项目中的应用场景。

Answer 1

1. 压缩图片
   • 应用场景：在展示普通商品图片、文章配图等对图片质量要求不是极高的场景中，可通过压缩图片来减小内存占用。例如电商APP中商品列表展示的图片，适当压缩后用户几乎察觉不到画质损失，但能显著降低内存消耗。
2. 使用合适的图片格式
   • WebP格式
     • 应用场景：适用于各种场景，尤其是对加载速度和内存占用要求较高的情况。比如新闻资讯类APP，使用WebP格式图片既能保证图片质量，又能大幅减少图片文件大小和内存占用，加快页面加载速度。
   • PNG - 8格式
     • 应用场景：对于颜色数量较少、具有透明度的简单图标、UI元素等，PNG - 8格式比普通PNG格式能节省更多空间，从而减少内存占用。像APP的导航栏图标等场景可使用该格式。
3. 按需加载图片
   • 应用场景：在长列表或分页浏览的场景中，如社交媒体的动态列表。只在图片即将显示在屏幕上时才加载，避免一次性加载大量图片导致内存飙升。
4. 调整图片分辨率
   • 应用场景：根据不同设备屏幕分辨率加载合适分辨率的图片。对于普通手机屏幕，加载较低分辨率图片就能满足显示需求，无需加载过高分辨率图片，如在普通手机端的短视频APP中，视频封面图片可根据设备调整分辨率，降低内存占用。