Responsive images
Responsive Image Srcset Builder
Enter the real image width and the widths it will display at. The tool builds srcset, sizes, and a copy-ready img tag in this browser.
Ready100/100
Image and breakpoints
Use CSS layout widths, not device widths only. 2x candidates are capped at the source image width.
Values stay in this browser. Files are not uploaded.
sizes slots
Leave max-width empty for the default slot. Order small viewports first.
| max-width (px) | Slot size | |
|---|---|---|
Generated markup
Export the files at the listed pixel widths, then paste this markup.
Width list
Each row is one file you should export. Widths never exceed the source image.
| Width | File | Descriptor |
|---|---|---|
| 320 | /images/hero-320.webp | 320w |
| 480 | /images/hero-480.webp | 480w |
| 640 | /images/hero-640.webp | 640w |
| 768 | /images/hero-768.webp | 768w |
| 960 | /images/hero-960.webp | 960w |
| 1024 | /images/hero-1024.webp | 1024w |
| 1280 | /images/hero-1280.webp | 1280w |
| 1536 | /images/hero-1536.webp | 1536w |
| 2048 | /images/hero-2048.webp | 2048w |
| 2560 | /images/hero-2560.webp | 2560w |