Images & Media›Core· 40 min read

Adding Images

A page without images feels empty. Learn to add them — and why every image needs alt text.

What you will learn

Add images with the <img> tag
Always write meaningful alt text
Control image size and choose the right format

The image tag

Images use <img>. It is self-closing and needs two key attributes: src (the image file) and alt (a text description).

src = where the image is, alt = describe it

<img src="https://picsum.photos/400/200" alt="A random sample photo">

Live preview

Two attributes do the work: src is the address of the image file to load, and alt is a short text description of what the picture shows. There is no closing tag — <img> is self-closing.

Note: Output: A 400×200 sample photo appears on the page. If the file ever fails to load, the words “A random sample photo” show in its place.

Why alt text is not optional

Blind users hear it read aloud by a screen reader.
It shows if the image fails to load.
Google reads it to understand your image — better SEO (Search Engine Optimisation, the work of helping your page show up higher in Google results).

Watch out: Never leave alt empty for a meaningful image. Write what the image shows: alt="Students coding in a classroom" — not alt="image" or alt="photo123.jpg".

Controlling size

Add width and height (in pixels). Setting at least the width stops the page from “jumping” while the image loads.

width="300" makes it 300 pixels wide

<img src="https://picsum.photos/600/300" alt="Sample landscape" width="300">

Live preview

The original image is 600 pixels wide, but width="300" tells the browser to display it at 300 pixels. The height shrinks to match automatically, keeping the picture in proportion.

Note: Output: The landscape image appears at 300 pixels wide (half of its natural size), still in proportion.

Tip: Formats: JPG for photos, PNG for logos/transparency, SVG for sharp icons/logos, WebP for small modern files, GIF for simple animation. Remember image paths follow the rules from the File Paths lesson.

Q. Which attribute provides a text description of an image?

Answer: alt provides the text alternative — vital for accessibility, broken images, and SEO. src is the file location.

✍️ Practice

Add two images with clear, descriptive alt text.
Make one image exactly 250 pixels wide using the width attribute.
Deliberately misspell a src and observe how the alt text appears instead.

🏠 Homework

Add a real image from your computer using a relative path (images/yourfile.jpg).