Srcset Generator
Build a width-descriptor srcset and matching sizes attribute from explicit image candidates, then preview the final img markup. The browser still chooses the resource; the page does not resize or upload images.
Browser-localFreeNo upload required
What this tool is for
Build a width-descriptor srcset and matching sizes attribute from explicit image candidates, then preview the final img markup. The browser still chooses the resource; the page does not resize or upload images.
How to use
- Enter one absolute or relative image
URLand width per line. - Add a truthful sizes expression based on the rendered layout.
Generatemarkup and verify candidate ordering, intrinsic widths, and browser network choices on the real page.
Example
Provide hero-640.jpg 640w and hero-1280.jpg 1280w with `(max-width: 700px) 100vw, 700px` sizes.
FAQ
Does the tool create resized images?
No. Create and optimize each candidate separately.
Why is sizes required?
It tells the browser the expected rendered width before layout is complete.
Reproducible examples
Known inputs and expected results
Run these examples in the workspace above and compare the result with the documented output.
Width-descriptor pair
- Input
- hero-640.jpg 640w hero-1280.jpg 1280w
- Options
- sizes=(max-width: 700px) 100vw, 700px
- Action
Generatethe markup.- Expected output
- srcset="hero-640.jpg 640w, hero-1280.jpg 1280w" with the supplied sizes attribute.
- Explanation
- The browser uses sizes and device conditions to select a candidate.
Three responsive candidates
- Input
- /img/card-400.webp 400w /img/card-800.webp 800w /img/card-1200.webp 1200w
- Options
- sizes=(max-width: 600px) 100vw, 50vw
- Action
Generateand inspect ordering.- Expected output
- Candidates appear once in ascending width order with the provided sizes expression.
- Explanation
- The tool writes markup; it does not confirm that files exist or match the stated widths.
Error or unsupported case
Duplicate or mixed descriptors
- Input
- a.jpg 640w b.jpg 640w c.jpg 2x
- Expected error or limit
- Duplicate widths and mixed w/x descriptor modes are rejected.
- Safer alternative
- Choose one descriptor model and provide truthful unique intrinsic widths.
When not to use this tool
- Creating or optimizing image files
- Checking remote image pixels, file size, or availability
Algorithm and assumptions
Each bounded input row is parsed as URL plus positive width descriptor, widths must be unique, and the supplied sizes string is passed through for browser evaluation.
Input and output
Input is a list of URL/width candidates and a sizes expression. Output is srcset text and an img markup draft.
Supported formats and behavior
- Width descriptors
- Relative and absolute URLs
- Duplicate-width validation
Limits
- No image generation or file-size optimization
- No density-descriptor mode in this version
Edge cases and common errors
- Duplicate widths are rejected
- Spaces in URLs require encoding
- Incorrect intrinsic widths lead to poor browser selection
Release testing
Checks cover ordered/unordered candidates, duplicate widths, malformed lines, sizes output, copy, clear, and mobile controls.
Privacy boundary
The input and result stay in this browser session. ZZP Box does not upload or store the values entered in this tool.
Related reviewed tools
Choose the next tool by the operation you need, then review that page's stated input and limits.