Responsive Image Srcset Generator
Build a responsive image srcset, the matching sizes attribute, and ready-to-paste img and picture markup. Choose width (w) or pixel-density (x) descriptors, point candidate URLs at a filename suffix, a query parameter, or a custom CDN template, and add AVIF or WebP sources.
How to generate a responsive image srcset
- Enter the base image URL or path.
- Pick width descriptors and list your candidate widths, or use density descriptors with a base width.
- Add sizes rules so the browser knows how wide the image renders at each breakpoint.
- Copy the generated srcset, sizes, or the full img or picture element.
Examples
Width descriptors with sizes
/images/hero.jpg, widths 640 1080 1920, 50vw above 1024px
srcset="/images/hero-640w.jpg 640w, /images/hero-1080w.jpg 1080w, /images/hero-1920w.jpg 1920w" sizes="(min-width: 1024px) 50vw, 100vw"
Density descriptors for an icon
/icons/star.png, base 48px, 1x 2x 3x
srcset="/icons/star-48w.png 1x, /icons/star-96w.png 2x, /icons/star-144w.png 3x"
Frequently asked questions
What is the difference between w and x descriptors?
Width (w) descriptors tell the browser each candidate's real pixel width so it can pick the best one for the layout and screen, and they need a sizes attribute. Density (x) descriptors just map files to 1x, 2x, 3x screens and are best for fixed-size images like icons or logos.
Why do I need a sizes attribute?
With width descriptors the browser chooses a candidate before layout, so it needs to know how wide the image will display. The sizes attribute gives that as CSS lengths per breakpoint, for example (min-width: 1024px) 50vw, 100vw. Without it the browser assumes 100vw.
Does this resize my images?
No. It only generates the markup that references your resized files. You still need to produce the actual width variants, whether that is at build time, with an image CDN, or by hand.
How are the candidate URLs built?
Choose suffix to insert -640w before the extension, query to append ?w=640, or a custom template with {name}, {ext} and {w} placeholders for your CDN. For AVIF and WebP sources the extension or a format parameter is swapped automatically.
When should I use the picture element instead of img?
Use a plain img with srcset for serving the same image at different resolutions. Use picture when you also want to offer modern formats like AVIF and WebP with a fallback, or to swap the art direction at different breakpoints.
Is my input sent to a server?
No. The markup is generated entirely in your browser, so nothing you enter leaves your device.
Related tools
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
Data URI Generator
Turn text, SVG or HTML into a data: URI. Pick base64 or compact URL encoding and copy ready-made CSS background and HTML img snippets. Runs in your browser.
Lorem Picsum URL Builder
Build picsum.photos placeholder image URLs. Set width, height, grayscale, blur, a seed or image id, then copy the URL and preview it live.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
ASCII Table
Full ASCII table for all 128 codes with decimal, hex, octal and binary values, character names and descriptions. Search by code, hex or character.
Aspect Ratio Box Generator
Generate CSS for a responsive aspect-ratio container. Use the modern aspect-ratio property or the padding-top fallback, then copy the ready code.