Lesson 6 of 12

HTML Images

Images make pages more inviting and often explain things faster than words. But a careless image can also slow a page down, push content around while it loads, or leave screen reader users guessing. In this lesson you will learn to add HTML images the right way. It follows on from HTML Links, since images use paths in exactly the same way links do.

The img element

HTML images are added with the void element <img>. Two attributes are essential:

  • src – the path to the image file. It follows the same absolute and relative URL rules as a link’s href, for example src="images/meenakshi-temple.jpg".
  • alt – a text alternative, read aloud by screen readers and shown if the image fails to load.

The Try it editor cannot load files from your computer, so the examples in this lesson use small images written directly into the src as data URLs (they start with data:image/svg+xml). On a real site you would simply write a file path.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Basic image</title>
</head>
<body>
  <h1>Marina Beach</h1>
  <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='100%25'%20height='100%25'%20fill='%232a7fba'/%3E%3Ctext%20x='50%25'%20y='55%25'%20font-family='sans-serif'%20font-size='24'%20text-anchor='middle'%20fill='white'%3EMarina%20Beach%3C/text%3E%3C/svg%3E"
       alt="Wide sandy beach with the sea under a clear blue sky"
       width="320" height="180">
  <p>One of the longest urban beaches in the world.</p>
</body>
</html>

Writing good alt text

Alt text should convey what the image communicates in this context, not just list what is in it. Ask yourself: if I replaced the picture with a sentence, what would I write?

ImageGood alt
Photo of a product in a shopalt="Brass Nataraja statue, 30 cm tall"
A logo that links to the home pagealt="Kaveri Crafts – home" (describe the destination)
A chartA short summary of what the chart shows, with full data in the text or a table
A purely decorative swirlalt="" (empty, so screen readers skip it)
  • Do not start with “Image of” or “Picture of” – screen readers already announce that it is an image.
  • Keep it short – usually one sentence.
  • Never leave out the alt attribute completely. An empty alt="" means “decorative”; a missing alt makes some screen readers read out the file name instead.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Broken image</title>
</head>
<body>
  <p>The file below does not exist, so the browser shows the alt text instead:</p>
  <img src="missing-photo.jpg" alt="Masala dosa served with coconut chutney and sambar" width="300" height="200">
</body>
</html>

Width, height and layout shift

Always set width and height to the image’s real pixel size (numbers only, no px). The browser uses them to calculate the image’s aspect ratio and reserve space before the file downloads. Without them, text jumps down when the image appears – an annoying effect called layout shift, which Google measures as part of Core Web Vitals.

These attributes do not stop the image being responsive. Add this common CSS rule and the image will shrink to fit narrow screens while keeping its ratio: img { max-width: 100%; height: auto; }. You will learn more in CSS Responsive Design.

Lazy loading

Adding loading="lazy" tells the browser to delay downloading an image until the visitor scrolls near it. This saves data and speeds up the first view. Use it for images further down the page, but not for the main image at the top, which should load as soon as possible.

Choosing an image format

FormatBest for
JPEGPhotographs; widely supported
PNGScreenshots and graphics that need sharp edges or transparency
WebP / AVIFModern formats with much smaller files than JPEG or PNG; supported by all current major browsers
SVGLogos, icons and illustrations; a vector format that stays sharp at any size
GIFVery simple animations; a short video is usually smaller

Captions with figure and figcaption

When an image has a visible caption, wrap both in <figure> and put the caption in <figcaption>. This links the caption to the image for assistive technology. The caption does not replace the alt text: alt describes the image, the caption adds context.

Responsive HTML images: srcset and picture

A phone does not need the same huge file as a large desktop screen. The srcset attribute lists several versions of an image with their widths, and sizes tells the browser how wide the image will be displayed. The browser then picks the most suitable file:

<img src="temple-800.jpg"
     srcset="temple-400.jpg 400w, temple-800.jpg 800w, temple-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 600px"
     alt="Shore Temple at Mahabalipuram at sunrise"
     width="800" height="533">

When you want a different image on different screens – for example a tighter crop on mobiles – use the <picture> element. The browser uses the first <source> whose media condition matches, and falls back to the <img>. Resize the preview below to see the image change.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Picture element</title>
</head>
<body>
  <figure>
    <picture>
      <source media="(max-width: 500px)" srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Crect%20width='100%25'%20height='100%25'%20fill='%23e76f51'/%3E%3Ctext%20x='50%25'%20y='55%25'%20font-family='sans-serif'%20font-size='24'%20text-anchor='middle'%20fill='white'%3ESquare%20crop%3C/text%3E%3C/svg%3E">
      <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='600'%20height='250'%3E%3Crect%20width='100%25'%20height='100%25'%20fill='%23264653'/%3E%3Ctext%20x='50%25'%20y='55%25'%20font-family='sans-serif'%20font-size='24'%20text-anchor='middle'%20fill='white'%3EWide%20crop%3C/text%3E%3C/svg%3E"
           alt="Rows of tea bushes on a hillside in Munnar"
           width="600" height="250" style="max-width: 100%; height: auto;">
    </picture>
    <figcaption>Tea gardens of Munnar, Kerala.</figcaption>
  </figure>
</body>
</html>

Tip: The <img> inside <picture> is required. It provides the alt text and the fallback for every case.

Next you will organise content into steps and bullet points in HTML Lists.

Further reading

Key takeaways

  • Use <img src="…" alt="…">; src paths work like link paths.
  • Alt text describes the purpose of the image; use alt="" for purely decorative images.
  • Set width and height to prevent layout shift, and use loading="lazy" for images below the fold.
  • Prefer modern formats like WebP or AVIF for photos and SVG for icons and logos.
  • Use <figure>/<figcaption> for captions and srcset or <picture> for responsive images.

Quick quiz

Check what you learned – pick an answer.

1. What alt text should a purely decorative border image have?

2. Why should you set width and height on images?

3. Which image should NOT use loading="lazy"?

Practice exercise

Add a captioned image of a filter coffee to a page. Use the file name "filter-coffee.jpg" (it will show its alt text in the editor), set width 400 and height 300, write meaningful alt text and add a figcaption.

Show a hint

Wrap the <img> and <figcaption> inside a <figure>.

Show the solution
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Filter coffee</title>
</head>
<body>
  <figure>
    <img src="filter-coffee.jpg"
         alt="Frothy filter coffee in a steel tumbler and dabarah"
         width="400" height="300">
    <figcaption>Filter coffee, served the traditional South Indian way.</figcaption>
  </figure>
</body>
</html>

Progress is saved in this browser only.