srcset vs CSS Media Queries for Responsive Images

srcset vs CSS Media Queries

Both HTML srcset and CSS media queries can serve different images at different viewport sizes, but they work fundamentally differently.

HTML srcset: Advisory Hints

<img
  srcset="photo-320w.jpg 320w,
          photo-640w.jpg 640w,
          photo-1024w.jpg 1024w"
  sizes="100vw"
  alt="Photo"
/>

The browser treats srcset as advisory — it considers the widths, DPR, network conditions, and cache state to choose an image. It may serve a cached larger image even when a smaller one would suffice.

CSS Media Queries: Deterministic Rules

.hero { background-image: url("hero-640w.jpg"); }

@media (min-width: 641px) {
  .hero { background-image: url("hero-1024w.jpg"); }
}

@media (min-width: 1025px) {
  .hero { background-image: url("hero-1536w.jpg"); }
}

CSS media queries are deterministic — the browser will always download exactly the image matching the current condition.

Key Differences

Feature	srcset	CSS Media Queries
Selection	Advisory (browser decides)	Deterministic (rule-based)
DPR awareness	Automatic	Must add min-resolution
Lazy loading	Native loading="lazy"	Requires JavaScript
Accessibility	alt attribute	No alt text
SEO	Indexed by crawlers	Not indexed
Preloading	<link rel="preload" imagesrcset>	<link rel="preload"> (single)
Network adaptation	Browser may downscale	No adaptation

When to Use Each

Use HTML srcset when:

• The image is content (not decoration)
• You need accessibility (alt text)
• You want SEO indexing
• You need native lazy loading
• The image shows the same content at all sizes

Use CSS media queries when:

• The image is purely decorative
• You need art direction (different images)
• The image is a background
• You need deterministic control over which file loads

The Hybrid Approach

Use <picture> with media attributes for content images that need art direction — this combines HTML accessibility with deterministic media query selection:

<picture>
  <source media="(min-width: 1024px)" srcset="hero-wide.webp" />
  <source media="(min-width: 640px)" srcset="hero-square.webp" />
  <img src="hero-portrait.webp" alt="Hero" />
</picture>