What will be the impact if the picture on the website is too large?

The following pictures, such as png, jpg, gif, etc., are unavoidable in the

website.

when doing performance optimization, the image is usually made into a sprite image to reduce http requests, and the size of the image is reduced as much as possible to reduce load time.

so is there any other impact that too many and too large pictures will have other effects besides prolonging the loading time and causing a bad user experience? For example, what will be the impact on the server, and so on.

and what is the most appropriate range for the number and size of pictures on a page to be kept under normal circumstances?

Javascript img performance-optimization

Aug.09,2021

large or more pictures will make users wait longer, there is no standard that the number and size of pictures in the page should be kept in what range, everything should be based on the user's waiting time as the standard, as long as you can open the page in a faster time, there is no problem, generally you can think that more than 3 seconds, it needs to be optimized.

you can load several larger images, then open the console, adjust the network to 3G, and CPU to 4x slow down.

then refresh the page.

you might know.

"supplement

many articles also recommend using the lossy webp format, which will be much smaller. But IOS never supports this format, but it doesn't matter, at least we have optimized a large number of users, haven't we?

when it comes to keeping the image size, our project suggests that it should be less than 50k. But only as far as possible, very often it is very difficult to control.

Previous: How to get histogram color by echarts

Next: How to write onEnter in react-router?