How does the browser load an image specified in src?

When the browser encounters an <img> element in HTML, it performs a clear sequence of actions to load and display the image.

This process breaks down into the following steps:

---

#1. Detecting the <img> tag

While parsing HTML, the browser encounters a line like:

It adds an image node to the DOM (element tree) and immediately starts loading the resource specified in src.

---

#2. Determining the file path (src)

The browser:

• checks what is specified in the src attribute;
• if it is a relative path (for example, images/pic.jpg), it combines it with the address of the current page;
• if it is an absolute URL (for example, https://site.com/pic.jpg), it makes a request to that address right away.

Example:

---

#3. Sending the HTTP request

The browser sends a separate network request:

This request runs in parallel with others (CSS, JS, fonts, etc.).

---

#4. Receiving and decoding the image

The server returns a response, for example:

Then the browser:

• loads the image bytes;
• decodes them into pixel data (depending on the format: JPG, PNG, WEBP, etc.);
• stores it in the cache so it does not need to be loaded again on a repeat request.

---

#5. Rendering the image on the page

As soon as the image is loaded:

1. The browser knows its dimensions (width and height).
2. It recalculates the page layout.
3. It renders the image at the correct position.

If the picture is not yet loaded, the browser reserves space for it (if width and height are specified) or temporarily shows a "blank" area.

---

#6. If loading fails

If:

• the file is not found (404),
• a network error occurred,
• or the format is not supported,

then the browser:

• shows the alternative text (alt), if it is set;
• or simply blank space / a "broken image" icon.

Example:

---

#7. Optimization (lazy loading)

If specified:

The browser will defer loading until the image appears within the visible area of the screen. This saves bandwidth and speeds up page rendering.

---

#Summary (brief):

---

In simple terms: the browser sees <img src="...">, immediately requests the picture over the network, unpacks it, and draws it on the screen. If the file is not found, it shows the text from alt.