HTML Images

The img Element

Images are added with <img>. It is a void element, so there is no closing tag and no content between tags — everything it needs comes from attributes. The src attribute holds the path to the image file, and the alt attribute holds a text alternative.

It is worth understanding what actually happens when the browser meets an <img>. The image is not part of your HTML file; it is a separate file, fetched with a separate request. Your HTML may load in a fraction of a second while a two-megabyte photograph takes several more, which is why images are usually the reason a page feels slow.

<img> is an inline element, which means several images written one after another will flow across the line like words in a sentence, wrapping when they run out of room. That surprises people who expect each image to start on a new line. It is not a bug and there is no HTML fix — it is a layout question, and CSS answers it.

<!-- The minimum a real image needs -->
<img src="images/line-follower.jpg"
     alt="Line-following robot on a black tape track">

<!-- Paths follow the same rules as links -->
<img src="logo.png" alt="Robotics Club logo">              <!-- same folder -->
<img src="images/team.jpg" alt="The 2026 club team">       <!-- subfolder -->
<img src="../images/team.jpg" alt="The 2026 club team">    <!-- up one level -->

<!-- An image used as a link -->
<a href="gallery.html">
  <img src="images/thumb.jpg" alt="See all workshop photos">
</a>

Writing alt Text That Actually Helps

The alt attribute is the text alternative for an image, and it is required on every <img>. It is read aloud by screen readers, displayed when the image fails to load, and used by search engines to understand what the picture shows. Writing it well is the single most valuable accessibility habit you can build in this course.

The rule that makes alt text good is this: describe the image's purpose in its context, not its appearance. Ask yourself what a reader would lose if the image vanished, and write that. A photograph on a club page might be described as "Students testing a line-following robot on a track" — not "IMG_20260314.jpg", not "image", and not "a photo", all of which say nothing.

Purely decorative images are the important exception. A background swirl, a divider ornament, an icon that sits next to a label already saying the same word — these add nothing for a listener, and describing them just adds noise. For those, write alt="": an alt attribute that is present but empty. That tells assistive technology to skip the image entirely. Leaving alt off altogether is different and worse, because a screen reader with no alternative to read may fall back to announcing the file name.

Two more habits. Do not begin with "image of" or "photo of" — the screen reader already announces that it is an image, so you would be saying it twice. And when the image is inside a link, the alt text has to describe where the link goes, because it becomes the link's text: an arrow icon leading to the next page should read "Next page", not "right arrow".

<!-- Meaningful: describes what matters here -->
<img src="images/robot.jpg"
     alt="Line-following robot completing the figure-of-eight track">

<!-- Useless -->
<img src="images/robot.jpg" alt="robot.jpg">
<img src="images/robot.jpg" alt="image">
<img src="images/robot.jpg" alt="photo of a robot picture image">

<!-- Decorative: present but empty, so it is skipped -->
<img src="images/divider-swirl.png" alt="">

<!-- Inside a link, alt describes the destination -->
<a href="page3.html">
  <img src="icons/arrow-right.svg" alt="Next page">
</a>

<!-- Missing alt entirely: never do this -->
<img src="images/robot.jpg">

• Describe the purpose the image serves, not the pixels it contains
• Skip "image of" and "picture of" — that part is already announced
• Decorative image: alt="", present and empty
• Image inside a link: the alt text is the link text, so describe the destination
• Image containing words, such as a poster: put those words in the alt text
• A chart or graph needs its finding stated — "attendance rose each month from January to June" — not just "attendance chart"

width, height and the Jump That Annoys Everyone

You have seen this on news sites: you start reading, the page suddenly jumps down, and you have lost your place — or worse, you tapped a link you did not mean to. That jump is layout shift, and unsized images are the usual cause. Because the browser does not know how tall an image will be until it has downloaded, it reserves no space, lays the text out, and then shoves everything down when the image arrives.

The fix is to put width and height attributes on every <img>, set to the image file's real pixel dimensions. The browser uses those two numbers to work out the aspect ratio and reserve the correct space before the file arrives. Then nothing moves.

This does not lock your image to that size. In CSS you would normally write img { max-width: 100%; height: auto; } so images shrink on small screens, and modern browsers combine that with the attributes to keep the shape correct while scaling. So the attributes are a hint about proportions, and CSS still controls the displayed size. Setting only one of the two, or setting values that do not match the file's real ratio, gives you a stretched image — so read the real dimensions from your image editor or from the file properties rather than guessing.

