Make responsive images
A 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. This endpoint generates that whole family from a single source image in one request, srcset attribute included and ready to drop into your markup.
Run it online
Run this on our servers with your account. Free tools run in your browser; this one bills your KIT balance per the price above.
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. 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.
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.
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.
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.
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.
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. Access runs on a prepaid ForHosting KIT balance: top up from $10.00 (it never expires) and each request is charged at its published price, so a call with no balance returns HTTP 402. No subscription, no tokens, no invented credits, and a failed task is never charged.
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.
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.
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.
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
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, and soon from our app, email and Telegram.
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. |