Responsive Image srcset Generator
Generate srcset and sizes markup, with a WebP source and correct width and height so the layout never shifts.
Generate srcset and sizes markup so browsers download the smallest image that still looks sharp.
What the browser will pick
Never lazy load the image at the top of the page. It delays the largest contentful paint, which is a ranking signal.
The width and height attributes are what reserve space before the image loads, which is how you stop the layout shifting.
<img
src="/images/hero-1600w.jpg"
srcset="/images/hero-400w.jpg 400w,
/images/hero-800w.jpg 800w,
/images/hero-1200w.jpg 1200w,
/images/hero-1600w.jpg 1600w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="Team working at a shared desk"
width="1600"
height="900"
decoding="async" loading="lazy"
/>About the responsive image srcset generator
Images are usually the largest thing on a page, and serving one image to every screen means phones download a file sized for a desktop monitor. srcset lets the browser choose, and the browser is better at choosing than any script, because it knows the screen, the density and the connection.
The sizes attribute is the part people get wrong. Without it the browser assumes the image fills the viewport and picks a file that is too large, which undoes most of the benefit.
How to use it
- 1Enter the image path, using {w} where the width goes.
- 2List the widths you have available.
- 3Choose how the image is laid out on the page.
- 4Turn off lazy loading for anything above the fold.
- 5Copy the img tag, or the picture element with a WebP source.
Questions
What does the sizes attribute do?
It tells the browser how wide the image will be displayed, before CSS has loaded. Without it the browser assumes full viewport width and downloads a file larger than needed.
Should I lazy load every image?
No. Never lazy load the image at the top of the page. It delays the largest contentful paint, which is a Core Web Vitals metric and a ranking signal.
Why do width and height still matter?
They let the browser reserve the right space before the image arrives, which is what prevents the page jumping as it loads. That jump is measured as cumulative layout shift.
How many widths should I offer?
Three or four covering your real range. Keep the gaps under about twice the previous width, or some screens end up with a noticeably oversized file.