It has come to my mind, imagine you have a 2x2 grid container with each grid item as a div. Now you will use one image e.g., only the top-left fraction of the image for the first div, top-right for the second div. Does it the same as loading the image four times from the source? Does loading a fraction take less time?

CodePudding user response：

No. Either the entire image is loaded, or it is not loaded at all. There is no way in the HTTP specification to request only a portion of an image.

However, if you use (a part of) the image in multiple places on the page, the image gets loaded only once.