Responsive Image Generator
Build img srcset and sizes attributes, or a picture element with WebP and AVIF sources, from a file name and widths.
Build responsive image markup
Runs in your browser. Describe the files you will export and the layout; the tool writes the srcset, sizes and picture markup.
- sizes
- (max-width: 640px) 100vw, (max-width: 1024px) 50vw, 720px
- Candidates
- 5 widths × 2 formats = 10 files
<picture> markup
<picture>
<source
type="image/webp"
srcset="images/hero-320.webp 320w,
images/hero-640.webp 640w,
images/hero-960.webp 960w,
images/hero-1280.webp 1280w,
images/hero-1920.webp 1920w"
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 720px">
<img
src="images/hero-1280.jpg"
srcset="images/hero-320.jpg 320w,
images/hero-640.jpg 640w,
images/hero-960.jpg 960w,
images/hero-1280.jpg 1280w,
images/hero-1920.jpg 1920w"
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 720px"
alt="Describe the image"
width="1920"
height="HEIGHT"
loading="lazy"
decoding="async">
</picture>Replace HEIGHT with the height of the largest file so the browser reserves the right box before the image loads.
Files to generate
Export the original at each width below, in each format, with exactly these names. Use your image editor's export, a build plugin such as sharp or vite-imagetools, or the Image Compressor on this site with the maximum width set to each value and the output format chosen. Never upscale: drop widths larger than the original.
images/hero-320.webp
images/hero-640.webp
images/hero-960.webp
images/hero-1280.webp
images/hero-1920.webp
images/hero-320.jpg
images/hero-640.jpg
images/hero-960.jpg
images/hero-1280.jpg
images/hero-1920.jpgWhat the Responsive Image Generator does
A phone with a 400-pixel-wide column does not need the 1920-pixel image you made for desktop, yet that is what a plain img tag delivers. The srcset attribute lists the same image at several widths and the sizes attribute tells the browser how wide the image will be displayed at each breakpoint; the browser then picks the smallest file that is sharp enough for the device. The syntax is easy to get wrong by hand, which is what this generator is for.
Give it the image URL or base name, the widths you will export (320, 640, 960, 1280 and 1920 by default) and how the file names are built, for example photo-640.jpg. Describe the layout in the sizes builder: a full-width image on small screens and a fixed column on wide ones becomes "(max-width: 768px) 100vw, 720px". Tick WebP or AVIF to get a picture element with a source per format, falling back to the original type for browsers that lack it.
The generator writes markup only. You still have to produce the files at those widths, with an image editor, a build plugin or the compressor on this site. The page explains the naming so your files and the markup match. Nothing is uploaded; it all runs in the browser.
Step by step
- 01Enter the image path or base name and its extension, and give the alt text.
- 02Adjust the widths list to the sizes you will actually export.
- 03Describe the layout in the sizes builder, from the smallest viewport to the largest.
- 04Tick WebP and AVIF if you will export those formats as well.
- 05Copy the markup and generate the files with the same names.
Common questions
Export them from your editor, use a build plugin such as sharp or a responsive-images loader, or run each width through the Image Compressor on this site with the maximum width set. Name them as the generator shows, for example hero-640.webp, so the markup points at real files.
srcset describes the files: each candidate with its real pixel width (640w). sizes describes the layout: how wide the image is displayed at each viewport width. The browser combines the two with the device pixel ratio to pick a file. If sizes is wrong the browser downloads the wrong size, so describe the layout honestly.
Use srcset alone when every candidate is the same format and only the size differs. Use picture when you offer modern formats (AVIF, WebP) with a fallback, or when the crop changes between breakpoints (art direction). The generator produces either.
Cover the displayed widths times the common pixel ratios of 1, 2 and 3. For an image that is 720 pixels wide at most, 360, 720, 1080, 1440 and 2160 fit. The defaults here suit a full-width hero. More than six candidates rarely help and multiply the files you must maintain.
Keep checking
Image Compressor
Compress and resize JPEG, PNG and WebP images in your browser; nothing is uploaded, download them one by one or all.
Free toolImage Lazy Load Generator
Add loading="lazy" and decoding="async" to your img tags, keep the first ones eager, with an IntersectionObserver fallback.
Free toolSVG Optimizer
Clean an SVG in your browser: editor metadata, comments, empty groups and long decimals out, preview before and after.
Free toolOpen Graph Tag Generator
Fill in a title, image, URL and description and get the Open Graph meta tags plus a preview of the share card.
Want these fixes done for you?
Our team runs the audit, makes the changes and reports the result.