Make responsive images
Send one source image and get the same picture at every width your layout needs, with a ready-to-paste srcset line, so a phone never downloads a desktop-sized hero image. Choose your own widths or use defaults for common breakpoints. You pay per use, with no subscription.
This task is not available right now, so it cannot be purchased. Nothing is charged for it.
How it works & APIA responsive image tag isn't one file, it's a family of files — the same picture rendered at half a dozen widths so a phone doesn't download a desktop-sized hero.
The gap between a design system and a real image pipeline
Every serious front-end has agreed on breakpoints — the widths at which layout changes and images need to be re-served at a different size. The srcset and sizes attributes exist specifically to let a browser pick the right file for its viewport, but that only works if all those files actually exist somewhere.
What one request produces
You send a single source image and a list of target widths, or accept our sensible defaults covering common breakpoints, and the task generates one correctly proportioned file per width, preserving aspect ratio unless you specify otherwise. The response includes each generated file's URL along with a ready-to-use srcset string, so the output isn't just a pile of images, it's markup you can paste directly into an img or picture tag.
Why srcset exists in the first place
For most of the web's history, images were served at one fixed size regardless of the device requesting them, which meant phones on cellular connections downloaded the same multi-megabyte hero image as a desktop on fiber. The srcset attribute, standardized as part of responsive images work in the mid-2010s, finally let a single img element offer several candidate files and let the browser choose based on its own viewport and pixel density, but the browser can only choose from files that were actually generated ahead of time.
What you can do with it
Blog featured images
A publishing platform generates the full responsive set for an author's uploaded featured image the moment a post is saved, so the article renders correctly on any device without extra editorial steps.
E-commerce hero and product photos
An online store generates the srcset for each product's main photo as soon as it's uploaded, so mobile shoppers never download a desktop-resolution image over a slow connection.
Marketing landing page banners
A marketing team building a new landing page generates a complete responsive image set for the hero banner in one call instead of manually exporting six sizes from a design tool.
FAQ
What does the responsive image api actually return?
A set of correctly resized image files at the widths you specify, plus a ready-to-use srcset string that references all of them, so you can paste the output straight into your markup.
Can I choose my own breakpoints?
Yes, you provide the list of target widths, or you can use the sensible defaults covering common device breakpoints if you don't need custom ones.
Does it also generate the sizes attribute?
The response focuses on the srcset itself; the sizes attribute depends on your layout, so you pair it with the widths you already know for your breakpoints.
Is there a free tier for the responsive image api?
There's no free tier — free tiers get abused and slow everyone down. No subscription, no tokens, no invented credits, and a failed task is never charged.
What happens if one target width fails to generate?
The task retries automatically up to three times per file; a failure that can't be resolved is reported clearly and never billed.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
One authenticated POST creates the task; the result comes back by webhook or a signed link. This capability is currently available through the API, not as an interactive Web tool.
Call it from your stack
curl -X POST https://api.kit.forhosting.com/image/responsive-set \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"image":"https://ejemplo.com/imagen.jpg"}'const res = await fetch("https://api.kit.forhosting.com/image/responsive-set", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"image": "https://ejemplo.com/imagen.jpg"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/responsive-set",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"image": "https://ejemplo.com/imagen.jpg"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/responsive-set", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"image":"https://ejemplo.com/imagen.jpg"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"image":"https://ejemplo.com/imagen.jpg"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/responsive-set", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"image": "https://ejemplo.com/imagen.jpg"
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.responsive_set",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Limits
max_mb | 15 |
max_megapixels | 12 |
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
This endpoint generates that whole family from a single source image in one request, srcset attribute included and ready to drop into your markup.
The gap between a design system and a real image pipeline
Producing them by hand for every uploaded image, at every breakpoint, for every new piece of content, is exactly the kind of repetitive work that belongs in an API call instead of a design task.
Where it lands in a content pipeline
This fits naturally right after an editor or user uploads an image, whether that's a blog's featured image, a product's hero photo, or a marketing page's banner: one call turns the single upload into the entire size family a modern front-end expects, delivered via webhook the moment it's ready. It's a natural companion to a CDN or storage step, since the generated files are meant to be served statically once produced, not regenerated on every page load.
How it differs from a plain batch resize
A batch resize call is for many different source images going to one target size; this endpoint is the mirror image, one source image going to many target sizes, and it's built around that specific shape, including the srcset formatting a batch call wouldn't produce on its own.
Integration use cases
User-generated content platforms
A community or social platform runs every user upload through this endpoint so feed images load fast on mobile without sacrificing quality on larger screens.
Technical questions
How is a responsive set priced?
$0.002 per request plus $0.005 per generated image, so a five-size set costs the base request fee plus five image charges.
How is this different from bulk resizing?
Bulk resize takes many source images to one target size; this endpoint takes one source image and produces many target sizes, formatted as a srcset.
How do I get the generated files back?
Via a signed webhook, which we recommend for production pipelines, or through a signed link valid for 24 hours after the task completes.