Responsive Image Srcset Generator
Generate srcset and sizes markup with the correct width descriptors, resize an image to every breakpoint in the browser, and see the bytes saved against serving one large file.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
One image for every screen wastes most of it
A 2400 pixel wide photograph served to a phone displaying it at 380 pixels wastes roughly nine tenths of the bytes downloaded, and the phone is usually the device paying for them on a metered connection. The srcset attribute lets the browser choose from several sizes, and it makes that choice knowing things the server cannot: the viewport width, the device pixel ratio, and in some cases the current network conditions.
The sizes attribute is the part that gets it wrong
srcset lists what is available; sizes tells the browser how wide the image will be displayed before any CSS has been applied. Getting sizes wrong is the single most common mistake, and the default when it is omitted is 100vw, which tells the browser the image fills the viewport. For an image in a 600 pixel column on a 1400 pixel screen, that default causes it to download something more than twice the size it needs.
Width descriptors, not pixel densities
The x descriptor form only handles device pixel ratio and assumes the image is always displayed at one size, which is true for a logo and false for almost everything else. The w descriptor form gives the browser the actual pixel width of each file and lets it combine that with the sizes attribute and the device pixel ratio to pick correctly. Use w for content images and x only for fixed-size assets.
Related tools
- EXIF Viewer — Extract hidden EXIF data (Camera, GPS, Settings) from images.
- Favicon Generator — Generate favicons and app icons at every required size from one source image, with the exact HTML to reference them.
- Placeholder Image Generator — Generate placeholder images at any size with custom colours and label text. Produced in your browser as downloadable files, no external hotlinking.
- Image Resizer — Resize images in your browser with aspect ratio control and format conversion. Files are processed locally and never uploaded.
Frequently Asked Questions
What is the difference between the w and x descriptors?
The x form describes pixel density only and assumes one display size, which suits a logo. The w form gives the actual pixel width of each file, letting the browser combine it with the sizes attribute and the device pixel ratio to choose correctly for any layout.
What does the sizes attribute do?
It tells the browser how wide the image will be displayed, before CSS has loaded and before layout. Omitting it defaults to 100vw, which usually makes the browser download an image far larger than needed.
How many sizes should I generate?
Usually four to six. Each adds build time and storage, and the gaps between them determine how much waste remains. Doubling widths is a reasonable rule, since it keeps the largest overshoot under about 40 percent.
Does the browser always pick the smallest suitable image?
No, and it is allowed not to. It may pick a larger file if one is already cached, or a smaller one on a slow connection. The specification deliberately leaves this to the browser, which is why srcset expresses what is available rather than what to use.
Should I still use width and height attributes?
Yes. They let the browser reserve the correct space before the image loads, which prevents layout shift. With srcset, set them to the intrinsic dimensions of any one of the sources; the aspect ratio is what matters.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Upload an image and set your layout widths to generate responsive image markup.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
EXIF Viewer
ImageExtract hidden EXIF data (Camera, GPS, Settings) from images.
Favicon Generator
ImageGenerate favicons and app icons at every required size from one source image, with the exact HTML to reference them.
Placeholder Image Generator
ImageGenerate placeholder images at any size with custom colours and label text. Produced in your browser as downloadable files, no external hotlinking.