미니 프로그램에서 이미지를 최적화하는 방법에 대해 심도 있게 이야기해 보겠습니다.

이 기사에서는 미니 프로그램의 실제 적용 방법을 공유하여 미니 프로그램에서 이미지를 최적화하는 방법을 알아보겠습니다. 모두에게 도움이 되기를 바랍니다.

프런트엔드 성능 최적화와 이미지 최적화는 필수적이고 중요한 링크입니다. 이미지 렌더링은 대부분의 웹사이트 페이지 구성에 없어서는 안 될 요소입니다. 특히 전자상거래 프로젝트에는 배너 광고 사진, 메뉴 탐색 사진, 제품 목록 사진 등과 같은 많은 수의 사진이 있는 경우가 많습니다. 많은 수의 이미지를 로드하고 이미지 크기가 너무 크면 페이지 로딩 속도에 영향을 미쳐 사용자 경험이 저하되는 경우가 많습니다. [관련 학습 추천 : 미니 프로그램 개발 튜토리얼]

최적화 솔루션

위의 문제를 바탕으로 가장 큰 문제는 사진의 수와 사진의 크기이므로 사진 로딩 속도와 사진의 속도를 향상시키는 방법은 무엇입니까? 사용자 경험을 향상시킵니다. 실제로 이미지 최적화를 위한 훌륭한 솔루션이 많이 있으며 우리는 모두 그로부터 배울 수 있습니다. 마지막으로 이미지를 전체적으로 다양한 방향으로 최적화합니다.

적절한 이미지 형식 사용

현재 널리 사용되는 웹 이미지 형식에는 JPEG/JPG, PNG, GIF, WebP, Base64, SVG 등이 있습니다. 이러한 형식에는 고유한 특성이 있습니다. :

적절한 이미지 형식을 사용하면 일반적으로 이미지 바이트 크기가 작아질 수 있으며, 적절한 압축률을 사용하면 이미지 품질에 영향을 주지 않고 이미지 크기를 줄일 수 있습니다.

네트워크 전송 감소

애플릿은 이미지 크기 조정, 이미지 품질 저하, 형식 변환, 이미지 자르기, 이미지 반올림과 같은 다양한 이미지 처리 기능을 제공하는 Tencent Cloud Image Server를 사용합니다. 등 기능. 이러한 기능은 이미지 URL에 지정된 매개변수를 추가하여 수행할 수 있으며, 이미지 서버는 매개변수 설정에 따라 이미지를 미리 처리한 후 CDN 서버에 저장합니다. 이는 이미지 전송 크기를 크게 줄입니다. 图片缩放、图片降质，格式转换，图片裁剪、图片圆角等功能。这些功能可以通过在图片URL中添加规定参数就能实现，图片服务器会根据参数设置提前将图片处理完成并保存到CDN服务器，这样大大的减少图片传输大小。

目前后台接口下发返回的图片 URL 都是未设置图片参数预处理，比如一张 800x800 尺寸高清的商品图，体积大概300k 左右，这样就很容易导致图片加载和渲染慢、用户流量消耗大，严重影响了用户体验。所以我们结合腾讯云的图片处理功能，网络图片加载前，先检测是否是腾讯云域名的图片URL，如果域名匹配，对图片URL进行预处理，预处理包括添加缩放参数，添加降质参数，添加WebP参数的方式减少图片网络传输大小

我们先看一张通过图片服务器是腾讯云图片处理能力，通过设置图片缩放/降质/WebP，一张尺寸800x800，体积246KB图片，最后输出生成25.6KB，图片体积足足减少了80%，效果显著。

图片缩放

目前业务后台都是原图上传，原始图尺寸可能比客户端实际显示的尺寸要大，一方面导致图片加载慢，另一方面导致用户流量的浪费，其中如果是一张很大尺寸图片加载也会影响渲染性能，会让用户感觉卡顿，影响用户体验。通过添加缩放参数的方式，指定图片服务器下发更小和更匹配实际显示size的图片尺寸。

图片降质

