How to solve the problem that the website is loaded slowly because of the picture too much?

Picture too large to load slowly? Rather than a picture that's too slow to load?

The first thing to do is to compress as much as possible to see how much users endure. JPG can be compressed in many ways, PNG recommends using Tinypng

Tool (But the body picture, obviously to choose JPG format).

And then

1, less "care" user experience of the easy way:

The images are saved incrementally, and the load becomes clearer instead of loading from top to bottom, then placing them in the CDN, setting up the cache, and so on.

2, compare the "care" user experience of high-end solutions:

Determine the user's device (mainly used in mobile), network, etc., loading different quality pictures (such as high-end iPhone WiFi case, you can load double high-definition graphics, etc., under the cellular network, loading a single-fold or lossy compression).

Or the first load of low-quality pictures, so that viewers can see, and then in the background load more HD, and so loaded, the viewer is still watching, insert replacement.

or load the low-quality small picture list first, then let the user click, trigger a similar fancybox effect, pop-up window appears large picture.

Or take advantage of resource preloading (three HTML5 Uncommon features introduction) when the user is not open, start loading.

How to solve the problem that the website is loaded slowly because of the picture too much?