Images — Module 01 | Frontend Learning Roadmap

1. Introduction

Images make web pages visual, engaging, and informative. A photo, logo, diagram, or icon can communicate things that paragraphs of text cannot.

The <img> element is a self-closing element — it has no content inside it. Instead, you tell the browser where to find the image using the src attribute, and you describe it with the alt attribute.

Getting images right involves more than just displaying them — you need to consider accessibility, performance, and file format choices.

2. Theory

The <img> Element

Basic syntax:

<img src="path/to/image.jpg" alt="Description of the image">

The <img> tag is self-closing — no closing tag needed. The browser fetches and displays the image file at the path specified in src.

The src Attribute

Specifies where the image file is located. Can be:

Relative path — image file in your project: src="images/photo.jpg"
Absolute URL — image hosted online: src="https://example.com/photo.jpg"

The alt Attribute — NEVER Skip This

The alt attribute provides a text alternative for the image. It is used by:

Screen readers — read the alt text aloud to visually impaired users
Browsers — displayed if the image fails to load
Search engines — index the alt text to understand the image content

Write alt text that describes what the image shows, not how it looks:

<!-- Bad alt text -->
<img src="dog.jpg" alt="image">

<!-- Good alt text -->
<img src="dog.jpg" alt="Golden retriever puppy playing with a red ball in a park">

<!-- Decorative images -- empty alt so screen readers skip them -->
<img src="decorative-divider.png" alt="">

Width and Height Attributes

<img src="photo.jpg" alt="Sunset over mountains" width="800" height="600">

Setting width and height in HTML helps the browser reserve space before the image loads, preventing layout shifts. In CSS you can also control image size.

Clickable Images (Link + Image)

Wrap an <img> in an <a> to make it clickable:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  <img src="logo.png" alt="Example Company — Visit our website">
</a>

Image Formats Comparison

Format	Best For	Supports Transparency?
JPEG / JPG	Photos, complex images with many colours	No
PNG	Logos, icons, images needing transparency	Yes
WebP	Everything — modern format, smaller file sizes	Yes
SVG	Logos, icons, diagrams — scales to any size	Yes
GIF	Simple animations	Partial (1-bit)

The <figure> and <figcaption> Elements

Use these to semantically associate an image with its caption:

<figure>
  <img src="waterfall.jpg" alt="Angel Falls waterfall in Venezuela">
  <figcaption>Angel Falls, Venezuela — the world's highest uninterrupted waterfall.</figcaption>
</figure>

3. Real World Example

Product images on e-commerce sites, profile photos on social media, thumbnails on news sites, logos in headers — all <img> elements.

When you see a broken image icon (a small picture with an X or a box), it means the src path is wrong or the file does not exist at that path. This is the most common image mistake beginners make.

4. Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Photo Gallery</title>
</head>
<body>

  <h1>My Travel Photos</h1>

  <!-- Basic image -->
  <img src="images/paris.jpg" alt="Eiffel Tower at sunset, Paris, France" width="600" height="400">

  <!-- Image with caption using figure -->
  <figure>
    <img src="images/tokyo.jpg" alt="Tokyo skyline at night with Mount Fuji in the background" width="600" height="400">
    <figcaption>Tokyo skyline — photographed from the Skytree observation deck, 2023.</figcaption>
  </figure>

  <!-- Clickable image -->
  <a href="https://www.visitnorway.com" target="_blank" rel="noopener noreferrer">
    <img src="images/norway.jpg" alt="Norwegian fjord with snow-capped mountains — click to learn more about Norway" width="600" height="400">
  </a>

  <!-- Decorative image -- no alt text needed (empty alt) -->
  <img src="images/decorative-line.png" alt="">

  <!-- External image (using a URL) -->
  <img src="https://via.placeholder.com/400x300" alt="Placeholder image for demonstration" width="400" height="300">

</body>
</html>

5. Code Breakdown

