When multiple instances of same images are embedded in an HTML, does that load the image once?

Browsers that implement 5th version of HTML specification may reuse images regardless of cache related HTTP headers. Probably only single network request will occur.

Specification defines image key.

7.2 Let key be a tuple consisting of the resulting absolute URL, the img element’s crossorigin attribute’s mode, and, if that mode is not No CORS, the Document object’s origin.

When browser downloads first image source it adds it to list of available images using key.

If the download was successful and the user agent was able to determine the image’s width and height

  1. Set the img element to the completely available state.
  2. Add the image to the list of available images using the key key.

When browser sees another image with same key it will take it from a list of available images.

7.3 If the list of available images contains an entry for key, then set the img element to the completely available state, update the presentation of the image appropriately, queue a task to fire a simple event named load at the img element, and abort these steps.

Nevertheless, browser may remove image from list of available images at any time.

Each Document object must have a list of available images. Each image in this list is identified by a tuple consisting of an absolute URL, a CORS settings attribute mode, and, if the mode is not No CORS, an origin. User agents may copy entries from one Document object’s list of available images to another at any time (e.g. when the Document is created, user agents can add to it all the images that are loaded in other Documents), but must not change the keys of entries copied in this way when doing so. User agents may also remove images from such lists at any time (e.g. to save memory).

For more information see How does a list of available images used when parsing document with multiple img nodes with same src? issue in HTML Standard repository on GitHub.

Leave a Comment