~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/html/4html-images

# HTML Images & Media

Images and media make web pages visually engaging. HTML provides specific elements to embed and manage multimedia content.

## Basic Image Syntax

The `<img>` element embeds images:

```html
<img src="photo.jpg" alt="A sunset over mountains" />
```

**Required attributes:**
- `src` — Path to the image file
- `alt` — Alternative text for accessibility

## Image Attributes

```html
<img
  src="photo.jpg"
  alt="A sunset over mountains"
  width="800"
  height="600"
  loading="lazy"
/>
```

**Key attributes:**
- `width` / `height` — Prevents layout shift
- `loading="lazy"` — Loads images only when visible
- `title` — Tooltip on hover (optional)

## Alt Text Best Practices

Good alt text describes the image's content and purpose:

```html

<img src="chart.png" alt="image" />
<img src="chart.png" alt="" />

<img src="chart.png" alt="Sales chart showing 50% growth in 2026" />
<img src="decorative-border.png" alt="" role="presentation" />
```

**Rules:**
- Describe what's in the image
- Keep it concise (under 125 characters)
- Leave empty for decorative images
- Never start with "Image of..." or "Picture of..."

## Image Formats

Choose the right format for your use case:

```html

<img src="photo.webp" alt="Photo" />

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

**Format guide:**
- **JPEG** — Photos, complex images
- **PNG** — Graphics, transparent backgrounds
- **WebP** — Modern, smaller files
- **SVG** — Icons, logos, scalable graphics
- **GIF** — Simple animations

## Figure and Caption

Use `<figure>` and `<figcaption>` for images with captions:

```html
<figure>
  <img src="chart.png" alt="Sales growth chart" />
  <figcaption>Figure 1: Quarterly sales growth in 2026</figcaption>
</figure>
```

## Responsive Images

Serve different images based on screen size:

```html
<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 400px, 800px"
  alt="Responsive image example"
/>
```

## Picture Element

For art direction (different crops per screen size):

```html
<picture>
  <source media="(min-width: 800px)" srcset="wide.jpg" />
  <source media="(min-width: 400px)" srcset="medium.jpg" />
  <img src="small.jpg" alt="Photo that changes crop per screen" />
</picture>
```

## Video

Embed videos with the `<video>` element:

```html
<video src="tutorial.mp4" controls width="800">
  Your browser doesn't support HTML5 video.
</video>
```

**With multiple sources:**

```html
<video controls width="800" poster="thumbnail.jpg">
  <source src="tutorial.mp4" type="video/mp4" />
  <source src="tutorial.webm" type="video/webm" />
  Your browser doesn't support HTML5 video.
</video>
```

**Video attributes:**
- `controls` — Shows play/pause buttons
- `autoplay` — Plays automatically (avoid — bad UX)
- `loop` — Loops the video
- `muted` — Starts muted
- `poster` — Thumbnail image before play

## Audio

Embed audio with the `<audio>` element:

```html
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg" />
  <source src="podcast.ogg" type="audio/ogg" />
  Your browser doesn't support HTML5 audio.
</audio>
```

## Iframes

Embed external content (maps, videos, etc.):

```html
<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="560"
  height="315"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>
```

## Complete Example

Here's a media-rich article layout:

```html
<article>
  <h1>Building a Modern Website</h1>

<figure>
    <img
      src="hero.webp"
      srcset="hero-400.webp 400w, hero-800.webp 800w"
      sizes="(max-width: 600px) 100vw, 800px"
      alt="Person coding on a laptop with multiple screens"
      width="800"
      height="450"
      loading="lazy"
    />
    <figcaption>Setting up your development environment</figcaption>
  </figure>

<p>Watch the video tutorial below:</p>

<video controls width="100%" poster="video-thumb.jpg">
    <source src="tutorial.mp4" type="video/mp4" />
    <source src="tutorial.webm" type="video/webm" />
    Your browser doesn't support HTML5 video.
  </video>

<h2>Resources</h2>
  <ul>
    <li>
      <img src="icon-pdf.svg" alt="" width="16" height="16" />
      <a href="guide.pdf" download>Download the PDF Guide</a>
    </li>
  </ul>
</article>
```

## Common Mistakes

1. **Missing alt text** — Hurts accessibility and SEO
2. **Using images for text** — Use actual text styled with CSS
3. **Ignoring file size** — Compress images for faster loading
4. **Missing width/height** — Causes layout shift (CLS)
5. **Autoplaying video** — Annoying and wastes bandwidth

No changes yet

cancel