Image Load Lab

Responsive Image Srcset Builder

Generate img markup with srcset, sizes, width and height from your layout, and see how accurate its size estimate was on 13 photos.

Last updated

Build a responsive image candidate list

This tool creates markup and estimates candidate transfer sizes with a declared pixels-to-bytes ratio. It does not compress files or predict the browser's exact choice.

<img src="studio-photo-1600.webp" width="1600" height="1067" alt="Describe the image">

Enter your values, then generate the candidate list.

How to use it

  1. Base filename and extension: the name pattern of your exported files, for example desert and webp for desert-480.webp, desert-768.webp and so on.
  2. Candidate widths: the widths you will actually export, separated by commas. Cover the slot width at 1× and at 2× (and 3× only where detail matters).
  3. Sizes rule: how wide the image is displayed at each viewport, from narrowest to widest. For a centred column with 16 pixels of padding and a 760-pixel maximum, that is (max-width: 792px) calc(100vw - 32px), 760px.
  4. Original width, height and file size: used for the width and height attributes (so the layout does not shift) and for the size estimate.
  5. Click Generate markup, then Copy.

A worked example from our srcset test

Screenshot of the srcset builder with the desert photo values filled in and the generated img markup with five srcset candidates, sizes, width and height
The srcset builder on this page with the inputs from our srcset test, captured in Chrome 155.

These are the inputs we used for the desert photo in our srcset and sizes test: five WebP candidates from 480 to 2,400 pixels, a 2400 × 1350 original of 140.3 KB, and the column rule above. The tool produced this markup:

<img
  src="desert-2400.webp"
  srcset="desert-480.webp 480w,
  desert-768.webp 768w,
  desert-1024.webp 1024w,
  desert-1600.webp 1600w,
  desert-2400.webp 2400w"
  sizes="(max-width: 792px) calc(100vw - 32px), 760px"
  width="2400"
  height="1350"
  alt="Describe the image in context">

With that markup, Chrome downloaded the 768-pixel file (16 KB) on a desktop screen and the 1600-pixel file (64 KB) on a phone at 3× density, instead of 140 KB everywhere for a single large file. Replace the placeholder alt text with a description of what the image shows.

How good is the size estimate?

The tool estimates each candidate’s size by assuming bytes scale with pixel area. For the desert photo that worked well: it estimated about 6 KB for the 480-pixel file, and the real file was 6,598 bytes. But we checked the same assumption on all 13 photos used in our loading tests, comparing the estimate with the real WebP files:

Candidate width Median error of the estimate Worst case
480 px −32.6 % −72.6 %
768 px −24.3 % −61.8 %
1024 px −20.8 % −53.1 %
1600 px −12.7 % −31.5 %

A negative error means the real file was larger than estimated. Small versions of detailed photos keep proportionally more detail per pixel, so they compress less well than their area suggests. Treat the estimate as a lower bound and measure the exported files before you set a byte budget. The data is in Download srcset-estimate-check.csv (52 rows, 1.6 KB).

What this tool does not do

  • It does not create or compress the files; export them with an image editor, a build script or our image optimizer.
  • It does not predict which candidate a browser will choose. Browsers decide from the viewport, density, zoom and cache, so check currentSrc in DevTools on the real page.
  • It writes the markup for one image; WordPress users get srcset automatically, as our WordPress size audit shows, and mainly need to check the sizes value.