Code	What It Does
`src="images/paris.jpg"`	Relative path — looks for `paris.jpg` inside an `images` folder in the same directory as the HTML file
`alt="Eiffel Tower at sunset..."`	Describes the image for screen readers, failed loads, and search engines
`width="600" height="400"`	Tells the browser the image size so it can reserve space before loading, preventing layout shift
`<figure>`	Semantic container grouping an image with its caption
`<figcaption>`	Caption text associated with the `<figure>`. Rendered below the image by default
`alt=""`	Empty alt text tells screen readers to skip this image — use for purely decorative images
`src="https://..."`	Absolute URL — loads image from an external server

6. Common Mistakes

Mistake 1 — Missing or empty alt text on meaningful images

Every meaningful image must have descriptive alt text. Missing alt text fails accessibility standards. Empty alt text (alt="") is only correct for purely decorative images.

Mistake 2 — Wrong file path (most common beginner mistake)

If src="images/photo.jpg" shows a broken image, check: (1) the folder name is correct, (2) the file name and extension are correct, (3) the path is relative to the HTML file location, (4) the file actually exists in that location.

Mistake 3 — Using huge image files

A 5MB photo slows down your page significantly. Optimise images before using them. Aim for web images under 200KB. Use WebP format for best quality/size ratio. Tools: Squoosh, TinyPNG.

Mistake 4 — Not specifying width and height

Without width and height attributes, the browser does not know the image size until it loads, causing content below the image to jump down when the image appears (Cumulative Layout Shift).

7. Best Practices

Always write meaningful alt text — describe what the image shows. Aim for one clear sentence.

Organise images in a dedicated folder — create an images/ folder and keep all image files there.

Use WebP format where possible — it provides the same quality at 25–35% smaller file sizes than JPEG or PNG. All modern browsers support it.

Always set width and height — prevents layout shifts while the page loads.

Use <figure> + <figcaption> for images that have captions — it is the semantic standard.

8. Practice Exercise

Create an images folder inside your project. Download or find 3 images online (free sites: Unsplash, Pexels) and save them in the folder. Then create gallery.html with:

A heading: "My Photo Gallery"
3 images, each wrapped in a <figure> with a <figcaption>
Meaningful alt text on every image
Width and height attributes on every image
One of the images should be wrapped in a link

9. Assignment

Improve your About Me page from earlier. Add:

A profile picture (real or placeholder from https://via.placeholder.com/200)
The image inside a <figure> with a <figcaption>
Correct alt text describing who is in the photo
Proper width and height attributes
At least one image that is also a clickable link

10. Interview Questions

Q1: What does the alt attribute do in an <img> element?

Answer: The alt attribute provides alternative text for an image. It serves three purposes: screen readers read it aloud for visually impaired users; browsers display it when an image fails to load; search engines use it to understand image content. All meaningful images must have descriptive alt text.

Q2: What is the difference between a relative path and an absolute URL in src?

Answer: A relative path (e.g. images/photo.jpg) is relative to the current HTML file's location. An absolute URL (e.g. https://example.com/photo.jpg) is the complete internet address of the image. Use relative paths for your own images, absolute URLs for external images.

Q3: Why should you specify width and height on <img> elements?

Answer: When the browser loads a page, it does not initially know the dimensions of images. If width and height are not specified, the page layout shifts when images finally load — content jumps down or sideways. This is called Cumulative Layout Shift (CLS) and it hurts user experience and Core Web Vitals scores. Specifying dimensions lets the browser reserve the exact space in advance.

Q4: When should alt text be empty (alt="")?

Answer: When an image is purely decorative — it adds visual interest but carries no informational content. For example, a decorative border image or background pattern. An empty alt attribute tells screen readers to skip the image completely. Never omit the alt attribute entirely — always include it, even if empty for decorative images.

Q5: What image format would you choose for a logo? For a photo? Why?

Answer: For a logo: SVG (scales to any size without quality loss, small file size) or PNG (supports transparency). For a photo: WebP (best quality-to-size ratio) or JPEG (wide compatibility). JPEG uses lossy compression that works well for complex, photographic images. PNG is lossless but produces larger files than WebP for photos.

11. Additional Resources

MDN — The Image Element
MDN — The Figure Element
Squoosh — Free browser-based image optimisation tool
web.dev — Image Optimisation Guide
Pexels — Free stock photos for practice