Free tools › Images
Responsive image sizes
Up to eight widths from one upload, each named by its width and never enlarged — the set a srcset attribute wants.
More free conversions, where you upload. The Fylane extension does the same work inside any upload form, on its own free share every day.Add to Chrome
How to responsive image sizes
- Drop the image.
- Tick the widths you serve.
- Press Generate and download the set.
What happens to your file
One decode, then one encode per width, each resized with a Lanczos filter and written at the quality that format does best at. A width above the source is capped at the source — a 1280 asked of a 1200-pixel photo comes back 1200 wide — and the report names the real width of every file, so your srcset never declares a size that is not there.
This is the set a browser chooses from with `srcset` and `sizes`: it downloads the smallest file that fills the slot on that screen, which is most of what "make the images faster" turns out to mean.
Questions
Which widths should I pick?
For a full-width hero, 640, 1024, 1536 and 1920. For a card or a column, 320, 480, 640 and 768. Pick the two or three that bracket the sizes the layout actually renders at; more widths cost bandwidth in the wrong direction.
Why are some files smaller than the width I asked for?
Because the original was smaller. Enlarging would invent pixels and make the file bigger for nothing; the report tells you which widths were capped.
Can I do this from code?
Yes — image.variants in the API takes the same widths and format and answers with one artifact per width, which is how a build step or an upload handler would use it.
Do it once, not on every form
A form that wants a square JPEG under 240 KB says so on the page. The Fylane extension reads that, fits your photo to it, and puts it in the field — without you working out what 240 KB looks like.
And it keeps the result. The next application that asks for a résumé, a cover letter and a photo fills all three from one tap, each one refitted to what that site accepts.
Your files stay in the browser, encrypted, on your machine. Nothing is uploaded to keep them and nothing is sent anywhere to fill a form.
Related tools
Do this in code
curl -X POST https://api.fylane.dev/v1/jobs \
-H "Authorization: Bearer $FYLANE_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"file_id": "<file id>",
"operation": "image.variants",
"options": {
"widths": "320,640,1024,1920",
"format": "webp"
}
}'The same operation, image.variants — One image into up to eight responsive widths in one job. Upload first with the quickstart; every option is on the operations page. 500 free credits a month, then $5 per thousand.