Let's talk in depth about how to optimize images in mini programs

This article will share with you a practical application of a small program to see how to optimize images in the small program. I hope it will be helpful to everyone!

Front-end performance optimization and image optimization are indispensable and important links. The rendering of images is indispensable for the composition of most website pages. Especially in e-commerce projects, there are often a large number of pictures, such as banner advertising pictures, menu navigation pictures, product list pictures, etc. Loading a large number of images and excessively large image sizes often affect the page loading speed, resulting in a poor user experience. [Related learning recommendations: 小program development tutorial]

Optimization plan

The main problem based on the above problems is the number of pictures and the size of the pictures, so How to improve image loading speed and improve user experience. In fact, there are many excellent solutions for image optimization, and we can all learn from them. Finally, we optimize the image as a whole in different directions.

Use appropriate image formats

Currently widely used WEB image formats include JPEG/JPG, PNG, GIF, WebP, Base64, SVG, etc., these formats have their own characteristics. The following is a brief summary:

Using appropriate image formats can usually lead to smaller image byte sizes , through a reasonable compression rate, the image size can be reduced without affecting the image quality.

Reduce network transmission

The applet uses Tencent Cloud Image Server, which provides many image processing functions, such as image scaling, image reduction Quality, format conversion, image cropping, image rounding and other functions. These functions can be achieved by adding specified parameters to the image URL. The image server will process the image in advance according to the parameter settings and save it to the CDN server, which greatly reduces image transmission. size.

Currently, the image URLs returned by the background interface are all without setting the image parameter preprocessing. For example, a 800x800 size high-definition product image has a volume of about 300k. , which can easily lead to slow image loading and rendering, high user traffic consumption, and seriously affects the user experience. Therefore, we combine the image processing function of Tencent Cloud. Before loading the network image, we first detect whether it is the image URL of the Tencent Cloud domain name. If the domain name matches, the image URLPerform preprocessing, which includes Add scaling parameters, Add degradation parameters,Add WebP parameters to reduce image network transmission size

Let's first look at a picture that passes through the picture server and uses Tencent Cloud's picture processing capabilities. By setting the picture scaling/degradation/WebP, a picture with a size of 800x800 and a volume of 246KB is finally output and generated. 25.6KB, the image size is reduced by 80%, the effect is remarkable.

Image scaling

Currently, the business background uploads original images, and the original image size may be larger than the actual size displayed on the client. Large size will lead to slow image loading on the one hand, and waste of user traffic on the other. If a large-sized image is loaded, it will also affect the rendering performance, making the user feel stuck and affecting the user experience. By adding a scaling parameter, specify the image server to deliver an image size that is smaller and more consistent with the actual display size.

Picture degradation

The picture server supports picture quality, the value range is 0-100, the default value is the original picture quality, by reducing the picture Quality can reduce the image size, but too much quality reduction will also affect the display effect of the image. The network default image quality reduction parameter is set to 85, which is also provided through the mini program: wx.getNetworkType, wx.onNetworkStatusChange, offNetworkStatusChange interfaces monitor network status changes to obtain the current user's network type networkType, such as the 4G# currently used by the user ## network, the image quality will be dynamically set to 80. For most business situations, on the one hand, it can greatly reduce the image download size and ensure user experience, on the other hand, it saves users browsing. Currently, adding images reduces the Quality parameters can reduce the image size by at least 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;];

Using WebP

As mentioned above, different image formats have their own advantages, disadvantages and usage scenarios. Among them, WebP image format provides lossy compression and Lossless compressed image format. According to official data from Google, compared with PNG, the number of bytes of WebPlossless images is 26%, WebPlossy images have 25-34% fewer bytes than similar JPGimages. Nowadays, the products of major Internet companies have been used, such as Taobao, JD.com, and Meituan.

Put a WebP example link here (GIF, PNG, JPG to Webp), and intuitively feel the advantages of WebP in image size.

In the compatibility of WebP on the mobile terminal, most users have already supported itCan I use... Support tables for HTML5, CSS3, etc,

automatically adds WebP# for the png/jpg image format. ## Parameters, converted to WebP image format. Although WebP may take longer to decode than png/jpg, the relative network transmission speed is still greatly improved. Currently, the ios 13 system version has a large proportion of users. The applet obtains the current system version and does not add WebP parameters for downgrade processing.

// 检查是否支持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格式
};

Tips: Since the current image server does not support

SVG, GIF conversion to WebP, no processing is done

Optimization effect

Test the loading image of the list interface on the home page of our mini program to compare the effect before and after optimization

Before optimizationNumber of picturesDoes not support WebPSupports WebP##2300K (77% reduction)(86% reduction)248M(Reduced by 72%)(Reduced by 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 图片的文件大小降低

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

