Responsive Image Srcset Generator
Generate <img srcset> and <picture> element HTML for responsive images with configurable breakpoints, formats, and sizes attribute.
About This Tool
The Responsive Image Srcset Generator is a free browser-based tool that helps web developers create properly formatted <img srcset> and <picture> element markup for responsive images. Instead of hand-writing complex srcset attributes and remembering the correct syntax for multiple image formats and breakpoints, you configure your settings through a visual interface and get production-ready HTML instantly.
Responsive images are a cornerstone of modern web performance. The srcset attribute tells the browser about available image widths, allowing it to select the optimal file for the current viewport and device pixel ratio. When combined with the sizes attribute, this can dramatically reduce page weight on mobile devices — often saving 50-80% of image bytes compared to serving a single large image to all devices.
The <picture> element goes further by supporting format negotiation. You can serve next-generation formats like WebP and AVIF to browsers that support them, with automatic fallback to JPEG or PNG. AVIF typically achieves 30-50% smaller files than JPEG at equivalent quality, while WebP offers 25-35% savings.
This tool generates both output modes: a simple <img> tag with srcset and sizes for basic responsive images, and a full <picture> element with multiple <source> tags for format-based art direction. It also includes modern loading attributes — loading="lazy" for below-the-fold images, decoding="async" for non-blocking decode, and fetchpriority="high" for hero images that are critical for Largest Contentful Paint (LCP).
If you are working on image optimization, you may also find our Image Compressor helpful for reducing file sizes, or the Image Resizer for generating multiple resolution variants. For broader performance work, the Preload Generator can help you preload critical hero images. Like every tool on DevToolbox, all processing happens entirely in your browser — no images or URLs are sent to any server.
How to Use
- Enter your Base Image URL — this is the path to your original image. The tool will generate variants by inserting width suffixes before the file extension (e.g.,
hero-640w.jpg). - Set the Alt Text for accessibility. This will be included in the generated
altattribute. - Choose an Output Mode:
<img srcset>for a simple responsive image, or<picture>for multi-format support with automatic format negotiation. - Select Image Formats (AVIF, WebP, PNG, JPG). For
<picture>mode, each format generates a<source>element. For<img srcset>mode, only the first selected format is used. - Configure Breakpoints by adding, removing, or editing width values. Default breakpoints cover common device widths: 320, 640, 768, 1024, 1280, and 1536 pixels. Adjust the file suffix if your image naming convention differs.
- Review the auto-generated Sizes Attribute, or toggle "Custom" to write your own responsive sizes (e.g.,
(max-width: 640px) 100vw, 50vw). - Set Loading (lazy/eager), Decoding (async/sync/auto), and Fetch Priority (auto/high/low) attributes. Click Copy (or press Ctrl+Shift+C) to copy the generated HTML to your clipboard.
FAQ
What is the difference between srcset and the picture element?
The srcset attribute on an <img> tag lets the browser choose from different resolution variants of the same image based on viewport width and device pixel ratio. The <picture> element wraps multiple <source> tags and an <img> fallback, enabling format negotiation (e.g., serving AVIF to Chrome and JPEG to older browsers) and art direction (different crops for different viewports). Use srcset for simple resolution switching; use <picture> when you need format selection or art direction.
What is the sizes attribute and why is it important?
The sizes attribute tells the browser how wide the image will be rendered at various viewport widths, before the image is downloaded. Without it, the browser assumes the image is 100vw (full viewport width) and may download a larger file than necessary. A proper sizes attribute like '(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw' helps the browser pick the smallest sufficient image from the srcset, saving bandwidth and improving performance.
Should I use AVIF or WebP for responsive images?
Ideally, use both via the <picture> element. AVIF offers better compression (30-50% smaller than JPEG) but encoding is slower and browser support is slightly less universal. WebP offers 25-35% savings with near-universal browser support. List AVIF first in your <source> tags so browsers that support it get the smallest files, with WebP as the next fallback, and JPEG/PNG as the final fallback for maximum compatibility.
What breakpoint widths should I use?
Common breakpoint widths align with popular device categories: 320px (small phones), 640px (large phones), 768px (tablets), 1024px (small laptops), 1280px (desktops), and 1536px (large monitors). However, the best approach is to choose widths based on your actual layout breakpoints rather than device widths. If your image is displayed at 50% width on desktop, you may not need a 1536px variant.
When should I use loading='eager' vs loading='lazy'?
Use loading='eager' (or omit the attribute) for images that are above the fold — visible in the initial viewport without scrolling. These are critical for Largest Contentful Paint (LCP). Use loading='lazy' for all below-the-fold images to defer their download until the user scrolls near them. For hero images, combine eager loading with fetchpriority='high' for maximum LCP performance.
How does the file suffix pattern work?
The tool inserts a suffix before the file extension in your base URL. For example, if your base URL is 'hero.jpg' and the suffix for 640px is '-640w', the generated URL becomes 'hero-640w.jpg'. You can customize suffixes to match your image pipeline — for example, using '@2x' for retina images or '-sm'/'-md'/'-lg' for T-shirt sizing. The suffix is fully editable per breakpoint.
Is my data safe?
Yes. All HTML generation happens entirely in your browser using client-side JavaScript. No image URLs, configurations, or any other data is transmitted to any server. It is completely safe to use with internal URLs, staging environments, or any other sensitive configuration.
Related Tools
Image Resizer
Resize images in the browser with custom dimensions. Maintain aspect ratio, choose output format, and batch process multiple files.
Image Compressor
Compress images in your browser with quality and resize controls. Compare file sizes before and after.
CSS @media Query Builder
Build CSS media queries visually with support for width, height, orientation, and more.
Meta Tag Generator
Generate HTML meta tags, Open Graph, and Twitter Card tags with live SNS preview.
Preload / Prefetch Generator
Generate HTML preload, prefetch, preconnect, and dns-prefetch link tags with best practice validation.