What is the srcset attribute and why do I need it?

The srcset attribute lets you list multiple image variants at different widths. The browser automatically picks the most appropriate size based on the device's viewport width and pixel density, reducing bandwidth and improving page load speed — a key factor for Core Web Vitals (LCP).

What does the sizes attribute do?

The sizes attribute tells the browser how wide the image will be rendered in CSS pixels at each breakpoint before it downloads the image. Without sizes, the browser assumes the image is 100vw wide and may download a much larger file than needed.

What image formats should I use in srcset?

WebP offers excellent compression and is supported by all modern browsers. AVIF offers even better compression and is supported by Chrome, Firefox, and Safari 16+. Use WebP as your default and AVIF for further savings. Always provide a fallback src for older browsers.

How does browser image selection work?

The browser evaluates the sizes attribute to determine the image's layout width in CSS pixels, multiplies it by the device pixel ratio (DPR), then picks the smallest srcset entry whose width descriptor is greater than or equal to that number. Our preview simulates this logic at common viewport sizes.

Do I need to generate the image files at those widths?

Yes — you need actual image files at each width listed in srcset. You can generate them with image processing tools (Sharp, ImageMagick, Squoosh), your CDN's image transformation API, or Next.js Image Optimization. This generator creates the HTML attributes; the image files are a separate build step.

Is this tool free and does it upload my images?

Completely free and 100% client-side. No images are uploaded or processed on a server. All attribute generation and preview calculations happen in your browser.

Responsive Images

Generate Image
srcset & sizes

Stop guessing responsive image attributes. Enter your image widths, define sizes rules, and instantly get copy-ready srcset and sizes HTML — with a live preview of what the browser picks at every viewport.

📐

srcset with w Descriptors

Define any set of image widths and get the correct srcset attribute with pixel-width descriptors in seconds.

📱

sizes Media Query Builder

Build layered sizes rules with media queries. See exactly which size applies at mobile, tablet, and desktop breakpoints.

🔍

Browser Selection Preview

Simulate browser image selection at 375 px, 768 px, 1280 px, and 1920 px viewports — including DPR-aware logic.

Image Widths (srcset)

320w640w768w1024w1280w1920w

Base URL

Format

Alt Text

Sizes Rules

Rules are evaluated top to bottom. The last entry without a media query is the default fallback.

Browser Selection Preview

Mobile (375px)

640w

needs 375px

100vw

Tablet (768px)

640w

needs 384px

50vw

Desktop (1280px)

640w

needs 422px

33vw

Large (1920px)

640w

needs 634px

33vw

srcset attribute

/images/hero-320w.webp 320w,
  /images/hero-640w.webp 640w,
  /images/hero-768w.webp 768w,
  /images/hero-1024w.webp 1024w,
  /images/hero-1280w.webp 1280w,
  /images/hero-1920w.webp 1920w

sizes attribute

(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw

Complete `<img>` tag

<img
  src="/images/hero-320w.webp"
  srcset="/images/hero-320w.webp 320w,
  /images/hero-640w.webp 640w,
  /images/hero-768w.webp 768w,
  /images/hero-1024w.webp 1024w,
  /images/hero-1280w.webp 1280w,
  /images/hero-1920w.webp 1920w"
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
  alt="Responsive image"
  width="320"
  loading="lazy"
  decoding="async"
/>

Frequently Asked Questions

Everything you need to know about Image Srcset Generator.

Generate Imagesrcset & sizes

srcset with w Descriptors

sizes Media Query Builder

Browser Selection Preview

Image Widths (srcset)

Sizes Rules

Browser Selection Preview

srcset attribute

sizes attribute

Complete <img> tag

Frequently Asked Questions

Generate Image
srcset & sizes

Complete `<img>` tag