Page image reading problem_html/css_WEB-ITnose

Excuse me, is there such a design? The design size of the image on the page is 1440*930 pixels.
So, for such a large picture, should I cut it into one big picture or several small pictures? Which page will read faster?
The best answer is please explain the reason, thank you!

Reply to discussion (solution)

Several small pictures

The whole picture takes a long time to load and then display. In this case, each time several small pictures are loaded, one will be displayed.

Several small pictures
It takes a long time for the whole picture to be loaded and then displayed. In this case, several small pictures will be displayed every time one is loaded.
But as you said, if there are several small pictures, the number of requests to the server will increase.
For a large picture, you only need to request the server once.

The big picture is not very good. It takes a long time to load the big picture, which makes the user wait for a long time. The user experience is not good. Quote from the 1st floor’s reply:
Several small pictures
The whole picture needs It takes a long time to load and then display. In this case, several small pictures will be displayed every time one is loaded.

But as you said, if there are several small pictures, the number of requests to the server will increase.
For a large picture, you only need to request the server once.

Of course a large image is faster. Otherwise, what does css splitter technology do?
See google logo
https://www.google.com.hk/images/nav_logo107.png

Of course, if a large image is too big, it will take a long time for users to see it. The full picture is indeed not a user-friendly experience.
In this case, you can add a loading... effect,
or load a thumbnail of the small picture for display first, and at the same time prompt that the large picture is loading. After the large image is loaded, hide the small image and display the large image
Example

 <img  src="/static/imghwm/default1.png"  data-src="large.jpg"  class="lazy"   id="smallimg"  / alt="Page image reading problem_html/css_WEB-ITnose" > <img  src="/static/imghwm/default1.png"  data-src="large.jpg"  class="lazy"  id="largeimg"     style="max-width:90%" onload="showlarge()" / alt="Page image reading problem_html/css_WEB-ITnose" >  </div>    <script type="text/javascript" >      function showlarge() {         // alert("large ok");          document.getElementById("smallimg").style.display = "none";          document.getElementById("largeimg").style.display = "block";            }  </script>

http://www.mysqlops.com/2011/09/09/weibo-web- css.html
I suggest you read this article