Image Srcset Generator
Enter the size of your original image, the widths you want to export, and a file name pattern such as photo-{w}.jpg. The tool works out the height of every width, lists the file names, and writes the srcset value, the sizes value and a complete img tag with width, height, alt text and lazy loading. It flags any width that is larger than the original, because enlarging a picture adds file size and no detail. Quick buttons set common width lists and common sizes values. Everything runs in your browser.
{w} is the width and {h} the height.
| Width | Height | File |
|---|---|---|
| 320 | 180 | photo-320.jpg |
| 640 | 360 | photo-640.jpg |
| 960 | 540 | photo-960.jpgsrc |
| 1280 | 720 | photo-1280.jpg |
| 1920 | 1080 | photo-1920.jpglarger than the original |
One width is larger than your original of 1600 pixels. Enlarging a picture adds file size but no detail, so you may prefer to drop it.
Every variant keeps the proportions of the original, so the height is the width times the original height divided by the original width, rounded to a whole pixel. The srcset lists each file with its pixel width (the w value), and the sizes attribute tells the browser how wide the image will be shown, so it can pick the smallest file that still looks sharp on that screen. The src is the fallback for browsers that ignore srcset, and the width and height attributes are taken from it. This tool writes the markup only: you still need to export the files at these sizes, for example with the image resizer. Everything runs in your browser.
Related Tools
[5 suggestions]Image Resizer
Resize an image by width, height or percent, crop it to an exact size, and save it as PNG, JPEG or WebP, all in your browser.
Format ConversionAspect Ratio Calculator
Find the aspect ratio of any width and height, resize while keeping it, and get the CSS aspect-ratio rule.
Developer & WebImage Converter
Convert images between PNG, JPEG and WebP, shrink them with a quality setting and a maximum size, and download them one by one or all together.
Format ConversionImage to Base64 Converter
Turn an image into a Base64 data URI with ready-to-paste HTML, CSS and Markdown, or decode a data URI or Base64 text back into an image file.
Developer & WebCSS Clamp Generator
Generate a fluid clamp() value that grows between two sizes over a range of viewport widths, in rem or px, with a live preview and a size table.
Developer & WebAbout the Image Srcset Generator
Every variant keeps the proportions of the original, so its height is the width times the original height divided by the original width, rounded to a whole pixel. For a 1600 x 900 original, the widths 320, 640, 960, 1280 and 1920 give heights of 180, 360, 540, 720 and 1080, and the 1920 width is flagged because it is larger than the original. The srcset lists each file with its pixel width, for example photo-320.jpg 320w, and the sizes attribute tells the browser how wide the image will be shown, so it can pick the smallest file that still looks sharp on that screen. Without a sizes value the browser assumes the image fills the viewport width. The src attribute is the fallback for browsers that ignore srcset, and the width and height attributes are taken from it, which lets the browser reserve the right space before the picture loads. This tool writes the markup only. You still need to export the files at these sizes, for example with the image resizer, and you should turn lazy loading off for the main image at the top of the page.
What does srcset do?▾
It gives the browser a list of files for the same picture and their widths. The browser then picks the one that fits the screen size and pixel density, so small screens download smaller files.
What is the sizes attribute for?▾
It tells the browser how wide the image is displayed at different screen widths, which it needs before it can choose a file. If you leave it out, the browser assumes 100vw, the full viewport width.
Why add width and height attributes?▾
The browser uses them to work out the aspect ratio and reserve space before the picture loads, which stops the page from jumping. Use the real pixel size of the src file or at least the right proportions.
Should I make a file wider than the original?▾
Usually not. A larger copy has the same detail but a bigger file. The tool marks those widths so you can drop them.
Is my image uploaded?▾
No. You only type sizes, and the markup is built in your browser.