The above is the detailed content of Let's talk in depth about how to optimize images in mini programs. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Saving in R.E.P.O. Explained (And Save Files)

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

4 weeks ago By DDD

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7564

15

CakePHP Tutorial

1386

52

What is the format of the account name of steam

86

11

win11 activation key permanent

61

19

nyt connections hints and answers

28

99

Show More

Related knowledge

Develop WeChat applet using Python Jun 17, 2023 pm 06:34 PM

With the popularity of mobile Internet technology and smartphones, WeChat has become an indispensable application in people's lives. WeChat mini programs allow people to directly use mini programs to solve some simple needs without downloading and installing applications. This article will introduce how to use Python to develop WeChat applet. 1. Preparation Before using Python to develop WeChat applet, you need to install the relevant Python library. It is recommended to use the two libraries wxpy and itchat here. wxpy is a WeChat machine

Can small programs use react? Dec 29, 2022 am 11:06 AM

Mini programs can use react. How to use it: 1. Implement a renderer based on "react-reconciler" and generate a DSL; 2. Create a mini program component to parse and render DSL; 3. Install npm and execute the developer Build npm in the tool; 4. Introduce the package into your own page, and then use the API to complete the development.

Implement card flipping effects in WeChat mini programs Nov 21, 2023 am 10:55 AM

Implementing card flipping effects in WeChat mini programs In WeChat mini programs, implementing card flipping effects is a common animation effect that can improve user experience and the attractiveness of interface interactions. The following will introduce in detail how to implement the special effect of card flipping in the WeChat applet and provide relevant code examples. First, you need to define two card elements in the page layout file of the mini program, one for displaying the front content and one for displaying the back content. The specific sample code is as follows: <!--index.wxml-->&l

Alipay launched the 'Chinese Character Picking-Rare Characters' mini program to collect and supplement the rare character library Oct 31, 2023 pm 09:25 PM

According to news from this site on October 31, on May 27 this year, Ant Group announced the launch of the "Chinese Character Picking Project", and recently ushered in new progress: Alipay launched the "Chinese Character Picking-Uncommon Characters" mini program to collect collections from the society Rare characters supplement the rare character library and provide different input experiences for rare characters to help improve the rare character input method in Alipay. Currently, users can enter the "Uncommon Characters" applet by searching for keywords such as "Chinese character pick-up" and "rare characters". In the mini program, users can submit pictures of rare characters that have not been recognized and entered by the system. After confirmation, Alipay engineers will make additional entries into the font library. This website noticed that users can also experience the latest word-splitting input method in the mini program. This input method is designed for rare words with unclear pronunciation. User dismantling

How uniapp achieves rapid conversion between mini programs and H5 Oct 20, 2023 pm 02:12 PM

How uniapp can achieve rapid conversion between mini programs and H5 requires specific code examples. In recent years, with the development of the mobile Internet and the popularity of smartphones, mini programs and H5 have become indispensable application forms. As a cross-platform development framework, uniapp can quickly realize the conversion between small programs and H5 based on a set of codes, greatly improving development efficiency. This article will introduce how uniapp can achieve rapid conversion between mini programs and H5, and give specific code examples. 1. Introduction to uniapp unia

Tutorial on writing a simple chat program in Python May 08, 2023 pm 06:37 PM

Implementation idea: Establishing the server side of thread, so as to process the various functions of the chat room. The establishment of the x02 client is much simpler than the server. The function of the client is only to send and receive messages, and to enter specific characters according to specific rules. To achieve the use of different functions, therefore, on the client side, you only need to use two threads, one is dedicated to receiving messages, and the other is dedicated to sending messages. As for why not use one, that is because, only

How to operate mini program registration Sep 13, 2023 pm 04:36 PM

Mini program registration operation steps: 1. Prepare copies of personal ID cards, corporate business licenses, legal person ID cards and other filing materials; 2. Log in to the mini program management background; 3. Enter the mini program settings page; 4. Select " "Basic Settings"; 5. Fill in the filing information; 6. Upload the filing materials; 7. Submit the filing application; 8. Wait for the review results. If the filing is not passed, make modifications based on the reasons and resubmit the filing application; 9. The follow-up operations for the filing are Can.

How to optimize image scaling in Vue development Jul 01, 2023 am 11:01 AM

In Vue development, image scaling is a common requirement. When we display images on web pages, we may encounter image size mismatch problems. To solve this problem, we can take some optimization measures. First, we can use the object-fit property of CSS to control how the image is scaled. object-fit has several value options, such as fill, contain, cover, etc. By setting different values, we can achieve effects such as tiling and proportional scaling of images. example

See all articles

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved

10	523K	315K
100	69M	38M