HTML srcset Attribute

Introduction

The srcset attribute is a core feature of responsive web design. It lets you list multiple image sources on an <img> or <source> element so the browser can pick the best file for the user’s screen width, layout slot, and pixel density—improving load time and sharpness.

Each entry in srcset is a URL plus a descriptor: 500w (image width in pixels) or 2x (pixel density). Always keep a fallback src for older browsers and as the default candidate.

What You’ll Learn

Purpose of srcset

The main purpose of the srcset attribute is to optimize image loading on different devices. Instead of sending one huge image to every phone, tablet, and desktop, you provide several files and let the browser choose the smallest one that still looks sharp.

By supplying multiple sources with width or density descriptors, developers ensure users receive a version suited to their display—better performance on slow networks and sharper images on high-DPI screens.

📝 Syntax

Comma-separated list of URL + descriptor pairs on <img>:

<img
  src="default.jpg"
  alt="Responsive photo"
  srcset="small.jpg 500w,
           medium.jpg 1000w,
           large.jpg 1500w"
  sizes="(max-width: 600px) 100vw, 800px">

Syntax Rules

• Each candidate: url descriptor separated by commas.
• w descriptor: intrinsic width of the file (e.g. 500w).
• x descriptor: pixel density (e.g. 1x, 2x).
• Do not mix w and x in the same srcset.
• Always include fallback src (usually a sensible middle size).
• Valid on <img> and <source> (inside picture).

💎 Values

The srcset attribute accepts a comma-separated list of image URLs with descriptors:

• Width (w) — photo-500.jpg 500w, photo-1000.jpg 1000w — file width in pixels.
• Density (x) — logo.png 1x, logo@2x.png 2x — for fixed display size.
• URL only — Without a descriptor (legacy; avoid in new code).

<!-- Width descriptors + sizes -->
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"

<!-- Density descriptors (fixed layout width) -->
srcset="icon.png 1x, icon-2x.png 2x"

How It Works

With 500w, 1000w, and 1500w, the browser compares each file’s width against the rendered size (from sizes and device pixel ratio) and downloads the smallest adequate image. The w value is the actual pixel width of the file, not the CSS width.

Applicable Elements

srcset vs src vs sizes

Examples Gallery

w descriptors with sizes, dynamic JavaScript updates, and x descriptors for Retina displays.

👀 Live Preview

An <img> with three width-based candidates in srcset:

Resize the window. The label on the SVG shows which candidate loaded.

Example — Responsive Image

A simple implementation with width descriptors:

srcset.html

Copy

<img
  src="default.jpg"
  alt="Responsive image"
  srcset="small.jpg 500w,
           medium.jpg 1000w,
           large.jpg 1500w"
  sizes="(max-width: 600px) 100vw, 800px">

View Output Try It Yourself

📤 Output:

The browser selects the image source that best fits the device width, pixel ratio, and sizes hint.

How It Works

In this example, the browser chooses among 500px, 1000px, and 1500px files based on how wide the image is displayed and the screen’s pixel density.

Dynamic Values with JavaScript

Update candidates when content or layout changes:

dynamic-srcset.html

Copy

<img id="dynamicImage" src="default.jpg" alt="Photo">

<script>
  var img = document.getElementById("dynamicImage");
  img.srcset = "new-small.jpg 500w, new-medium.jpg 1000w, new-large.jpg 1500w";
  img.sizes = "(max-width: 600px) 500px, (max-width: 1200px) 900px, 1400px";
</script>

View Output Try It Yourself

📤 Output:

The image with id dynamicImage gets new srcset and sizes values at runtime.

How It Works

In this script, srcset is replaced with new URLs and descriptors. Updating sizes together keeps width-based selection accurate after layout changes.

Example — Pixel Density (2x)

For fixed-size images like icons, use x descriptors:

srcset-x.html

Copy

<img
  src="logo.png"
  alt="Site logo"
  srcset="logo.png 1x, logo@2x.png 2x"
  width="200"
  height="80">

View Output Try It Yourself

📤 Output:

On Retina (2×) screens the browser loads logo@2x.png while keeping the same CSS dimensions.

How It Works

Density descriptors match device pixel ratio. Use them when the image always displays at the same CSS size; use w + sizes when width varies with layout.

♿ Accessibility

• One alt per img — srcset does not replace alt; describe the image once regardless of which file loads.
• Do not hide meaning in resolution — All candidates should show the same content; only resolution changes.
• Set width and height — Reserve space to reduce layout shift while the chosen file loads.
• Decorative images — Use alt="" when appropriate; srcset works the same.
• Art direction — When crops differ per breakpoint, use <picture> and ensure critical content remains visible.

💡 Best Practices