Generate Responsive Thumbnails

Generate multiple thumbnail sizes from a single source image for responsive web design.

Who this is for

Web developers and CMS platforms use this recipe to generate responsive image variants. Upload one high-resolution image and resize it to your target thumbnail dimensions — ready for srcset attributes and responsive layouts.

curl -X POST https://api.iterationlayer.com/image-transformation/v1/transform \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "file": {
      "type": "url",
      "name": "hero-image.jpg",
      "url": "https://example.com/hero-image.jpg"
    },
    "operations": [
      { "type": "resize", "width_in_px": 300, "height_in_px": 200, "fit": "cover" },
      { "type": "convert", "format": "webp", "quality": 80 }
    ]
  }'
import { IterationLayer } from "iterationlayer";
const client = new IterationLayer({ apiKey: "YOUR_API_KEY" });

const result = await client.transform({
  file: {
    type: "url",
    name: "hero-image.jpg",
    url: "https://example.com/hero-image.jpg",
  },
  operations: [
    { type: "resize", width_in_px: 300, height_in_px: 200, fit: "cover" },
    { type: "convert", format: "webp", quality: 80 },
  ],
});

const imageBuffer = Buffer.from(result.data.buffer, "base64");
import base64

from iterationlayer import IterationLayer
client = IterationLayer(api_key="YOUR_API_KEY")

result = client.transform(
    file={
        "type": "url",
        "name": "hero-image.jpg",
        "url": "https://example.com/hero-image.jpg",
    },
    operations=[
        {"type": "resize", "width_in_px": 300, "height_in_px": 200, "fit": "cover"},
        {"type": "convert", "format": "webp", "quality": 80},
    ],
)

with open("result.webp", "wb") as f:
    f.write(base64.b64decode(result["data"]["buffer"]))
package main

import (
    "encoding/base64"
    "os"

    il "github.com/iterationlayer/sdk-go"
)

func main() {
    client := il.NewClient("YOUR_API_KEY")

    result, err := client.Transform(il.TransformRequest{
        File: il.NewFileFromURL("hero-image.jpg", "https://example.com/hero-image.jpg"),
        Operations: []il.TransformOperation{
            il.NewResizeOperation(300, 200, "cover"),
            il.NewConvertOperation("webp"),
        },
    })
    if err != nil {
        panic(err)
    }

    decoded, _ := base64.StdEncoding.DecodeString(result.Data.Buffer)
    os.WriteFile("result.webp", decoded, 0644)
}

Related Recipes

Start building in minutes

Free trial credits included. No credit card required.