图片服务器支持图片质量，取值范围 0-100，默认值为原图质量，通过降低图片质量可以减少图片大小，但是质量降低太多也会影响图片的显示效果，网络默认降图片质量参数设置为85，同时通过小程序提供的：wx.getNetworkType、wx.onNetworkStatusChange、offNetworkStatusChange的接口监听网络状态变化来获取当前用户的网络类型networkType，比如用户当前使用的4G网络，则图片质量会动态设置为80，对于大部分业务情况，一方面可以大幅减少图片下载大小和保证用户使用体验，另一方面节省用户浏览 ，目前添加图片降质参数至少可以减少30-40%

현재 백엔드 인터페이스에서 반환된 이미지 URL은 모두 이미지 매개변수 전처리가 없습니다. 예를 들어 800x800 크기의 고화질 제품 이미지의 용량은 약 300k입니다. , 따라서 이로 인해 이미지 로딩 및 렌더링 속도가 느려지고 사용자 트래픽 소비가 많아지며 사용자 경험에 심각한 영향을 미칠 수 있습니다. 따라서 Tencent Cloud의 이미지 처리 기능을 결합하여 네트워크 이미지를 로드하기 전에 먼저 Tencent Cloud 도메인 이름의 이미지 URL인지 여부를 감지합니다. code>가 일치하면 이미지 URL 가 크기 조정 매개변수 추가, 성능 저하 매개변수 추가 및 WebP 매개변수 추가를 포함하는 사전 처리를 수행합니다. code>를 사용하여 이미지 네트워크 전송 크기를 줄입니다. 🎜🎜 먼저 사진 서버를 통해 Tencent Cloud의 사진 처리 기능을 사용하는 사진을 살펴보겠습니다. 사진 크기 조정/저하/WebP를 설정하면 사진 크기가 <code>800x800 및 <code>246KB 볼륨, 최종 출력은 25.6KB, 이미지 크기는 80% 감소하고 효과는 다음과 같습니다. 놀랄 만한. 🎜🎜🎜

🎜이미지 크기 조정🎜

🎜현재 비즈니스 백엔드는 원본 이미지를 업로드하며, 한편으로는 원본 이미지 크기가 클라이언트에 표시되는 실제 크기보다 클 수 있습니다. 이미지 로딩이 느리고, 한편으로는 원본 이미지가 업로드되어 사용자 트래픽이 낭비되기도 합니다. 사용자는 정체감을 느끼고 사용자 경험에 영향을 미칩니다. 크기 조정 매개변수를 추가하여 이미지 서버가 더 작고 실제 디스플레이 크기와 더 일관된 이미지 크기를 제공하도록 지정합니다. 🎜

🎜사진 품질 저하🎜

🎜사진 서버는 사진 품질을 지원하며 값 범위는 0-100이며 기본값은 원본입니다. 화질, 이미지 품질을 줄여 이미지 크기를 줄일 수 있지만, 품질을 너무 많이 낮추면 이미지의 표시 효과에도 영향을 미칩니다. 기본 네트워크 이미지 품질 감소 매개변수는 85로 설정되어 있습니다. 미니 프로그램을 통해 제공됩니다: wx .getNetworkType, wx.onNetworkStatusChange 및 offNetworkStatusChange의 인터페이스는 네트워크 상태 변경을 모니터링하여 현재 상태를 가져옵니다. 사용자의 네트워크 유형 networkType(예: user) 현재 사용되는 4G 네트워크의 경우 이미지 품질은 대부분의 비즈니스 상황에서 동적으로 80으로 설정됩니다. , 한편으로는 이미지 다운로드 크기를 크게 줄이고 사용자 경험을 보장할 수 있으며, 다른 한편으로는 이미지 다운로드 크기를 크게 줄이고 사용자 경험을 보장할 수 있습니다. 한편으로는 사용자 탐색 시간을 절약할 수 있습니다. 현재 이미지 저하 매개변수를 추가하면 이미지 크기를 최소한 30-40% 줄일 수 있습니다. 🎜

/**
 * 设置网络情况
 */
