🔗 Phase 3 · Links & Media🟢 BeginnerModule 04

HTML Images

⏱ 20 min read📖 5 sections🧩 5-question quiz🏆 1 challenge

Course Progress34% complete

Images are the most impactful visual elements on the web. The <img> element is a self-closing tag that embeds an image directly into your page. Knowing how to use alt text, dimensions, modern formats, and responsive images is essential for performance, accessibility, and SEO.

Section 1

The img Element

The <img> element embeds an image. It is self-closing (no closing tag). The two required attributes are src (the image path) and alt (alternative text).

HTMLimg element

<!-- Minimum required attributes -->
<img src="hero.jpg" alt="A developer coding at a desk">

<!-- With explicit dimensions (recommended for performance) -->
<img
  src="profile.jpg"
  alt="Sarah Jones, Lead Developer"
  width="400"
  height="300"
>

<!-- Decorative image: empty alt so screen readers skip it -->
<img src="divider.svg" alt="" role="presentation">

⚠️

Always include width and height

Specifying width and height lets the browser reserve space for the image before it loads, preventing "layout shift" (the page jumping as images load). This directly affects your Core Web Vitals score.

Section 2

Writing Good Alt Text

Alt text is read aloud by screen readers and shown when images fail to load. It's also indexed by search engines. Writing it well is both an accessibility and SEO task.

HTMLAlt text examples

<!-- ❌ BAD: no description, just the filename -->
<img src="img001.jpg" alt="img001">
<img src="photo.jpg" alt="photo">

<!-- ❌ BAD: keyword stuffing in alt -->
<img src="cake.jpg" alt="buy cake buy cake cheap cake order cake">

<!-- ✅ GOOD: descriptive, contextual -->
<img src="team.jpg" alt="The BitWithBite team at their 2024 London meetup">

<!-- ✅ GOOD: empty alt for decorative images -->
<img src="decorative-wave.svg" alt="">

Section 3

Image Formats

📷

JPEG

Photographs. Lossy compression. Small file size. No transparency.

🖼️

PNG

Graphics, logos. Lossless. Supports transparency (alpha).

🚀

WebP

Modern format. 30% smaller than JPEG/PNG. Transparency + animation support.

✏️

SVG

Vector graphics. Infinitely scalable. Tiny file size. Code-based.

🎞️

GIF

Animations. Limited 256 colours. Use WebP or video instead for animations.

⚡

AVIF

Next-gen format. Even smaller than WebP. Growing browser support.

💡

Modern image format strategy

Use WebP as your primary format with JPEG/PNG as fallback. Use SVG for logos, icons, and illustrations. Use <picture> to serve different formats to different browsers automatically.

Section 4

Responsive Images

The srcset attribute lets you provide multiple image sizes — the browser picks the best one based on the display's pixel density and viewport size. Pair with sizes for full control.

HTMLsrcset and picture

<!-- srcset: let browser choose by pixel density -->
<img
  src="hero.jpg"
  srcset="hero.jpg 1x, hero@2x.jpg 2x, hero@3x.jpg 3x"
  alt="Hero image"
>

<!-- picture: full control with format fallback -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="600">
</picture>

<!-- lazy loading: defer off-screen images -->
<img src="below-fold.jpg" alt="..." loading="lazy">

Section 5

figure and figcaption

Use <figure> to wrap an image with its caption. The <figcaption> element provides a visible description associated with the figure — semantically connected, not just visual text.

HTMLfigure with caption

<figure>
  <img
    src="html-history.jpg"
    alt="Tim Berners-Lee at CERN, 1989"
    width="800"
    height="500"
  >
  <figcaption>
    Tim Berners-Lee invented HTML and the World Wide Web at CERN in 1989.
  </figcaption>
</figure>

🧩 Quick Check — Lesson 12

5 questions · instant feedback

1. Which two attributes are required on every <img> element?

2. What alt value should a purely decorative image have?

3. Why should you specify width and height on <img>?

4. Which image format supports transparency AND provides smaller file sizes than PNG?

5. What HTML attribute enables lazy loading on images?

🏆

Quiz Complete!

Images mastered! On to image maps.

🏆

Lesson 12 Challenge

Code exercise · 15 min

Build an image gallery with all best practices applied.

Create a photo gallery page that includes:

1. Three <figure> elements each with an <img> and <figcaption>
2. Each image must have descriptive alt text, explicit width and height
3. Use loading="lazy" on the second and third images (first image is above the fold)
4. Use a <picture> element for the hero image with WebP and JPEG sources
5. One image must be decorative with alt=""

Show hints

First image: loading="eager" (default) — it's visible immediately
figure is a block element — no special CSS needed to display as a block
figcaption goes inside figure, after the img
picture needs a fallback <img> as the last child

← Links

Lesson 12 of 35

Image Maps →