Social Images Don’t Scale Manually
You publish three blog posts a week. Each one needs a Twitter card, a LinkedIn image, and an Instagram post. That’s nine images per week, all with the same layout but different titles. You open Canva, duplicate the template, update the text, export, resize for the next platform, repeat.
By month two you’ve made 108 images by hand. By month six, 648. The layout hasn’t changed — just the title and maybe a background image. The manual work is pure repetition.
This is a templating problem. Define the layout once, inject the dynamic content per post, generate the image. The Image Generation API does exactly this — you describe your template as a stack of layers, swap the variable parts, and get an image back for each combination.
One Template, Three Platforms
Social platforms have different image dimensions:
- Twitter/X cards: 1200x675
- LinkedIn posts: 1200x627
- Instagram posts: 1080x1080
The layout logic is the same across all three — background, accent shape, title text, optional image. Only the dimensions and positioning change.
Here’s a reusable template function:
type SocialImageConfig = {
title: string;
width: number;
height: number;
accentColor: string;
backgroundImageUrl?: string;
};
const buildSocialImageRequest = (config: SocialImageConfig) => ({
dimensions: { width: config.width, height: config.height },
output_format: "png" as const,
fonts: [
{
name: "Inter",
weight: "Regular",
style: "normal",
file: {
type: "url",
name: "Inter-Regular.ttf",
url: "https://example.com/fonts/Inter-Regular.ttf",
},
},
{
name: "Inter",
weight: "Bold",
style: "normal",
file: {
type: "url",
name: "Inter-Bold.ttf",
url: "https://example.com/fonts/Inter-Bold.ttf",
},
},
],
layers: [
{
type: "solid-color-background",
index: 0,
hex_color: "#0f172a",
opacity: 100,
},
...(config.backgroundImageUrl
? [
{
type: "image-overlay",
index: 1,
file: {
type: "url",
name: "background.jpg",
url: config.backgroundImageUrl,
},
opacity: 15,
},
]
: []),
{
type: "rectangle",
index: 2,
hex_color: config.accentColor,
position: { x: 0, y: 0 },
dimensions: { width: config.width, height: 6 },
opacity: 100,
},
{
type: "text",
index: 3,
text: config.title,
font_name: "Inter",
font_weight: "Bold",
font_size_in_px: config.width > 1100 ? 48 : 42,
text_color: "#ffffff",
text_align: "left",
vertical_align: "center",
position: { x: 60, y: Math.round(config.height * 0.25) },
dimensions: {
width: config.width - 120,
height: Math.round(config.height * 0.5),
},
is_splitting_lines: true,
opacity: 100,
},
{
type: "text",
index: 4,
text: "acme.dev",
font_name: "Inter",
font_weight: "Regular",
font_size_in_px: 20,
text_color: "#64748b",
text_align: "left",
position: { x: 60, y: config.height - 60 },
dimensions: { width: 200, height: 30 },
opacity: 100,
},
],
});The template takes a title, dimensions, accent color, and an optional background image. The font size and text positioning adapt to the canvas size. The site name anchors to the bottom-left.
Generating for All Platforms
With the template function defined, generating for all three platforms is straightforward:
import { IterationLayer } from "iterationlayer";
const client = new IterationLayer({ apiKey: "YOUR_API_KEY" });
const PLATFORM_DIMENSIONS = {
twitter: { width: 1200, height: 675 },
linkedin: { width: 1200, height: 627 },
instagram: { width: 1080, height: 1080 },
};
const generateSocialImages = async (title: string, accentColor: string) => {
const results: Record<string, Buffer> = {};
for (const [platform, dimensions] of Object.entries(PLATFORM_DIMENSIONS)) {
const requestBody = buildSocialImageRequest({
title,
...dimensions,
accentColor,
});
const result = await client.generateImage(requestBody);
const { data: { buffer } } = result;
results[platform] = Buffer.from(buffer, "base64");
}
return results;
};
Call generateSocialImages("Why We Moved to Postgres", "#e94560") and you get three images — same design, correct dimensions for each platform.
Adding Visual Variety
A solid background works, but it gets repetitive across dozens of posts. Two layer types add variety without changing the template structure:
Background images with low opacity. The image-overlay layer puts a full-canvas image behind your text. Set the opacity to 10-20% so the text stays readable against the dark background. Each post can use a different background image — a relevant photo, an abstract pattern, a gradient texture.
Angled accent shapes. Rectangle layers support angledEdges for diagonal designs. Instead of a flat bar across the top, use an angled rectangle for a more dynamic look:
{
"type": "rectangle",
"index": 2,
"hex_color": "#e94560",
"position": { "x": 0, "y": 0 },
"dimensions": { "width": 400, "height": 630 },
"angledEdges": [{ "edge": "right", "angleInDegrees": 80 }],
"opacity": 20
}This creates a diagonal accent shape on the left side of the image — a subtle design element that adds depth without overwhelming the title text.
Batch Generation from a Content Feed
The real value shows up when you connect this to your content pipeline. Pull posts from your CMS, generate images for each one:
type BlogPost = {
title: string;
slug: string;
category: string;
};
const ACCENT_COLOR_BY_CATEGORY: Record<string, string> = {
engineering: "#3b82f6",
product: "#e94560",
company: "#10b981",
tutorial: "#f59e0b",
};
const generateAllSocialImages = async (posts: BlogPost[]) => {
for (const post of posts) {
const accentColor = ACCENT_COLOR_BY_CATEGORY[post.category] ?? "#6366f1";
const images = await generateSocialImages(post.title, accentColor);
for (const [platform, imageBuffer] of Object.entries(images)) {
await writeFile(`./public/social/${post.slug}-${platform}.png`, imageBuffer);
}
}
};Each post gets a color based on its category. Engineering posts are blue, product posts are red, tutorials are amber. The template is the same — only the title, color, and filename change.
Template Variants
A single template handles most posts, but some content types deserve their own layout. Product launches might show a screenshot. Team announcements might show a headshot. Quote cards might center a pull quote.
Define each variant as its own template function:
const buildQuoteCardRequest = (quote: string, author: string, width: number, height: number) => ({
dimensions: { width, height },
output_format: "png" as const,
fonts: [
{
name: "Inter",
weight: "Regular",
style: "normal",
file: { type: "url", name: "Inter-Regular.ttf", url: "https://example.com/fonts/Inter-Regular.ttf" },
},
{
name: "Inter",
weight: "Bold",
style: "normal",
file: { type: "url", name: "Inter-Bold.ttf", url: "https://example.com/fonts/Inter-Bold.ttf" },
},
],
layers: [
{ type: "solid-color-background", index: 0, hex_color: "#0f172a", opacity: 100 },
{
type: "text",
index: 1,
text: `*"${quote}"*`,
font_name: "Inter",
font_weight: "Regular",
font_size_in_px: 36,
text_color: "#e2e8f0",
text_align: "center",
vertical_align: "center",
position: { x: 80, y: Math.round(height * 0.2) },
dimensions: { width: width - 160, height: Math.round(height * 0.5) },
is_splitting_lines: true,
opacity: 100,
},
{
type: "text",
index: 2,
text: `— ${author}`,
font_name: "Inter",
font_weight: "Bold",
font_size_in_px: 22,
text_color: "#94a3b8",
text_align: "center",
position: { x: 80, y: height - 120 },
dimensions: { width: width - 160, height: 40 },
opacity: 100,
},
],
});
The quote renders in italic (wrapped in *...*), centered on the card. The author name sits below in bold. Same API, different layer arrangement.
Output Formats
Social platforms accept different image formats. The API supports PNG, JPEG, WebP, and AVIF:
- PNG — lossless, best for text-heavy images where sharpness matters
- JPEG — smaller files, good for images with photos or complex backgrounds
- WebP — smaller than PNG and JPEG at equivalent quality. Twitter and LinkedIn both accept it.
- AVIF — smallest files, but not universally supported yet
For social images, PNG is the safe default. If file size matters — uploading via an API with size limits — switch to WebP or JPEG with quality at 90.
Get Started
Check the docs for the full layer reference, including all layer types and their properties.
Sign up at iterationlayer.com for a free API key — no credit card required. Build one template, generate images for your last five blog posts, and see how it fits your workflow.