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 Iteration Layer's 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 what a Twitter/X card request looks like — a dark background, accent bar, title, and site name:
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: 675,
},
output_format: "png",
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",
index: 0,
hex_color: "#0f172a",
},
{
type: "solid-color",
index: 1,
hex_color: "#e94560",
position: {
x_in_px: 0,
y_in_px: 0,
},
dimensions: {
width_in_px: 1200,
height_in_px: 6,
},
},
{
type: "text",
index: 2,
text: "Why We Moved to Postgres",
font_name: "Inter",
font_weight: "bold",
font_size_in_px: 48,
text_color: "#ffffff",
text_align: "left",
position: {
x_in_px: 60,
y_in_px: 169,
},
dimensions: {
width_in_px: 1080,
height_in_px: 338,
},
},
{
type: "text",
index: 3,
text: "acme.dev",
font_name: "Inter",
font_size_in_px: 20,
text_color: "#64748b",
text_align: "left",
position: {
x_in_px: 60,
y_in_px: 615,
},
dimensions: {
width_in_px: 200,
height_in_px: 30,
},
},
],
});
{
"success": true,
"data": {
"buffer": "iVBORw0KGgoAAAANSUhEUg...",
"mime_type": "image/png"
}
}
The template uses a dark background, a colored accent bar at the top, the post title in white, and the site name at the bottom. The font size and text positioning adapt to the canvas size.
Generating for All Platforms
To generate for all three platforms, make one API call per platform with the same layer structure but different dimensions. Adjust text positions proportionally — for Instagram's 1080x1080 square, move the title lower and the site name further down. For LinkedIn's 1200x627, use the same horizontal layout with slightly different vertical spacing.
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": "solid-color",
"index": 2,
"hex_color": "#e94560",
"position": {
"x_in_px": 0,
"y_in_px": 0
},
"dimensions": {
"width_in_px": 400,
"height_in_px": 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_in_px: number, height_in_px: 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",
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_in_px: 80,
y_in_px: Math.round(height * 0.2),
},
dimensions: {
width_in_px: width - 160,
height_in_px: 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_in_px: 80,
y_in_px: height - 120,
},
dimensions: {
width_in_px: width - 160,
height_in_px: 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.