HTML Academy · Lesson

Responsive Images with srcset and sizes

Serve appropriately sized images to different screen densities.

Responsive Images with srcset and sizes is a free HTML Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The Problem with Single Images

A single large image served to all devices wastes bandwidth on small screens:

A phone with a 390px screen does not need a 2400px image
A 4K monitor deserves a higher-resolution image than 96dpi
Responsive images serve the right image for the right screen

The srcset Attribute

srcset provides a list of image sources with their widths:

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg  400w,
    photo-800.jpg  800w,
    photo-1600.jpg 1600w
  "
  alt="Mountain landscape"
>
<!-- 400w, 800w, 1600w = intrinsic widths of each file -->
<!-- Browser chooses the best match for the device -->
<!-- src is the fallback for browsers that don't support srcset -->

Pixel Density Descriptors

Use 1x, 2x, 3x descriptors for fixed-size images at different resolutions:

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Coddy logo"
  width="120"
  height="40"
>
<!-- 2x screens (Retina) get logo@2x.png -->
<!-- 3x screens (iPhone Pro) get logo@3x.png -->
<!-- 1x screens get logo.png -->

The sizes Attribute

sizes tells the browser how wide the image will be displayed at different viewport sizes:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Landscape photo"
>
<!-- At ≤600px viewport: image takes 100% of viewport width -->
<!-- At ≤1200px viewport: image takes 50% -->
<!-- Otherwise: image is 800px wide -->

How the Browser Selects an Image

The browser calculates: sizes value × device pixel ratio to pick from srcset:

600px viewport, 2× DPR, size=100vw → needs 1200px image → picks 1600w
1200px viewport, 1× DPR, size=50vw → needs 600px image → picks 800w
Once loaded, browser caches and may not reload

Default sizes Value

Without sizes, the browser assumes the image takes the full viewport width (100vw):

<!-- Without sizes: browser assumes 100vw -->
<!-- This causes it to download a very large image on wide screens -->
<!-- Always specify sizes if your image is not full-width -->

<img
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="100vw"  <!-- explicit full-width -->
  src="hero-1600.jpg"
  alt="Hero image"
>

srcset Width Descriptors vs x Descriptors

Two modes of srcset:

Width descriptors (w) — with sizes: fluid, layout-aware selection
Pixel density descriptors (x) — fixed-size images at multiple resolutions

Use w descriptors for most responsive images. Use x for icons, logos, and fixed-size elements.

Generating srcset Files

Tools that generate responsive image variants:

Sharp (Node.js) — programmatic image resizing
Squoosh — browser-based, visual comparison
Cloudinary / Imgix — on-demand URL-based resizing
Webpack / Vite plugins — build-time generation

srcset with WebP and Fallback

Combine srcset with <picture> for format fallback:

<picture>
  <!-- Modern browsers: WebP -->
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <!-- Fallback: JPEG -->
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    src="photo-800.jpg"
    alt="Mountain photo"
  >
</picture>

Art Direction vs Resolution Switching

Two types of responsive image problems:

Resolution switching — same image, different resolutions → use srcset + sizes
Art direction — different crop/composition on different screens → use <picture> with <source media>

Testing Responsive Images

How to verify your srcset is working:

Open DevTools → Network tab → filter Images
Set device emulation to different viewport sizes and DPRs
Reload — check which file the browser requests
Also check: Lighthouse → Performance → Properly sized images audit

srcset Browser Support

Browser support for srcset is excellent:

Supported in all modern browsers (Chrome, Firefox, Safari, Edge)
The src fallback handles old browsers
No polyfill needed for production use

Quick Check

What does the sizes attribute tell the browser?

Recap: srcset and sizes

Responsive image essentials:

srcset — list of image files with their intrinsic widths or pixel densities
sizes — media conditions describing how wide the image will display
Browser selects best match: sizes value × device DPR
Width descriptors (w) for fluid images; x for fixed-size elements
Always provide src as a fallback

Frequently asked questions

Is the “Responsive Images with srcset and sizes” lesson free?

Yes — the full text of “Responsive Images with srcset and sizes” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “Responsive Images with srcset and sizes”?

Serve appropriately sized images to different screen densities. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Responsive Images with srcset and sizes” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy