A page with too many images will load quite slowly, especially if the server has insufficient bandwidth.
There are thousands of ways to optimize image loading on web pages.
In addition to using advanced methods such as cdn acceleration, lazy loading, preview image loading, etc., the simplest and most rude way is to use other formats instead, or directly compress.
Or, if you can't use pictures, try to use vector graphics or CSS styles instead.
For a 1920x479 image. Comparison before and after compression:
Before compression (partial, 937KB):
After compression (partial, 365KB):
The difference in image quality of ordinary monitors is very small. It is suitable for ordinary websites.
Here is the measured data:
Server 1M bandwidth, client 20M bandwidth, Google Chrome.
Without cache (refresh each page with ctrl+F5)
Before optimizing the image
Home page loading speed: 55.56s
About page: 20.36
Service page: 23.05s
Case page: 18.82s
Contact us page: 9.94s
The effect of changing the image size to webp format without changing the image size, lossy compression, quality 20%
Home page loading speed: 9.3s
About page: 4.7s
Service page: 3.9s
Case page: 3.08s
Contact us page: 2.61s
The image size is not changed, the effect after all compression
Home Page: 8.86s 14.57s 14.57s 14.39s
About Page: 5.57s 5.13s 4.97s
Service Page: 4.25s 4.28s 4.17s
Case Page: 4.33s 4.45s
Contact Us Page: 2.95s 3.63s 3.10s
As you can see, optimizing images plays a crucial role in page loading.
It is recommended to use the compression method. The webp format has a huge loophole in compatibility. Although webpjs can be introduced for optimization, most browsers still cannot support it well.