HTML Responsive Images Generator
One image for every screen is a waste. With srcset and sizes, the browser grabs the perfect size for each device, so phones do not download desktop-sized photos. List your image widths below and copy the ready-made markup.
So what are srcset and sizes?
They are two attributes you add to a normal img tag to make it responsive. Together they let the browser make a smart choice about which image file to download, based on the screen and how big the image will appear.
The srcset attribute
srcset is a comma-separated list of image files, each tagged with its real width using the w descriptor. The browser picks the smallest file that still looks sharp.
<img src="img-400.jpg" srcset="img-200.jpg 200w, img-400.jpg 400w, img-800.jpg 800w" alt="Demo">
The sizes attribute
sizes tells the browser how wide the image will be shown at different viewport widths, so it can choose the right file before it even knows the final layout. It is a list of media conditions paired with a width.
sizes="(max-width: 600px) 100vw, 50vw"
This says: on screens up to 600px wide the image fills the viewport (100vw), otherwise it takes up half (50vw).
Why bother?
Faster on mobile
Phones download a small image instead of a giant desktop one, which means quicker loads and happier visitors.
Sharper on retina
High-density screens automatically pull a larger file, so your images never look soft or pixelated.
Less wasted data
Nobody pays for pixels they cannot see. You save bandwidth and your users save their data plan.
Better Core Web Vitals
Right-sized images improve your largest contentful paint, a metric Google actually ranks on.
How to use the generator
- Set your fallback. The
srcis shown by older browsers that ignore srcset, so point it at a sensible middle size. - Add your sizes. For each image file, enter its URL and its real pixel width. Add as many as you have.
- Optional sizes attribute. Tick the box if your image is not always full width, then describe how wide it appears.
- Copy the markup. Grab the generated tag and paste it into your page. That is it.
Frequently asked questions
What is the srcset attribute?
It is a list of image files with their widths, like photo-800.jpg 800w. The browser reads it and downloads the most appropriate image for the screen, saving bandwidth.
What does the sizes attribute do?
It tells the browser how wide the image will be displayed at different viewport widths. The browser combines that with srcset to pick the best file before the layout is even known.
srcset or the picture element?
Use srcset and sizes to serve the same image at different sizes for performance. Use the picture element when you need a different crop on mobile or different formats like WebP with a JPEG fallback.
Do I still need the src attribute?
Yes. Keep src as a fallback for browsers that do not support srcset. Modern browsers will prefer the srcset list.
Further reading: the MDN responsive images guide, Google's web.dev serve responsive images, and Wikipedia on responsive web design.
Need those different sizes in the first place? Resize and compress your image in one go.
Open the Image Optimizer→