图片很重要

在智能小程序开发的过程中，经常需要引入图片资源。如果使用图片不当（过多过大的图片），在加载时会消耗更多的系统资源，从而影响整个页面的性能，因此做好图片优化非常重要。

如何进行图片优化

第一步：控制大小

（1）针对本地图片

​由于放置在本地的图片会被直接打包到小程序包内，图片过大会导致包体积过大，加载时间变长。同时图片过大也会导致渲染时间变长，因此开发者需尽可能的压缩图片的大小。以下列出一些图片优化的思路：

  • 对于不需要透明格式的图片，推荐采用 jpeg 格式来代替 png 格式。

  • 安卓端可使用webp的图片格式。webp图片格式在有损压缩的情况下，肉眼不易察觉出压缩前后的变化，但是体积却得到很明显的减小（注意： iOS 百度 App 版本 < 11.22 时不支持webp格式）。

  • 确保小程序包内无冗余和无用的图片资源。

  • 请注意默认情况下会加载，但可能之后永远不会渲染的图片，例如“轮播图”，“手风琴”和“图片画廊”。

  • 为了缩短渲染关键图片所需的时间，请延迟加载不太重要的图片，并在关键图片渲染完成后再加载后续内容。

  • 使用工具对图片进行压缩。常见的压缩工具如下：

    图片格式压缩工具压缩比例
    png 格式https://www.npmjs.com/package/pngquant-bin50-70
    jpeg 格式https://www.npmjs.com/package/jpegtran-bin默认

（2）针对网络图片

在智能小程序项目中，除了小程序的 icon，基本都会部署到 CDN 上。对于这样的网络图片，也需要进行压缩。下面列出一些优化的思路：

  • 通过 CDN 静态资源服务器获取图片资源，并添加图片压缩规则。
  • 使用如上节提起的工具对图片进行压缩后，再上传至 CDN。

第二步：开启图片懒加载

可以使用懒加载优化小程序。智能小程序的image组件提供了lazy-load属性，可以开启图片的懒加载功能：

  1. <image lazy-load="true"/>

第三步：谨慎使用耗费性能的属性

image组件mode属性提供了 13 种模式，其中widthFix模式是其中一种，作用是保持图片宽度不变，高度自动变化，并保持宽高比不变。由于widthFix模式需要动态计算图片的宽度，导致页面的重绘，因此应谨慎使用mode属性的widthFix模式。

第四步：使用渐进式 JPEG 来优化用户体验

在打开渐进式 JPEG 时会先展示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下，可以预览到图片的轮廓，一定程度上可以提升用户体验。

第五步：利用体验评分工具检测图片问题

利用开发者工具提供的体验评分工具（Audits），开发者可以识别和检测影响智能小程序性能、体验的图片问题。
具体使用方法，详见体验评分工具说明。

优化实例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  1.   <!--优化前-->  
  2.   <image src = "../imgUnZip.jpg" class="image"/>
  3.   <!--优化后--> 
  4.   <image lazy-load="true" src = "../imgZip.jpg" class="image"/>

从下图可以明显的看出，优化后的图片更快的渲染到屏幕上。

图片优化前 图片很重要 - 图1

图片优化后 图片很重要 - 图2

以上是在极端测试条件下的结果，在实际使用中效果可能相对不明显。