const setNetwork = (res: Record<string, any>) => {
  const { isConnected = true, networkType = &#39;wifi&#39; } = res;

  this.globalData.isConnected = isConnected;
  this.globalData.networkType = networkType.toLowerCase();
  this.events.emit(EventsEnum.UPDATE_NETWORK, networkType);
};

wx.getNetworkType({ success: (res) => setNetwork(res) });
wx.offNetworkStatusChange((res) => setNetwork(res));
wx.onNetworkStatusChange((res) => setNetwork(res));

/**
 * 根据网络环境设置不同质量图片
 */
const ImageQuality: Record<string, number> = {
  wifi: 85,
  &#39;5g&#39;: 85,
  &#39;4g&#39;: 80,
  &#39;3g&#39;: 60,
  &#39;2g&#39;: 60,
};

/**
 * 获取图片质量
 */
export const getImageQuality = () => ImageQuality[getApp().globalData.networkType ?? &#39;wifi&#39;];

WebP 사용

다양한 이미지 형식에는 고유한 장점, 단점 및 사용 시나리오가 있습니다. WebP 이미지 형식은 손실 압축 및 무손실 압축 이미지 형식을 제공합니다. Google 공식 데이터에 따르면 PNG와 비교하여 WebP 무손실 이미지는 바이트가 26% 적습니다, WebP 손실이 있는 이미지는 유사한 JPG 이미지보다 바이트가 25-34% 적습니다. 요즘은 타오바오(Taobao), 징동닷컴(JD.com), 메이투안(Meituan) 등 주요 인터넷 기업의 제품을 사용하고 있다.

WebP 图片格式提供有损压缩与无损压缩的图片格式。按照Google官方的数据，与PNG相比，WebP无损图像的字节数要少26％，WebP有损图像比同类JPG图像字节数少25-34％。现如今各大互联网公司的产品都已经使用了，如淘宝、京东和美团等。

这里放一个 WebP 示例链接（GIF、PNG、JPG 转 Webp），直观感受 WebP 在图片大小上的优势。

在移动端中 WebP的兼容性，大部分数用户都已经支持了 Can I use... Support tables for HTML5, CSS3, etc，

针对png/jpg图片格式，自动添加WebP参数，转成WebP图片格式。虽然WebP相比png/jpg图片解码可能需要更长时间，但相对网络传输速度提升还是很大。目前 ios 13系统版本有不少用户量的占比，小程序端获取当前系统版本，降级处理不添加WebP参数。

// 检查是否支持webp格式
const checkSupportWebp = () => {
  const { system } = wx.getSystemInfoSync();
  const [platform, version] = system.split(' ');

  if (platform.toLocaleUpperCase() === PlatformEnum.IOS) {
    return Number(version.split('.')[0]) > IOS_VERSION_13;
  }

  return true; // 默认支持webp格式
};

提示：由于目前图片服务器并不支持、SVG、GIF转WebP，并没有做处理

优化效果

测试我们小程序首页列表接口加载图片，来对比优化前后的效果

WebP 샘플 링크(GIF, PNG, JPG to Webp), WebP의 장점을 이미지 크기에서 직관적으로 느껴보세요.

优化前	图片数	不支持 WebP	支持 WebP
2300K	10	523K (降低 77%+)	315K (降低 86%+)
248M	100	69M (降低 72%+)	38M (降低 84%+)여기에 하나 넣어주세요

모바일 단말기에서의 WebP 호환성에서는 이미 대부분의 사용자가 지원하고 있습니다사용할 수 있나요... HTML5, CSS3 등의 지원 테이블,

🎜

🎜 png/jpg 이미지 형식의 경우 WebP 매개변수를 자동으로 추가하고 WebP 이미지 형식으로 변환합니다. WebP는 png/jpg 이미지보다 디코딩하는 데 시간이 더 오래 걸릴 수 있지만 상대적인 네트워크 전송 속도는 여전히 크게 향상됩니다. 현재 ios 13 시스템 버전은 많은 사용자를 차지하고 있으며, 애플릿은 현재 시스템 버전을 가져오며 다운그레이드 처리를 위해 WebP 매개변수를 추가하지 않습니다.

import IntersectionObserver from 'utils/observer/observer';

const ob = new IntersectionObserver({
  selector: '.goods-item', // 指定监听的目标节点元素
  observeAll: true, // 是否同时观测多个目标节点
  context: this, // 小程序 this 对象实例
  delay: 200, // 调用 onFinal 方法的间隔时间，默认 200ms
  onEach: ({ dataset }) => {
    // 每一次触发监听调用时，触发 onEach 方法，可以对数据进行一些过滤处理
    const { key } = dataset || {};
    return key;
  },
  onFinal: (data) => {
    // 在触发监听调用一段时间 delay 后，会调用一次 onFinal 方法，可以进行埋点上报
    if (!data) return;
    console.log('module view data', data);
  },
});

// 内置函数方法，如下：
ob.connect(); // 开始监听
ob.disconnect(); // 停止监听
ob.reconnect(); // 重置监听

🎜팁: 현재 이미지 서버는 SVG, GIF를 WebP로 변환하는 것을 지원하지 않으므로 처리가 수행되지 않습니다

🎜최적화 효과🎜

🎜미니 프로그램 홈페이지의 목록 인터페이스에서 이미지 로딩을 테스트하여 최적화 전과 후의 효과를 비교해보세요

< table>최적화 전사진 개수 WebP를 지원하지 않음< th align="left">WebP 지원🎜2300K🎜10🎜523K(77%+ 감소)🎜315K (86%+ 감소) 🎜🎜248M🎜100🎜69M (72%+ 감소)🎜3,800만 (84%+ 감소)🎜🎜🎜🎜

经过我们通过使用腾讯云图片服务器的图片处理功能，以及动态处理图片格式的方式，减少图片体积，提高图片加载速度，带来的收益比非常可观的

图片懒加载

懒加载是一种性能优化的方式，将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载，对于页面加载性能上会有很大的提升，也提高了用户体验。

实现原理

使用小程序提供Intersection Observer API，监听某些节点是否可以被用户看见、有多大比例可以被用户看见。这样我们就能判断图片元素是否在可是范围中，进行图片加载。

我们基于小程序的Intersection Observer API，封装一个监听模块曝光 IntersectionObserver函数工具，提供以下用法

import IntersectionObserver from 'utils/observer/observer';

const ob = new IntersectionObserver({
  selector: '.goods-item', // 指定监听的目标节点元素
  observeAll: true, // 是否同时观测多个目标节点
  context: this, // 小程序 this 对象实例
  delay: 200, // 调用 onFinal 方法的间隔时间，默认 200ms
  onEach: ({ dataset }) => {
    // 每一次触发监听调用时，触发 onEach 方法，可以对数据进行一些过滤处理
    const { key } = dataset || {};
    return key;
  },
  onFinal: (data) => {
    // 在触发监听调用一段时间 delay 后，会调用一次 onFinal 方法，可以进行埋点上报
    if (!data) return;
    console.log('module view data', data);
  },
});

// 内置函数方法，如下：
ob.connect(); // 开始监听
ob.disconnect(); // 停止监听
ob.reconnect(); // 重置监听

然后在我们的FreeImage图片组件，添加可视区域加载图片的功能，以下是部分代码

import IntersectionObserver from 'utils/observer';

Component({
  properties: {
    src: String,
    /**
     * 是否开启可视区域加载图片
     */
    observer: {
      type: Boolean,
      value: false,
    },
    ....
  },

  data: {
    isObserver: false,
    ...
  },

  lifetimes: {
    attached() {
      // 开启可视区域加载图片
      if (this.data.observer) {
        this.createObserver();
      }
    },
  },
  methods: {
    ...

    /**
     * 监听图片是否进入可视区域
     */
    createObserver() {
      const ob = new IntersectionObserver({
        selector: '.free-image',
        observeAll: true,
        context: this,
        onFinal: (data = []) => {
          data.forEach((item: any) => {
            this.setData({
              isObserver: true,
            });
            ob.disconnect(); // 取消监听
          });
        },
      });

      ob.connect(); // 开始监听
    }
  }
})

<free-image observer  />

优化效果

测试我们小程序首页列表，使用图片懒加载的效果

通过使用图片懒加载的功能，减少图片数量的加载，有效提高页面加载性能。在上述我们已经对图片体积进行优化过，所以在我们小程序中，只有在网络情况较差的情况下，才会自动开启图片懒加载功能。

优化请求数

我们项目中有很多本地图片资源，比如一些 icon 图标、标签类切图、背景图、图片按钮等。而小程序分包大小是有限制：整个小程序所有分包大小不超过 20M，而单个分包/主包大小不能超过 2M。所以为了减轻小程序体积，本地图片资源需要进行调整，比如图片压缩、上传到 CDN 服务器。这样能减少了小程序主包大小，而大部分图片都在腾讯云 CDN 服务器中，虽然可以加速资源的请求速度，当页面打开需要同时下载大量的图片的话，就会严重影响了用户的使用体验。

针对此问题，需要找到权衡点来实现来优化请求数，首先我们把图片资源进行分类，以及使用场景，最后确定我们方案如下：

• 较大体积的图片，选择上传到 CDN 服务器
• 单色图标使用 iconfont 字体图标，多彩图标则使用svg格式
• 标签类的图片，则生成雪碧图之后上传到 CDN 服务器
• 图片体积小于10KB，结合使用场景，则考虑base64 ，比如一张图片体积为3KB的背景图，由于小程序css background不支持本地图片引入，可以使用 base64 方式实现

其他策略

大图检测

实现大图检测机制，及时发现图片不符合规范的问题，当发现图片尺寸太大，不符合商品图尺寸标准时会进行上报。在小程序开发版/体验版中，当我们设置开启Debug模式，图片组件FreeImage会自动检测到大图片时，显示当前图片尺寸、以及设置图片高亮/翻转的方式提醒运营同学和设计同学进行处理

加载失败处理

使用腾讯云图片处理功能，URL预处理转换后得新 URL，可能会存在少量图片不存在的异常场景导致加载失败。遇到图片加载失败时，我们还是需要重新加载原始图片 URL, 之后会将错误图片 URL 上报到监控平台，方便之后调整 URL 预处理转换规则，同时也发现一部分错误的图片 URL 推动业务修改。

这是我们图片组件FreeImage 处理图片加载失败，以下是部分代码

onError(event: WechatMiniprogram.TouchEvent) {
  const { src, useCosImage } = this.data;

  this.setData({
    loading: false,
    error: true,
    lazy: 'error',
  });

  // 判断是否腾讯云服务的图片
  if (useCosImage) {
    wx.nextTick(() => {
      // 重新加载原生图片
      this.setData({
        formattedSrc: src, // src 是原图地址
      });
    });
  }

  // 上报图片加载失败
  app.aegis.report(AegisEnum.IMAGE_LOAD_FAIL, {
    src,
    errMsg: event?.detail.errMsg,
  });

  this.triggerEvent('error', event.detail);
}

图片请求数检查

使用小程序开发者工具的体验评分功能，体验评分是一项给小程序的体验好坏打分的功能，它会在小程序运行过程中实时检查，分析出一些可能导致体验不好的地方，并且定位出哪里有问题，以及给出一些优化建议。

通过体验评分的结果，可以分析我们存在短时间内发起太多的图片请求，以及存在图片太大而有效显示区域较小。所以根据分析的结果，开发需要合理控制数量，可考虑使用雪碧图技术、拆分域名或在屏幕外的图片使用懒加载等。

上传压缩

图片在上传前在保持可接受的清晰度范围内同时减少文件大小，进行合理压缩。现如今有很多不错的图片压缩插件工具，就不在详情介绍了。

推荐一个比较优秀的图片压缩网站：TinyPNG使用智能有损压缩技术将您的 WebP, PNG and JPEG 图片的文件大小降低

更多编程相关知识，请访问：编程入门！！

위 내용은 미니 프로그램에서 이미지를 최적화하는 방법에 대해 심도 있게 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!