srcSet without the fuss

Responsive Helpers

Generate deterministic srcSet and sizes strings when you have a CDN or image service.

createSrcSet and createSizes

The default helper appends w, q, and fm query parameters. Provide a custom loader for any CDN shape.

Generated srcSet: 4 candidatesGenerated sizes: (max-width: 640px) 100vw, (max-width: 1200px) 50vw, 640px

tsx

const srcSet = createSrcSet({
  src: '/images/home/feature1.jpg',
  widths: [480, 768, 1200, 1600],
  quality: 80
})

const sizes = createSizes({
  breakpoints: [
    { media: '(max-width: 640px)', size: '100vw' },
    { media: '(max-width: 1200px)', size: '50vw' }
  ],
  defaultSize: '640px'
})

Try the full demo

Open the focused Responsive helper mixer playground for the wider controls and live output.

Responsive helper mixer

Generate srcSet and sizes strings with live helper output.