<!-- The file really is 800 by 600 pixels -->
<img src="images/robot.jpg"
     alt="Line-following robot on the test track"
     width="800"
     height="600">

/* CSS still controls the size on screen */
img {
  max-width: 100%;
  height: auto;
}

<!-- Wrong: only one dimension, so the ratio is unknown -->
<img src="images/robot.jpg" alt="..." width="800">

<!-- Wrong: numbers that do not match the file, so it looks squashed -->
<img src="images/robot.jpg" alt="..." width="800" height="200">

Formats, File Size and Lazy Loading

Choosing the right format matters more for page speed than almost anything else you can do in HTML. Photographs belong in JPEG or, better, WebP, both of which throw away detail the eye does not notice in exchange for much smaller files. Logos, icons and diagrams with flat colours belong in PNG or SVG, which keep edges sharp. Saving a screenshot of text as a JPEG gives you a blurry, oversized file; saving a photograph as a PNG gives you a file several times larger than it needs to be.

SVG deserves special mention for logos and icons. It stores shapes as instructions rather than pixels, so it stays perfectly sharp at any size and is usually tiny. If your college project has a logo, an SVG version of it will look better on a high-resolution phone screen than any PNG.

Two attributes help with loading. loading="lazy" tells the browser not to download an image until the visitor scrolls near it, which is a large saving on a gallery page with thirty photographs. Do not put it on images visible when the page first loads, though, because delaying those makes the page feel slower, not faster. And srcset lets you offer several sizes of the same image so the browser can pick one suited to the screen — a phone downloads the small file, a laptop the large one.

• JPEG — photographs; small files, no transparency
• PNG — logos, icons, screenshots, anything needing transparency or crisp edges
• SVG — logos, icons and diagrams; sharp at every size and usually the smallest file
• WebP — a modern format that beats both JPEG and PNG on size, supported by all current browsers
• GIF — only for simple animations; poor quality and large files for anything else

<!-- Below the fold: do not download until it is nearly needed -->
<img src="images/gallery-07.jpg"
     alt="Team assembling the chassis during the workshop"
     width="800" height="600"
     loading="lazy">

<!-- Offer several sizes and let the browser choose -->
<img src="images/robot-800.jpg"
     srcset="images/robot-400.jpg 400w,
             images/robot-800.jpg 800w,
             images/robot-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="Line-following robot on the test track"
     width="800" height="600">

Captions with figure and figcaption

When an image needs a visible caption, the right markup is <figure> wrapping the image, with <figcaption> holding the caption text. This does something a nearby paragraph cannot: it formally ties the caption to the image, so assistive technology knows the two belong together rather than treating the caption as unrelated text that happens to sit underneath.

A caption is not a substitute for alt text, and the two should not repeat each other. The alt text describes the image for someone who cannot see it; the caption adds information for everyone, such as who is in the photograph or when it was taken. If the caption fully describes the image already, it is reasonable to give the image alt="" so the same words are not read twice.

The example below is worth running. The first image points at a file that does not exist, so your browser will show the alt text where the picture should be — which is exactly what a person with images turned off, or a slow connection, would get. Change the alt text and run it again to see how much difference a good description makes.

<figure>
  <img src="images/prizegiving.jpg"
       alt="Three students holding a trophy on stage"
       width="800" height="533">
  <figcaption>
    The team after winning the inter-college robotics final, March 2026.
  </figcaption>
</figure>

<h2>Workshop Gallery</h2>

<!-- This file does not exist, so the browser shows the alt text instead -->
<img src="missing-photo.jpg"
     alt="Students soldering sensor wires onto a robot chassis"
     width="320" height="200">

<!-- A decorative image with alt="" shows nothing at all -->
<img src="missing-divider.png" alt="" width="320" height="20">

<figure>
  <img src="missing-team.jpg"
       alt="The full club team standing with their finished robot"
       width="320" height="200">
  <figcaption>The team at the end of the build weekend.</figcaption>
</figure>

<p>Try changing the alt text above to something vague like "image"
   and run it again — that is exactly what a screen reader user hears.</p>

body {
  font-family: system-ui, Arial, sans-serif;
  line-height: 1.6;
  padding: 24px;
}
img {
  max-width: 100%;
  height: auto;
  border: 1px dashed #bbb;
}
figure {
  margin: 24px 0;
}
figcaption {
  font-size: 0.9rem;
  color: #555;
  margin-top: 8px;
}