A picture on the website loads too slowly, which affects the user's experience. How should I make this picture load faster?

address of the web page

http://www.xinlizhiyouni.com/.

this picture is too slow to load, what should be the problem?

<figure class="mr20">
    <img src="images/me.jpg" class="meImage" alt="Image">
</figure>

Html css3 javascript

Aug.18,2021

use this to compress

separate image services to encode resources and improve transmission speed. This is from the point of view of speeding up the request for resources, but the front end is often a hat trick. If it is not a first screen resource, you can preload

A better way to compress a picture will damage the quality
lazy load, initially give a small load indication figure
it seems that browsers don't support apng, very well

the whole page capacity is actually not very large (the test result here is the total page capacity 869 KB ). If your server bandwidth is relatively low, you can consider that all static resources are accelerated by CDN. The price is much cheaper than your server bandwidth fee. Separate movement and activity, and host all static resources to CDN acceleration.

in addition, the image capacity of your http://www.xinlizhiyouni.com/myself/bible/images/me.jpg has reached 375KB , accounting for more than 40% of the total page capacity . Consider compression. Tinypng.com, know something about it?

A web page with more than 800k takes more than 30 seconds to finish,. I think it's a bandwidth problem. Put this picture on CDN

Common reasons:

the picture file is too large;
maybe the bandwidth of the image server is not enough, so you need to check it.
may not have a good network with the server, for example, your server is located in US, HK, etc.
client network condition is worrying;

solution:

for the first point, you can compress the picture, for example, do not use png, to compress the image to jpg, etc., so as to reduce the image size;
for points 2 and 3, you can use file storage services, such as Ali Cloud OSS, Qiniuyun, and so on. Plus the effect of CDN, should be good. The disadvantage is that the fee is charged.
Point 4, the hotel has a free WiFi (you're welcome)

to improve the image loading speed, you can consider pulling the image out of a separate server, and then compressing it (although the quality of the compressed image will be reduced, but for ordinary people, it is impossible to see as long as the proportion is not very large). Secondly, you can also convert the format, such as webp. If it is true that the picture is very large and all the methods mentioned above have been used, then you should consider adding loading animation. After all, resources have to be loaded, which is a hard wound in the extreme case of the user's network.

the simplest and most effective way: compress picture resources.

Previous: The echarts legend does not display when Vue switches the second tab page

Next: Cannot get the duration of video in vue