PHASE 1Beginner ~25 min· topic 7 of 8

Topic 1.7

Images

In one line

<img> shows a picture from the file in src, describes it in words with alt, and should state its width and height; picking the right file format and writing good alt text matter as much as the tag.

Think of it like this

A photo album with captions written for a friend on the phone. You can't show the photos, so for each one you say what matters: "Grandma blowing out 80 candles." That spoken description is the alt text. And when you stick photos into the album, you leave a gap of the right size for each one first, so the pages don't shuffle when the photo arrives: that's width and height.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

src: The attribute with the image file's path or URL.
alt text: Words that describe an image, read aloud by screen readers and shown if the image fails.
Decorative image: An image that adds no information, given alt="" so screen readers skip it.
Aspect ratio: The shape of an image: width divided by height, like 16:9.
Layout shift: Content jumping around as images and other things load late.
Lossy / lossless: Lossy formats throw away small details to save space; lossless formats keep every pixel exactly.
Vector image: An image described as shapes (SVG), so it stays sharp at any size.
Raster image: An image made of a grid of coloured dots called pixels (JPEG, PNG, WebP, AVIF, GIF).

Step by step

01Show an image

Put the file next to your page and point src at it. Add alt text describing what the image shows.

index.htmlwhole filehtml

<img src="beach.jpg" alt="Children building a sandcastle at sunset">

02Reserve its space

Add the image's real pixel size. Now the browser knows its shape before the file arrives and keeps a gap of the right size, so nothing jumps.

index.htmlwhole filehtml

<img src="beach.jpg" alt="Children building a sandcastle at sunset" width="1200" height="800">

03Let CSS make it fit

The attributes give the shape; CSS gives the size on screen. This common rule lets images shrink on small screens while keeping their shape.

style.csswhole filecss

img {
  max-width: 100%;
  height: auto;
}

04Decide the alt text

Use this decision path for every image. It covers most real cases.

Decide the alt textdiagram

Rendering diagram…

05Pick the format

Photo → AVIF or WebP (JPEG as a fallback). Logo or icon → SVG. Screenshot with sharp text → PNG or lossless WebP. Tiny animation → animated WebP, or a muted video for anything longer (Topic 5.3).

06Add a caption when it helps

If the picture needs a visible explanation, use a figure.

index.htmlwhole filehtml

<figure>
  <img src="chart.png" alt="Bar chart: visits rose from 2,000 in January to 9,000 in June" width="800" height="450">
  <figcaption>Monthly visitors, first half of 2026.</figcaption>
</figure>

Try it yourself

1
Break the image on purpose
In the first example, change fill='%23f97316' to fill='%23f97316 (remove one quote). Predict what the console prints for the loaded size, then run.
2
Write alt text for a link image
Wrap the logo in <a href="/">…</a>. What should the alt text say now? (Hint: what does clicking it do?) Change it.
3
Remove width and height
In the third example, delete the width and height attributes. On a slow connection the text below would now jump down when the image loads. Put them back.

Code & diagrams

An image, its alt text and its size New tab

`width`/`height` are what you asked for; `naturalWidth`/`naturalHeight` are the image file's own size.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

alt: Orange rectangle with the word Hectal
width x height attributes: 120 x 80
loaded image size: 120 x 80

What a broken image looks like New tab

The first box shows its alt text. The empty-alt image shows nothing at all, which is what you want for decoration. `width`/`height` still reserve the space.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

bad1 loaded: false alt: "Our shop on MG Road"
bad2 loaded: false alt: ""

Responsive image with a caption New tab

Drag the preview narrower: the image shrinks but keeps its 2:1 shape, because CSS sets `height: auto` and the attributes give the ratio.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Leave out alt

Write <img src="IMG_2041.jpg"> with no alt attribute.

terminal

$ screen reader

── what you'll see ──

"IMG underscore 2041 dot jpg, image"

Break #2

Wrong case in the file name

The file is Photo.JPG but the HTML says src="photo.jpg".

terminal

$ after deploying (DevTools → Network)

── what you'll see ──

GET /photo.jpg 404 (Not Found)

Myth vs fact

Myth

Alt text should start with "Image of…".

Fact

Screen readers already announce that it's an image. Start with what matters.

Myth

width and height attributes stop images being responsive.

Fact

With CSS max-width: 100%; height: auto, the image still scales; the attributes only give the browser the aspect ratio so it can reserve space.

Myth

PNG is always better quality, so use it for photos.

Fact

