Images and Responsive Images

Introduction

Images carry logos, diagrams, product photos, and screenshots. The <img> element is simple to write but easy to get wrong—broken paths, missing alt text, and oversized files hurt accessibility, SEO, and performance. This chapter covers src, alt, dimensions, common formats, and responsive techniques with srcset, sizes, and <picture>.

Prerequisites

• Links and navigation
• A practice folder with an images/ subfolder
• Local preview with Live Server or similar

The <img> Element

<img src="images/team-photo.jpg" alt="Five engineers reviewing a whiteboard">

<img> is an empty element—no closing tag and no child content.

src Paths

Same rules as links:

<!-- Same folder -->
<img src="logo.png" alt="Site logo">
 
<!-- Subfolder -->
<img src="images/hero.webp" alt="Product on a desk">
 
<!-- Parent folder -->
<img src="../shared/icon.svg" alt="">
 
<!-- Absolute URL -->
<img src="https://cdn.example.com/banner.jpg" alt="Summer sale">

Organize assets predictably:

project/
├── index.html
└── images/
    ├── logo.png
    ├── hero.webp
    └── diagram.svg

alt Text

alt describes the image for people who cannot see it and for search engines.

Informative images

Describe what matters:

<img
  src="images/chart-sales.png"
  alt="Bar chart showing sales rising from Q1 to Q4"
>

Decorative images

If the image adds no information (pure decoration), use empty alt:

<img src="images/divider-wave.svg" alt="">

Do not omit alt on decorative images—some browsers treat missing alt as the filename, which is noisy for screen readers.

Functional images (icons in links)

When the image is the only content of a link or button, alt should describe the action:

<a href="search.html">
  <img src="images/search.svg" alt="Search">
</a>

If text already labels the control, use empty alt on the image:

<a href="search.html">
  <img src="images/search.svg" alt="">
  Search
</a>

Figures with Captions

Wrap image + caption when the image is referenced in the article:

<figure>
  <img
    src="images/dom-tree.png"
    alt="Diagram of HTML nodes forming a tree"
    width="640"
    height="360"
  >
  <figcaption>
    Figure 1. How the browser builds a DOM from HTML.
  </figcaption>
</figure>

<figure> is semantic grouping; <figcaption> is the visible caption.

Width and Height

HTML dimensions are in CSS pixels (not the file’s pixel density):

<img
  src="images/photo.jpg"
  alt="Office workspace"
  width="800"
  height="450"
>

Benefits:

• browser reserves space before the image loads (less layout jump)
• aspect ratio is known for responsive CSS later

If you only know width, derive height from the image’s aspect ratio:

height = width × (originalHeight / originalWidth)

CSS can scale the image down; HTML dimensions set the ratio.

Common Image Formats

Choose format by content, not habit. A photo as PNG is often unnecessarily large.

Lazy Loading

Defer off-screen images:

<img
  src="images/gallery-03.jpg"
  alt="Conference hallway"
  loading="lazy"
  width="600"
  height="400"
>

loading="lazy" is widely supported. Do not lazy-load the hero image at the top of the page—it should load immediately.

When src Fails

If the file is missing or blocked, the browser shows:

• broken image icon
• alt text (in many browsers)

You cannot style the broken icon with HTML alone. Fix the path or host the file correctly.

Responsive Images with srcset

One file stretched on all screens wastes bandwidth on phones. srcset offers multiple files; the browser picks one.

Density descriptors (1x, 2x)

For icons and logos on high-DPI screens:

<img
  src="images/logo.png"
  srcset="images/logo.png 1x, images/logo@2x.png 2x"
  alt="Acme Tools"
  width="120"
  height="40"
>

Width descriptors (w) and sizes

For photos that should change width by viewport:

<img
  src="images/hero-800.jpg"
  srcset="
    images/hero-400.jpg 400w,
    images/hero-800.jpg 800w,
    images/hero-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Team collaborating at a laptop"
  width="1200"
  height="675"
>

How to read it:

• 400w means “this file is 400 CSS pixels wide”
• sizes tells the browser how wide the image will be displayed
• the browser picks a reasonable file from srcset

Start simple: one src plus two or three widths in srcset is enough for learning projects.

<picture> for Art Direction

Use <picture> when you need different crops or formats, not just resolution:

The browser evaluates <source> elements and falls back to the final <img>. The <img> still needs alt and is the mandatory fallback.

WebP with JPEG fallback

<picture>
  <source srcset="images/product.webp" type="image/webp">
  <img
    src="images/product.jpg"
    alt="Wireless keyboard on a desk"
    width="600"
    height="400"
  >
</picture>

When You Do Not Need Responsive Images

Skip srcset / <picture> when:

• the image is tiny (icons under a few KB)
• only one size is ever shown
• you are prototyping locally

Add responsive markup when real users on phones download multi-megabyte hero photos.

Performance Habits

• Compress images before upload (build tools, Squoosh, image CDN)
• Serve appropriately sized files—not 4000px wide for a 400px slot
• Prefer WebP (with fallback) for photos on production sites
• Use SVG for logos and simple UI icons
• Set width and height to reduce layout shift

Mini Exercise

In your practice site:

1. Create images/ and add one photo and one icon (PNG or SVG).
2. Place a logo in the header with correct alt.
3. Add a <figure> with <figcaption> for a screenshot.
4. Add one loading="lazy" image below the fold.
5. Optional: add srcset with two widths for the photo.

Check the Network panel: how many kilobytes does each image cost?

FAQ

Can I use CSS background-image instead of <img>?

Yes for decoration. Content images belong in <img> so they have alt, can be saved, and appear in RSS/reader contexts. Decorative backgrounds can stay in CSS.

What if I forget alt?

Validators and accessibility tools flag it. Screen readers may read the filename—confusing and unprofessional.

Should width and height match the file’s pixel size?

They should match the display aspect ratio. CSS may scale the image; the ratio prevents layout jump.

Is srcset the same as CSS responsive design?

No. srcset picks which file to download. CSS picks how large it appears. They work together.

What comes next?

Audio, video, and iframe — <audio>, <video>, <track>, and embedding external content.