# Resource load optimization

# 1. Control the size of the picture resource

Developers should choose the appropriate picture size, picture format and compression ratio based on the functionality needs and the size of the actual display area.

The size of the picture may lead to the following consequences

• Increases the download time of images, resulting in a delay in the viewing of images by users;
• Causes unnecessary traffic consumption to users;
• Impacting the time spent on image decoding and drawing may make it easier to cause frames, pauses or white screens, or even the inability to scroll and switch pages properly (this is particularly evident on low-end devices);
• Memory usage increases, especially when large images and large numbers of images in long lists can lead to a sharp increase in memory usage.

The effect of pictures on memory

When iOS system memory is tight, it will actively recycle a part of WebView.Large images and a large number of images in a long list can easily cause the system to recycle WebView, resulting in Weixin Mini Program white screen, and in severe cases will trigger WeChat to force the closure of the Mini Program.

If memory growth exceeds the limit, it will also cause Weixin Mini Program to appear white or black screen, or even the entire Mini Program to flash back.

# 2. Avoid abuse of widthFix / heightFix mode of image component

WidthFix / heightFix mode dynamically changes the height or width of the image after the image is loaded. A dynamic change in the height or width of a picture may cause a wide range of layout rearrangements within the page, causing the page to shake and causing a tumble.

For the backview or banner of the page, the size of the picture should be specified in advance as much as possible to avoid the size adjustment of the second time after the picture is loaded.