Refract

Responsive image srcset generator

Drop in one large image and get every size your site needs, plus the srcset and sizes HTML to use them. Files are created on your device and downloaded as a ZIP.

Runs in your browser · files stay on your device
HTML


Files for the selected image
Sizes appear once files have been created. Widths larger than your original are never upscaled.




Settings
Widths










How to use the responsive image (srcset) generator


  1. Add your images. Drop in the largest version you have of each image. A sample photo is loaded so you can see the output first.
  2. Pick widths and a format. Tick the widths to create. WebP suits almost every site; the <picture> option adds an AVIF version where your browser can make one, and a JPEG fallback.
  3. Describe the layout. Tell Refract how wide the image appears on the page: full width, inside a content column, or in a grid. This writes the sizes attribute, which lets the browser pick the right file before the page has finished loading.
  4. Create the files and copy the HTML. Press Create files to download a ZIP containing every size and an HTML file with the markup. Upload the images to the folder you set, then paste the HTML into your page.


Why responsive images matter
A 2,400px photo looks great on a large monitor, but a phone only needs a file about a fifth of the size. Serving one huge image to everyone wastes data, slows down Largest Contentful Paint and drags down Core Web Vitals scores. With srcset you offer several widths and the browser downloads the smallest one that still looks sharp on that screen.
How srcset and sizes work together
srcset lists each file and its real width, such as hero-768w.webp 768w. sizes tells the browser how wide the image will be displayed, for example (max-width: 800px) 100vw, 800px. The browser combines the two with the screen’s pixel density to choose a file. Without an accurate sizes value, browsers assume the image fills the whole screen and often download a larger file than needed.
Width and height still matter
Adding width and height lets the browser reserve the right space before the image loads, so text doesn’t jump around (Cumulative Layout Shift). Style the image with max-width: 100%; height: auto; and it will still scale responsively. Don’t lazy-load the main image at the top of a page: it should start downloading straight away.


Frequently asked questions


Are my images uploaded?
No. Every size is created by your browser on your device, then zipped for you to download.
Which widths should I choose?
For most layouts, five or six widths between about 480px and 1,920px are plenty. Add 2,560px if the image is shown full width on large high-density screens.
Should I use srcset or the picture element?
Use srcset on a plain img tag when you only need different sizes. Use picture when you also want to offer different formats, such as AVIF with a JPEG fallback, or a different crop on small screens.
Why can’t I make AVIF files?
Creating AVIF needs encoder support in the browser. Chrome and Edge can do it; Safari and Firefox can display AVIF but can’t create it yet. WebP is a safe, small alternative.