For photos, PNG files are many times larger with no visible gain. Use AVIF, WebP or JPEG for photos and PNG for sharp graphics and screenshots.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
Browsers map the width and height attributes to a CSS aspect-ratio (like aspect-ratio: auto 1200 / 800), which is why they prevent layout shift even when CSS overrides the size. Layout shift is measured by the Core Web Vitals metric CLS (Cumulative Layout Shift).
▸
An image's bytes don't block HTML parsing, but a large image is often the page's Largest Contentful Paint (LCP). For your main image, don't lazy-load it, and consider fetchpriority="high" (Topic 5.2).
▸
SVG in <img> is sandboxed: scripts don't run and external resources inside it don't load. To style an SVG's parts with your page's CSS or animate them, put the <svg> inline in the HTML instead.
▸
To serve different formats with fallbacks (AVIF → WebP → JPEG) or different sizes for different screens, use <picture>, srcset and sizes (Topic 5.1). Hectal's CSS course covers object-fit for cropping images to a box.

Remember this

1
<img> is a void element: everything is in its attributes. src (source) is the path or URL of the image file, worked out like a link's href (Topic 1.6). alt (alternative text) describes the image in words. The browser shows alt if the image fails to load, screen readers read it aloud, and search engines use it. Every <img> needs an alt attribute.
2
Writing alt text: describe what the image means in this place, in a short sentence, as if reading the page to someone. Don't start with "image of" (screen readers already say "image"). If the image is a link or button, describe the action ("Hectal home"). If it contains text, include the text. If it is purely decorative (a divider, a background flourish) or already described by nearby text, use an empty alt: alt="". Empty alt tells screen readers to skip it; a missing alt makes many of them read the file name instead ("IMG underscore 2041 dot JPG").
3
width and height give the image's size in CSS pixels, written as plain numbers: width="640" height="360". Even when CSS later makes the image responsive (like max-width: 100%; height: auto), the browser uses the two numbers to know the image's aspect ratio (its shape) before it downloads, and reserves the right space. Without them, text jumps down when the image arrives, a problem called layout shift. More in Topic 5.2.
4
File formats: JPEG (.jpg) for photos: small files, lossy (it throws away detail you barely see), no transparency. PNG for screenshots, diagrams and images needing transparency: lossless (exact pixels), but big for photos. GIF for very simple animations: only 256 colours, large files. WebP is newer: lossy or lossless, transparency and animation, usually 25–35% smaller than JPEG; all modern browsers support it. AVIF compresses even better and is supported by all major browsers since early 2024. SVG is different: a vector format made of shapes described in XML text, so it stays sharp at any size; best for logos, icons and simple illustrations.
5
Broken images: when the file is missing, the path is wrong, or the format is unsupported, the browser shows the alt text (Chrome adds a small broken-image icon if there's room), and the image's naturalWidth is 0. The most common causes are a wrong relative path, a mismatched upper/lower case in the file name (Topic 1.8), or a missing file extension.
6
To give an image a visible caption, wrap it in <figure> with a <figcaption>: <figure><img ...><figcaption>Our team in 2026</figcaption></figure>. The caption is linked to the image for screen readers. Alt text and caption do different jobs: alt replaces the image, the caption adds to it. Topic 2.5 covers figures in depth.

Explain it without notes

What is alt text for, and how do you decide what to write?

Why should you set width and height on images?

Compare JPEG, PNG, WebP, AVIF, SVG and GIF: when would you use each?

What's the difference between alt="" and no alt attribute?

Practice

Write an image tag for team.jpg (1600×900 pixels) showing five people smiling in front of the office, with good alt text and its size.

A shopping cart icon cart.svg is the only content of a link to cart.html. Write the HTML.

A decorative wavy line wave.png (800×40) separates two sections. Write it.

Trade-offs

↔
AVIF gives the smallest files but encodes slowly and is newer; WebP is a safe, well-supported middle ground; JPEG/PNG work everywhere. Using <picture> lets you serve the best format with fallbacks.
↔
Detailed alt text helps understanding but too much detail slows screen reader users; for complex charts, give a short alt and put the full data in the page text or a table.

Done when you can

I can add an image with src, alt, width and height.
I can write good alt text and use alt="" for decoration.
I can choose between JPEG, PNG, GIF, WebP, AVIF and SVG.
I can explain how width and height prevent layout shift.
I can find why an image is broken.
I can add a visible caption with <figure> and <figcaption>.

Command Palette

Words you'll meet

Step by step

01Show an image

02Reserve its space

03Let CSS make it fit

04Decide the alt text

05Pick the format

06Add a caption when it helps

Try it yourself

Break the image on purpose

Write alt text for a link image

Remove width and height

Code & diagrams

Break it on purpose

Leave out alt

Wrong case in the file name

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can