Interactive demo

Responsive helper mixer

Generate srcSet and sizes strings with live helper output.

Quality78

Max width

Default size

const srcSet = createSrcSet({
  src: 'https://images.unsplash.com/photo-1493246507139-91e8fad9978e?w=1200&q=82',
  widths: [320, 640, 960, 1280],
  quality: 78
})

const sizes = createSizes({
  breakpoints: [
    { media: '(max-width: 700px)', size: '100vw' },
    { media: '(max-width: 1100px)', size: '72vw' }
  ],
  defaultSize: '680px'
})
<Image
  src="/photo.jpg"
  srcSet={srcSet}
  sizes={sizes}
  width="100%"
  height="100%"
  fit="cover"
  placeholder="skeleton"
  fadeType="zoom-blur"
/>