Skip to content
Randozi
All wheelsTools

Srcset & Sizes Generator

List the image widths you export and how wide the image is on screen. Get the srcset and sizes attributes plus a ready-to-paste img or picture block.

HTML output

srcset

photo-320.jpg 320w, photo-480.jpg 480w, photo-640.jpg 640w, photo-960.jpg 960w, photo-1280.jpg 1280w, photo-1600.jpg 1600w

sizes

(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 800px

HTML

<img src="photo-1600.jpg"
  srcset="photo-320.jpg 320w, photo-480.jpg 480w, photo-640.jpg 640w, photo-960.jpg 960w, photo-1280.jpg 1280w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 800px"
  alt="Describe the image"
  loading="lazy"
  decoding="async">

The generator only writes the markup. You still export the image files at these widths yourself. Nothing you type is sent anywhere.

How it works

  1. Enter the width of your largest image file and the widths of the smaller versions you export.
  2. Write the layout rules: at screens up to 600 px wide the image takes 100vw, and so on, plus a default size.
  3. Set your file name template with {w} where the width goes, like photo-{w}.jpg.
  4. Copy the srcset, the sizes or the full HTML block.

What people use it for

  • Faster pages

    Let phones download a 480 px file instead of a 1600 px one and save bandwidth.

  • Sharp images on high-density screens

    Offer several widths so retina displays can pick a larger file when they need it.

  • Blog and CMS templates

    Generate the markup once and reuse it across your templates and components.

Questions

What do srcset and sizes do?
srcset lists your files with their real pixel widths (320w, 640w…). sizes tells the browser how wide the image will be on screen at each viewport width. The browser multiplies that by the screen density and downloads the smallest file that is still sharp.
How are the sizes rules read?
Each line like “600 = 100vw” means: when the viewport is 600 px wide or less, the image is 100vw wide. Rules are sorted from small to large and turned into (max-width: 600px) 100vw conditions. The default size applies above the last rule.
Why is my largest width added or some widths dropped?
The largest image width is always included, because that file is the sharpest one you have. Widths above it are dropped, since you cannot make a file sharper than the original. The tool lists the dropped widths.
What does the picture option add?
It wraps the image in a picture element with a WebP source built from the same template (the extension becomes .webp). Browsers that support WebP use it; the others fall back to the img file. You still have to export the files yourself.