Suggest an edit

Improve this article

Refine the answer for “What does the <img> element do in HTML?”. 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)

The `<img>` element is used to **insert an image** into a web page.
It has no closing tag and loads the picture via a link from the internet or from the site's files.

---

### 1. Simplest example

```html
<img src="cat.jpg" alt="Cat on the windowsill">
```

What's happening here:

- `src` - the path to the image file (short for "source");
- `alt` - alternative text shown if the image fails to load (or read aloud by a screen reader).

The browser will load and display the file `cat.jpg` right on the page.

---

### 2. Main attributes of `<img>`

| Attribute | Purpose | Example |
|---|---|---|
| `src` | Path to the image (required) | `src="images/photo.png"` |
| `alt` | Description text shown if the image does not display | `alt="Profile photo"` |
| `width` | Image width (in pixels or %) | `width="200"` |
| `height` | Image height | `height="150"` |
| `title` | Tooltip shown on hover | `title="Click to enlarge"` |
| `loading` | Loading optimization (`lazy`, `eager`) | `loading="lazy"` |

---

### 3. Image paths

#### Relative path (if the file is in the project folder):

```html
<img src="img/pic.jpg" alt="Photo">
```

#### Absolute path (if the picture is from another site):

```html
<img src="https://example.com/image.jpg" alt="Photo">
```

---

### 4. Example with dimensions and description

```html
<img src="mountains.jpg" alt="Mountains at dawn" width="400" height="250">
```

The image will be displayed at the specified dimensions (400x250 pixels).

---

### 5. The `alt` attribute: why it matters

- displayed if the picture fails to load;
- used by search engines (SEO);
- helps people with visual impairments (screen readers read the `alt` text).

Example:

```html
<img src="avatar.png" alt="User photo">
```

If the file is not found, the browser will show:

```javascript
User photo
```

---

### 6. The `loading="lazy"` attribute

Modern browsers can **defer loading images** that are not yet visible on the screen:

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

This speeds up page loading.

---

### 7. Example with an external link

```html
<a href="https://example.com">
  <img src="logo.png" alt="Company logo">
</a>
```

The image becomes a **clickable link**.

---

### Summary:

| Property | Description |
|---|---|
| Tag | `<img>` (non-paired) |
| Purpose | Inserting an image |
| Required attributes | `src`, `alt` |
| Commonly used | `width`, `height`, `title`, `loading` |
| Features | Contains no text, has no closing tag |

---

**In simple terms:**
`<img>` is a **"window" for a picture** on a site.
`src` says *where the image is located*,
and `alt` - *what should be there if it fails to load*.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.