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:

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

Required attributes:

src — Path to the image file
alt — Alternative text for accessibility

Image Attributes

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

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

<!-- Good -->
<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:

<!-- Modern format (best quality/size) -->
<img src="photo.webp" alt="Photo" />

<!-- Fallback for older browsers -->
<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:

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

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

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

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

With multiple sources:

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

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

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

<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

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