Markup helper
Build a responsive image candidate list
This tool creates markup and estimates candidate transfer sizes with a declared pixels-to-bytes ratio. It does not compress files or predict the browser's exact choice.
<img src="studio-photo-1600.webp" width="1600" height="1067" alt="Describe the image">
Enter your values, then generate the candidate list.
Start from the CSS slot
Measure how wide the image renders at each layout state. Candidate files should cover those widths and relevant device pixel ratios without creating a dense ladder that is expensive to maintain.
Read the estimate honestly
The estimate assumes file size changes with pixel area and compression efficiency stays constant. Real images violate that assumption because detail, encoder behavior, chroma, metadata, and format differ. Generate the actual candidates, inspect them, and check currentSrc in the browser.
Keep the fallback
The generated markup includes a normal src, intrinsic dimensions, and an alt-text placeholder. Replace the placeholder with a contextual description, update height to the real aspect ratio, and verify the selected candidate on the live page.