Generate OG Image

Generate a branded Open Graph image with a generative wave background, logo, and tagline.

Who this is for

Sites and apps use this recipe to generate a unique, branded OG image per page. A solid-color canvas holds a decorative background image with rounded corners, a logo, the brand name, and a tagline — ready to serve as an og:image meta tag.

Request
curl -X POST \
  https://api.iterationlayer.com/image-generation/v1/generate \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "dimensions": { "width": 1200, "height": 630 },
    "output_format": "jpeg",
    "layers": [
      {
        "index": 0,
        "type": "solid-color",
        "hex_color": "#FFFFFF"
      },
      {
        "index": 1,
        "type": "image",
        "file": { "type": "url", "name": "background.png", "url": "https://example.com/background.png" },
        "position": { "x": 20.0, "y": 20.0 },
        "dimensions": { "width": 1160, "height": 478 },
        "border_radius": 24
      },
      {
        "index": 2,
        "type": "image",
        "file": { "type": "url", "name": "logo.svg", "url": "https://example.com/logo.svg" },
        "position": { "x": 20.0, "y": 542.0 },
        "dimensions": { "width": 56, "height": 56 }
      },
      {
        "index": 3,
        "type": "text",
        "text": "Acme Corp",
        "font_name": "Inter",
        "font_size_in_px": 32,
        "font_weight": "Bold",
        "text_color": "#000000",
        "text_align": "left",
        "vertical_align": "center",
        "position": { "x": 90.0, "y": 542.0 },
        "dimensions": { "width": 300, "height": 56 }
      },
      {
        "index": 4,
        "type": "text",
        "text": "Build faster with our platform",
        "font_name": "Inter",
        "font_size_in_px": 28,
        "font_weight": "Medium",
        "text_color": "#6B7280",
        "text_align": "right",
        "vertical_align": "center",
        "should_auto_scale": true,
        "position": { "x": 20.0, "y": 542.0 },
        "dimensions": { "width": 1160, "height": 56 }
      }
    ]
  }'
Response
{
  "success": true,
  "data": {
    "buffer": "/9j/4AAQSkZJRgABAQ...",
    "mime_type": "image/jpeg"
  }
}
Request
import { IterationLayer } from "iterationlayer";
const client = new IterationLayer({ apiKey: "YOUR_API_KEY" });

const result = await client.generateImage({
  dimensions: { width_in_px: 1200, height_in_px: 630 },
  output_format: "jpeg",
  layers: [
    {
      index: 0,
      type: "solid-color",
      hex_color: "#FFFFFF",
    },
    {
      index: 1,
      type: "image",
      file: { type: "url", name: "background.png", url: "https://example.com/background.png" },
      position: { x_in_px: 20, y_in_px: 20 },
      dimensions: { width_in_px: 1160, height_in_px: 478 },
      border_radius: 24,
    },
    {
      index: 2,
      type: "image",
      file: { type: "url", name: "logo.svg", url: "https://example.com/logo.svg" },
      position: { x_in_px: 20, y_in_px: 542 },
      dimensions: { width_in_px: 56, height_in_px: 56 },
    },
    {
      index: 3,
      type: "text",
      text: "Acme Corp",
      font_name: "Inter",
      font_size_in_px: 32,
      font_weight: "Bold",
      text_color: "#000000",
      text_align: "left",
      vertical_align: "center",
      position: { x_in_px: 90, y_in_px: 542 },
      dimensions: { width_in_px: 300, height_in_px: 56 },
    },
    {
      index: 4,
      type: "text",
      text: "Build faster with our platform",
      font_name: "Inter",
      font_size_in_px: 28,
      font_weight: "Medium",
      text_color: "#6B7280",
      text_align: "right",
      vertical_align: "center",
      should_auto_scale: true,
      position: { x_in_px: 20, y_in_px: 542 },
      dimensions: { width_in_px: 1160, height_in_px: 56 },
    },
  ],
});

await Bun.write("og-image.jpg", Buffer.from(result.data.buffer, "base64"));
Response
{
  "success": true,
  "data": {
    "buffer": "/9j/4AAQSkZJRgABAQ...",
    "mime_type": "image/jpeg"
  }
}
Request
import base64

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

