Image srcset Generator
Responsive img srcset/sizes and picture markup with AVIF and WebP.
About this tool
Enter your file naming pattern (with {w} for the width and {ext} for the format), the widths you've exported, how wide the image displays (sizes), its intrinsic dimensions and alt text. Choose a plain <img> or a <picture> with AVIF and WebP sources, and copy the markup.
How responsive images work
Serving one large image to every device wastes bandwidth on phones and looks soft on high-density screens. With srcset you list several versions with their real widths (hero-480.jpg 480w, hero-1200.jpg 1200w…), and with sizes you tell the browser how wide the image will be displayed at different viewport widths, for example (max-width: 768px) 100vw, 768px. The browser combines these with the device's pixel density to download the smallest file that still looks sharp. Wrapping it in <picture> with type="image/avif" and type="image/webp" sources serves modern formats, often 30–50% smaller than JPEG, to browsers that support them, with JPEG as the fallback. width and height attributes let the browser reserve space before the image loads, preventing layout shift (CLS). loading="lazy" defers off-screen images, while your main above-the-fold image should instead get fetchpriority="high" and no lazy loading to improve Largest Contentful Paint. Honest limits: the markup only works if you actually create each size and format. A sizes value that doesn't match your CSS makes browsers fetch larger files than needed. The image resizer, the image compressor and the aspect ratio calculator are related.
Frequently asked questions
What is srcset in HTML?
A list of image files with their widths, so the browser can pick the best size for the device.
What does the sizes attribute do?
It tells the browser how wide the image will display, so it can choose from srcset before the CSS loads.
Should I lazy-load my hero image?
No. Use fetchpriority="high" for the main above-the-fold image, and lazy-load the rest.
Is anything uploaded or fetched?
No. What you paste is processed in your browser, and nothing is fetched, stored or sent.