Image API workflows
Responsive image variants with the Image API
Prepare image widths for your layout from one uploaded original, without sending your project key to the browser.
Which widths does the layout actually need?
Start with your rendered image slots and expected pixel densities. For example, a 400-pixel slot may need 400- and 800-pixel variants. Choose a small set of useful widths rather than generating every possible size; each transformation is subject to account usage and limits.
Avoid enlarging a small original: inspect its dimensions and choose appropriate widths. WebP is one option; select another supported format when your delivery requirements call for it. Smaller file sizes are not guaranteed by an encoder setting alone.
Build the workflow
- Upload one original and retain its image ID in your application.
- Make a separate authenticated request for each selected width. Inside preserves the aspect ratio within the supplied dimensions.
- Store or serve the returned bytes through your own application. Use your application's URLs in srcset and sizes; Imazeo does not supply public delivery URLs.
Request the output from your server.
POST this JSON body to /v1/projects/{projectId}/transforms with a project API key. Replace the example image ID with an uploaded original in that project.
{
"imageId": "00000000-0000-4000-8000-000000000001",
"mode": "CACHE",
"transform": {
"width": 800,
"fit": "inside",
"format": "webp",
"quality": 80
}
}