result = client.generate_image(
    dimensions={"width_in_px": 1200, "height_in_px": 630},
    output_format="jpeg",
    layers=[
        {
            "index": 0,
            "type": "solid-color",
            "hex_color": "#FFFFFF",
        },
        {
            "index": 1,
            "type": "image",
            "file": {"type": "url", "name": "background.png", "url": "https://example.com/background.png"},
            "position": {"x_in_px": 20, "y_in_px": 20},
            "dimensions": {"width_in_px": 1160, "height_in_px": 478},
            "border_radius": 24,
        },
        {
            "index": 2,
            "type": "image",
            "file": {"type": "url", "name": "logo.svg", "url": "https://example.com/logo.svg"},
            "position": {"x_in_px": 20, "y_in_px": 542},
            "dimensions": {"width_in_px": 56, "height_in_px": 56},
        },
        {
            "index": 3,
            "type": "text",
            "text": "Acme Corp",
            "font_name": "Inter",
            "font_size_in_px": 32,
            "font_weight": "Bold",
            "text_color": "#000000",
            "text_align": "left",
            "vertical_align": "center",
            "position": {"x_in_px": 90, "y_in_px": 542},
            "dimensions": {"width_in_px": 300, "height_in_px": 56},
        },
        {
            "index": 4,
            "type": "text",
            "text": "Build faster with our platform",
            "font_name": "Inter",
            "font_size_in_px": 28,
            "font_weight": "Medium",
            "text_color": "#6B7280",
            "text_align": "right",
            "vertical_align": "center",
            "should_auto_scale": True,
            "position": {"x_in_px": 20, "y_in_px": 542},
            "dimensions": {"width_in_px": 1160, "height_in_px": 56},
        },
    ],
)

with open("og-image.jpg", "wb") as f:
    f.write(base64.b64decode(result["data"]["buffer"]))
Response
{
  "success": true,
  "data": {
    "buffer": "/9j/4AAQSkZJRgABAQ...",
    "mime_type": "image/jpeg"
  }
}
Request
package main

import (
    "encoding/base64"
    "os"

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

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

    result, err := client.GenerateImage(
        il.GenerateImageRequest{
            Dimensions:   il.Dimensions{WidthInPx: 1200, HeightInPx: 630},
            OutputFormat: "jpeg",
            Layers: []il.Layer{
                il.NewSolidColorLayer(0, "#FFFFFF"),
                il.NewImageLayer(
                    1,
                    il.NewFileFromURL("background.png", "https://example.com/background.png"),
                    il.Position{XInPx: 20, YInPx: 20},
                    il.Dimensions{WidthInPx: 1160, HeightInPx: 478},
                ),
                il.NewImageLayer(
                    2,
                    il.NewFileFromURL("logo.svg", "https://example.com/logo.svg"),
                    il.Position{XInPx: 20, YInPx: 542},
                    il.Dimensions{WidthInPx: 56, HeightInPx: 56},
                ),
                il.NewTextLayer(
                    3, "Acme Corp",
                    "Inter", 32, "#000000",
                    il.Position{XInPx: 90, YInPx: 542},
                    il.Dimensions{WidthInPx: 300, HeightInPx: 56},
                ),
                il.NewTextLayer(
                    4, "Build faster with our platform",
                    "Inter", 28, "#6B7280",
                    il.Position{XInPx: 20, YInPx: 542},
                    il.Dimensions{WidthInPx: 1160, HeightInPx: 56},
                ),
            },
        },
    )
    if err != nil {
        panic(err)
    }

    decoded, _ := base64.StdEncoding.DecodeString(result.Data.Buffer)
    os.WriteFile("og-image.jpg", decoded, 0644)
}
Response
{
  "success": true,
  "data": {
    "buffer": "/9j/4AAQSkZJRgABAQ...",
    "mime_type": "image/jpeg"
  }
}

Related Recipes

Start building in minutes

Free trial credits included. No credit card required.