How to optimize when there are a large number of pictures on H5 page

problem description

A mobile page whose main content is displayed through images. It takes time to load for the first time. The first screen image is about 300k.

the environmental background of the problems and what methods you have tried

1. Lazy loading, currently using the way of window.onload, delayed loading of pictures. Because the page has navigation components, need to quickly locate to the specified location, rolling lazy loading tried, the effect is not ideal, was rejected by visual students;
2. Compression, all the pictures have been compressed through the tool, but the mention is still around 2MB, and then the pressure is estimated to be pasted. no, no, no.

if there are any bosses who have similar experience, ask for advice.

Javascript html css
Jan.01,2022

usually do this and summarize the following points:

  1. Compression: compression is certain, but I don't know how you compress it. 2m images are horrible. tinypng try to see if there is any better compression.
  2. CDN: spends some money on CDN , such as Qiniu, and there is still a little free space
    3. .
  3. load pictures at screen resolution? @ 1x figure, @ 2x figure
  4. lazy loading: load again when you enter the visual range, and you need to quickly locate to the specified location, so add a scroll animation to delay the time for the user to arrive at the specified image, and take advantage of the opportunity to load
    5. .
  5. increase bandwidth: increase server bandwidth

as above, these are the usual summary points, some of which may be superimposed, such as compression , CDN , and some points are mutually exclusive, such as CDN , server bandwidth . As for your case, first try Compression , CDN , increase bandwidth as well as CDN , @ x figure can be achieved with CDN predefined styles.

so CDN Saigao, CDN is sometimes not called by this name, sometimes it is called OSS , Qiniu, Aliyun, Tencent Cloud basically provide this function, our company put the entire static site on CDN , the speed is touching.

Previous: Find a vscode plug-in with screenshots

Next: Django request.session returns the json object after assigning a value. Why does the background not report an error but the front end cannot receive it?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3796a-2c0b4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3796a-2c0b4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?