HTML Images

1. Introduction

Images make web pages visually rich and engaging, but they also represent the largest contributor to page weight — and accessibility failures. The HTML <img> element embeds images into a page, while the <picture> element and srcset attribute offer responsive image loading. In this lesson you will learn how to embed images correctly, optimise them for performance, and make them fully accessible.

2. Concept

Key img Attributes

Attribute	Required?	Purpose
`src`	Yes	Path or URL to the image file
`alt`	Yes (accessibility)	Text description; shown when image fails to load
`width` / `height`	Strongly recommended	Reserve layout space; prevents Cumulative Layout Shift
`loading="lazy"`	Optional	Defer offscreen images until near viewport
`srcset`	Optional	Offer multiple resolutions; browser picks the best

Note: When an image is purely decorative, use an empty alt="". This tells screen readers to skip the image entirely. Never omit the attribute — some screen readers will read the file name aloud instead.

Tip: Always specify width and height on images, even when you resize them with CSS. This gives the browser the aspect ratio up front, preventing layout reflow as the page loads.

Warning: Never embed images as Base64 strings in HTML. This inflates HTML size, prevents caching, and makes source control diffs enormous. Keep images in separate files.

3. Basic Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Images Demo</title>
  </head>
  <body>

    <!-- Standard image -->
    <img
      src="https://via.placeholder.com/400x200"
      alt="A 400 by 200 grey placeholder rectangle"
      width="400"
      height="200"
    >

    <!-- Lazy-loaded image -->
    <img
      src="/images/hero.jpg"
      alt="Mountain landscape at sunrise"
      width="1200"
      height="600"
      loading="lazy"
    >

    <!-- Responsive image with srcset -->
    <img
      src="/images/card-800.jpg"
      srcset="/images/card-400.jpg 400w,
              /images/card-800.jpg 800w,
              /images/card-1200.jpg 1200w"
      sizes="(max-width: 600px) 100vw, 50vw"
      alt="Team members collaborating at a whiteboard"
      width="800"
      height="450"
      loading="lazy"
    >

    <!-- Decorative image: empty alt -->
    <img src="/images/divider.svg" alt="" width="600" height="4">

  </body>
</html>

4. How It Works

Step 1 — The src Attribute

The browser fetches the image from the src URL. If the fetch fails, the browser displays the alt text and a broken image icon.

Step 2 — The alt Attribute

Alt text serves three purposes: screen reader announcement, broken image fallback text, and search engine image indexing. Write it as a concise description of what the image shows — not “image of” or “photo of”.

Step 3 — width and height Prevent Layout Shift

When the browser parses width="800" height="450", it reserves exactly that amount of space in the layout before the image downloads. Without these, content shifts visibly as images load — hurting Core Web Vitals.

Step 4 — srcset and sizes for Responsive Images

srcset lists image variants with their pixel widths. sizes tells the browser how wide the image will be rendered at each viewport width. The browser selects the most efficient file to download.

5. Real-World Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photography Portfolio</title>
  </head>
  <body>
    <h1>My Photography Portfolio</h1>

    <!-- Hero image using picture for format switching -->
    <picture>
      <source srcset="/images/hero.avif" type="image/avif">
      <source srcset="/images/hero.webp" type="image/webp">
      <img
        src="/images/hero.jpg"
        alt="A lone lighthouse on a rocky coastline at dusk"
        width="1400"
        height="700"
      >
    </picture>

    <section>
      <h2>Gallery</h2>

      <figure>
        <img
          src="/images/forest-800.jpg"
          srcset="/images/forest-400.jpg 400w, /images/forest-800.jpg 800w"
          sizes="(max-width: 480px) 100vw, 400px"
          alt="Sunlight filtering through an ancient redwood forest"
          width="800"
          height="600"
          loading="lazy"
        >
        <figcaption>Redwood National Park, California — 2024</figcaption>
      </figure>

      <figure>
        <img
          src="/images/desert-800.jpg"
          alt="Sand dunes at sunset in the Sahara Desert"
          width="800"
          height="600"
          loading="lazy"
        >
        <figcaption>Sahara Desert, Morocco — 2024</figcaption>
      </figure>
    </section>
  </body>
</html>

6. Common Mistakes

❌ Missing alt attribute entirely

<img src="photo.jpg">

✓ Always include alt (even if empty for decorative images)

<img src="photo.jpg" alt="Team at the annual company picnic">

❌ Redundant alt text starting with “image of”

<img src="dog.jpg" alt="Image of a dog">

✓ Describe the content, not the medium

<img src="dog.jpg" alt="Golden retriever puppy playing in autumn leaves">

7. Try It Yourself

▶ Try It Yourself

8. Quick Reference

Attribute	Values	Notes
`src`	URL or path	Required; image source
`alt`	Descriptive text or “”	Required for accessibility
`width` / `height`	Integer (pixels)	Prevents layout shift
`loading`	`lazy` \| `eager`	Defer offscreen images
`srcset`	Comma-separated URL+descriptor list	Responsive images
`sizes`	Media condition + size	Hints for srcset selection
`<picture>`	Wrapper element	Art direction and format switching

HTML Images

HTML Images

1. Introduction

2. Concept

Key img Attributes

3. Basic Example

4. How It Works

Step 1 — The src Attribute

Step 2 — The alt Attribute

Step 3 — width and height Prevent Layout Shift

Step 4 — srcset and sizes for Responsive Images

5. Real-World Example

6. Common Mistakes

7. Try It Yourself

8. Quick Reference

9. Quiz

🧠 Test Yourself

HTML Images

1. Introduction #

2. Concept #

Key img Attributes #

3. Basic Example #

4. How It Works #

Step 1 — The src Attribute #

Step 2 — The alt Attribute #

Step 3 — width and height Prevent Layout Shift #

Step 4 — srcset and sizes for Responsive Images #

5. Real-World Example #

6. Common Mistakes #

7. Try It Yourself #

8. Quick Reference #

9. Quiz #

🧠 Test Yourself #

📚 More in this Tutorial Series

1. Introduction

2. Concept

Key img Attributes

3. Basic Example

4. How It Works

Step 1 — The src Attribute

Step 2 — The alt Attribute

Step 3 — width and height Prevent Layout Shift

Step 4 — srcset and sizes for Responsive Images

5. Real-World Example

6. Common Mistakes

7. Try It Yourself

8. Quick Reference

9. Quiz

🧠 Test Yourself