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]
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.
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.
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 URL
Perform 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.
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
.
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 = 'wifi' } = 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, '5g': 85, '4g': 80, '3g': 60, '2g': 60, }; /** * 获取图片质量 */ export const getImageQuality = () => ImageQuality[getApp().globalData.networkType ?? 'wifi'];
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 WebP
lossless images is 26%
, WebP
lossy images have 25-34%
fewer bytes than similar JPG
images. 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 supportSVG, GIF
conversion to
WebP, no processing is done
Number of pictures | Does not support WebP | Supports WebP | |
---|---|---|---|
10 | 523K | (77% reduction) 315K | (86% reduction)
|
100 | 69M | (Reduced by 72%) 38M | (Reduced by 84%)
|