Developer tools
One upload, every width and format
Get 480, 768, 1080, 1440 and 1920 px versions in AVIF, WebP and JPEG, plus the <picture> markup with srcset and sizes — ready to paste.
Wider than the original are skipped; nothing is enlarged.
How wide it is shown — e.g. (min-width: 900px) 50vw, 100vw.
About this tool
srcset without the spreadsheet
A responsive image is five or six files in two or three formats and a block of markup that has to name every one of them correctly. This makes the whole set from one image in your browser — AVIF and WebP for modern browsers, JPEG as the fallback — never enlarging past the original, and writes the <picture> element with srcset, sizes, width, height and lazy loading. It suits Webflow, static sites and any CMS where you place images by hand.
- Free, no sign-up
- Runs in your browser
- Nothing uploaded
Every width, three formats
Pick the widths; each is encoded as AVIF, WebP and JPEG with the same encoders as the image compressor.
Markup that is right
A <picture> with type-specific sources, a sizes attribute you control, width and height to prevent layout shift, and loading="lazy".
Never upscaled
Widths larger than your original are skipped, so you never ship an enlarged, blurry file.
Step by step
How to create responsive images
Add your image
Drop a large source image — at least as wide as the biggest size you need.
Choose widths and formats
Keep the default 480–1920 px set or edit it, set the quality, and describe the layout in the sizes field.
Download and paste
Download the ZIP, upload the files, and paste the <picture> markup with your path prefix.
Get the most out of it
Tips for the best results
- Get sizes rightsizes tells the browser how wide the image is shown. A full-width hero is 100vw; a two-column card might be (min-width: 900px) 50vw, 100vw.
- Mind the file namesSet the base name and path prefix to match where you will upload, so the markup works as pasted.
- Keep the fallbackJPEG is only downloaded by browsers that understand neither AVIF nor WebP — it costs nothing to include.
- Do not lazy-load the heroTurn lazy loading off for the first image on the page; it is usually the Largest Contentful Paint.
Keep going
More free developer tools
Questions
Questions about this tool
Everything here runs in your browser — nothing you add is uploaded. More in the general FAQ.
What sizes should a responsive image have?
A spread that covers phones to large desktops: 480, 768, 1080, 1440 and 1920 px is a good default. The browser picks the smallest file that is sharp for the screen and layout, using srcset and sizes.
What is the difference between srcset and <picture>?
srcset lists the same image at several widths and lets the browser choose. <picture> adds a choice of formats on top: AVIF for browsers that support it, WebP next, JPEG as the fallback. This tool writes both together.
Do I need AVIF and WebP and JPEG?
AVIF is smallest, WebP is a little larger and decodes everywhere modern, and JPEG is the fallback for anything else. Browsers download only one, so including all three costs nothing for visitors.
How do I use this in Webflow?
Webflow generates its own srcset for images in the asset manager. Use this for images placed in an Embed element or a CMS rich-text field, or for full control over formats and widths.
Is my image uploaded?
No. Every size and format is encoded in your browser with WebAssembly, and the ZIP is built on your device.