Suggest an edit

Improve this article

Refine the answer for “How does the browser load an image specified in src?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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:

```html
<img src="photo.jpg" alt="Nature photo">
```

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:

```javascript
Current page: https://mysite.com/gallery/page.html
src="img/photo.jpg"
→ Loads: https://mysite.com/gallery/img/photo.jpg
```

---

### 3. Sending the HTTP request

The browser sends a **separate network request**:

```javascript
GET /gallery/img/photo.jpg HTTP/1.1
Host: mysite.com
```

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

---

### 4. Receiving and decoding the image

The server returns a response, for example:

```javascript
Content-Type: image/jpeg
Content-Length: 51234
```

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:

```html
<img src="wrong-path.jpg" alt="Photo unavailable">
```

---

### 7. Optimization (lazy loading)

If specified:

```html
<img src="big-photo.jpg" loading="lazy">
```

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):

| Stage | What the browser does |
|---|---|
| 1 | Finds `<img>` while reading the HTML |
| 2 | Reads `src`, determines the path |
| 3 | Sends an HTTP request for the file |
| 4 | Receives and decodes the image |
| 5 | Renders it in the layout |
| 6 | Shows `alt` on error |
| 7 | (optionally) defers loading with `loading="lazy"` |

---

**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`.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts505 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.