PICTIFY
Dynamic Images

Images that change
with your data.

Live-bound templates render current reality — per user, per product, per request. Every fetch reflects now.

Dynamic image generation is what you need when the data behind an image changes faster than you can re-publish it. A pre-rendered product card with last week's price is a bug report waiting to happen. A static year-in-review card for every user means the loudest customer still sees their 2024 numbers in Q2 2025.

With dynamic rendering, the image is computed when the URL is fetched. CDN caching keeps the cost of "changes per request" manageable: the first fetch for a unique variable set renders fresh; every subsequent fetch is a warm hit. You get current data with static-asset performance.

Three dynamic-image shapes

Per-user dynamic

The image reflects the current viewer. Example: a user's Year-in-Review card that includes their name, stats, and profile photo. URL encodes the user ID; Pictify renders with that user's data at request time. Stays current even if the user's stats change between shares.

Per-request dynamic

The image reflects current state of something stateful — inventory, leaderboard standing, weather, stock price. URL stays the same; the rendered bytes update when the binding data changes. Great for live dashboards embedded in emails or status pages.

Per-context dynamic

The image reflects contextual factors — campaign cohort, A/B experiment variant, device type, geography, time-of-day. URL encodes the context; Pictify renders the correct variant. Enables A/B testing on image copy directly.

The binding approach

Pictify templates support live data bindings — configure the template to fetch variables from an HTTP endpoint (or webhook) at render time. The render call doesn't need to pass variables; the template pulls them itself.

Example: a leaderboard image for a gaming platform. The template has a binding to https://api.yourgame.com/leaderboard/top10. Every render pulls current top-10 data and shows it. Your client just fetches a stable URL like api.pictify.io/template/leaderboard/render; the image always shows now.

Live bindings are what separates Pictify from the rest of the template-API category. Bannerbear, Placid, and RenderForm all require your backend to fetch the data first. Pictify lets the template do it directly.

Example: per-user dynamic OG image

profile-og.ts
// When a user shares their profile link, the OG image reflects their
// CURRENT stats — not a snapshot from signup day.

export function buildProfileOgUrl(userId: string) {
  const url = new URL('https://api.pictify.io/template/tpl_profile_og/render');
  url.searchParams.set('user_id', userId);
  return url.toString();
}

// In the profile page's <head>:
// <meta property="og:image" content={buildProfileOgUrl(user.id)} />

// Template has a binding to:
//   https://yourapp.com/api/profile/${user_id}/stats
// On render, Pictify fetches current stats and paints them.
// User shares the link; Twitter caches the OG for ~24h.
// After TTL, next share re-fetches → new image with updated stats.

Frequently asked questions

What is dynamic image generation? +

Dynamic image generation is rendering an image based on request context — the current user, the current product, the current time, the current data state — rather than pre-rendering a static asset. Every fetch produces an image that reflects reality at that moment.

How is dynamic image generation different from static image rendering? +

Static rendering happens at publish/build time: you bake an image once and serve it. Dynamic rendering happens at request time: the image is computed when someone fetches the URL. Dynamic is the right tool when the underlying data changes faster than you can re-publish (live prices, stock levels, personalized stats).

Is dynamic image generation expensive? +

Not with CDN caching. Pictify caches every render URL; identical variable sets return a warm cache hit in under 100ms. If only 5% of your requests hit new variable combinations, 95% of your dynamic images cost the same as static. The cold-render cost is paid once per unique URL.

Can dynamic images update without re-fetching? +

No — once an image is rendered, its bytes are fixed. But you can cache the URL for a short TTL (e.g., 5 minutes) so that a refreshing consumer (a dashboard, a live feed) gets a newly-rendered image at each poll interval. Pictify also supports smart links where the URL stays stable but the underlying render refreshes per TTL.

What data sources can drive dynamic images? +

Any data your backend can read: user records, product inventory, CRM fields, feature flags, analytics events, experiment assignments, time of day, geography, A/B cohort. Pictify's live data bindings can pull directly from HTTP endpoints or webhooks — for other template APIs, your backend does the fetch and passes the values.

How does this compare to @vercel/og? +

@vercel/og renders dynamic OG images in a Next.js edge function — limited CSS, Vercel-only, and the template lives in your codebase. Pictify is an external API — full CSS, any host, templates live in a visual editor your designer can edit. For quick prototypes on Vercel, @vercel/og is fine. For production dynamic rendering with a design workflow, use Pictify.

Dynamic Image Generation

One URL. Always current data.

Real expression engine

{{ price * 0.9 | currency }} is a first-class template feature — not a string you pre-format in your backend. Conditionals, filters, nested lookups, all built in.

Live data bindings

Templates connect to HTTP endpoints, webhooks, or static JSON. Images update when data updates. Nothing else in the category ships this.

API + no-code, same product

Designers build templates in a visual canvas. Engineers call one endpoint. No hand-off, no context switch, no rebuild.

A/B experiments on images

Ship variants of a template, track impressions and conversions per variant, declare a winner — all from the same API that renders the image.

One API, many outputs

PNG, JPEG, WebP, multi-page PDF, GIF. Same template, different fileExtension. No separate service for each format.

Agentic AI copilot

"Make a dark-mode variant," "resize this for Instagram Story," "generate five backgrounds." The copilot edits templates step by step, not as a single-shot generator.

Related solutions