Skip to content

HTML Images, Video and Audio: img, alt Text, figure, srcset and Lazy Loading

Images are often the heaviest part of a page and the part people with low vision or slow connections struggle with most. A few attributes decide whether an image is described to blind visitors, whether the page jumps around while it loads, and whether a phone downloads a 4 MB photo it shows at 400 pixels wide. This lesson covers images first, then video and audio.

Quick answer

Use <img src="photo.jpg" alt="what the image shows" width="800" height="600">. Write alt text that replaces the image for someone who cannot see it, or alt="" for purely decorative images. Width and height stop layout jumps, and loading="lazy" delays images further down the page.

20 min read and practice · Content checked on 20 October 2026

In this lesson you will

  • Write alt text that actually helps
  • Stop layout shift and save data with width, height, srcset and lazy loading
  • Embed video and audio that people can control

The img element and alt text

<img> is a void element: no closing tag. src is the image address, written like a link URL. alt is the text alternative. Screen readers read it, browsers show it if the image fails to load, and search engines use it to understand the image.

Good alt text says what the image means in this place, briefly. A product photo might be "Black leather office chair, front view". A chart needs its key fact: "Sales rose from 2 to 5 million dirhams between 2023 and 2025". Do not start with "image of"; screen readers already say it is an image.

If an image is only decoration, such as a background swirl, write alt="" (empty, not missing). Screen readers then skip it. If you leave alt out completely, many screen readers read the file name instead, such as "IMG underscore 4 0 2 1 dot jpg".

Try it: alt text, and what happens when an image fails
Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.

Size, layout shift and responsive images

Always give width and height in pixels, matching the image’s real proportions. The browser then reserves the right space before the file arrives, so text does not jump down when the image loads. Google measures that jump as Cumulative Layout Shift, one of its Core Web Vitals. CSS can still make the image smaller on phones; the attributes only set the shape.

loading="lazy" tells the browser to wait until the image is near the screen. Use it for images below the first screen, not for the main image at the top, which should load as early as possible.

srcset lists several sizes of the same image and sizes says how wide it will be shown. The browser picks the smallest file that still looks sharp on that screen. For different crops or formats, wrap sources in <picture>. And wrap an image with a visible caption in <figure> with <figcaption>.

Try it: figure, figcaption and lazy loading
Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.

Video and audio

<video> and <audio> play media without plugins. Add the controls attribute so people can pause and change the volume; without it there are no buttons. Avoid autoplay with sound: browsers block it, and it is unpleasant. If you must autoplay a silent background video, add muted and playsinline.

Captions make video usable for deaf viewers and anyone watching without sound. Add them with <track kind="captions" src="captions.vtt" srclang="en" label="English"> inside the video. You can add an Arabic track too, with srclang="ar". A YouTube video is embedded with an <iframe> from YouTube’s share menu instead.

Common mistakes

  • Missing alt, or alt that repeats the file name

    alt="IMG_4021.jpg" or no alt at all tells a blind visitor nothing. Describe what matters, or use alt="" for decoration.

  • Uploading huge photos

    A 5000 pixel camera photo shown 600 pixels wide wastes data and slows the page. Resize and compress before upload; our free image compressor and resizer do it in the browser.

  • Text inside images

    A banner with the offer written in the picture cannot be read by screen readers, translated or found by search. Put important text in HTML.

Exercise

Show a product: a figure with an image that has useful alt text, a width and a height, plus a figcaption. Then add a second, decorative image with an empty alt="" and loading="lazy".

Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.
  • An image inside a figure
  • The figure image has non-empty alt text
  • Images have width and height
  • The figure has a figcaption
  • A decorative image with alt="" and loading="lazy"
Show one possible solution
<h2>Our best seller</h2>
<figure>
  <img src="https://needmytools.com/icon.svg" alt="Green NeedMyTools logo" width="120" height="120">
  <figcaption>The NeedMyTools logo, shown here as a sample product.</figcaption>
</figure>
<img src="https://needmytools.com/icon.svg" alt="" width="40" height="40" loading="lazy">

Quick quiz

  1. 1. What is the right alt for a purely decorative divider image?
  2. 2. Why add width and height to an img?
  3. 3. Which image should NOT use loading="lazy"?
  4. 4. A video has no play button. What is missing?
Answer every question to check.

Finished the lesson?

Questions people ask

How long should alt text be?

As short as possible while still doing the job, usually one sentence. There is no official character limit. If an image needs a long explanation, such as a detailed chart, describe it in the page text or a caption and keep alt short.

Which image format should I use?

Photos: WebP or AVIF where possible, JPEG as a fallback. Logos and icons: SVG. Screenshots with text: PNG or WebP. All modern browsers support WebP; you can offer AVIF with a fallback using <picture>.

Can I use any image I find on Google?

No. Most images are protected by copyright. Use your own photos, images you have a licence for, or free libraries whose licence allows your use, and keep a note of the source.

What is the difference between img and a CSS background image?

Use <img> when the image is content that means something. Use a CSS background for pure decoration. Background images have no alt text, so screen readers do not know they exist.

Should I host videos on my own site?

Short clips are fine. For long videos a video platform usually handles streaming quality, captions and bandwidth better. Self-hosted video costs bandwidth every time it plays.

Sources

Facts in this lesson were checked against these official pages on 20 October 2026.

Code examples stay in English and run in a sandbox on your device. Arabic text is pending native review. If you spot a mistake, tell us through the contact page.