What Are Dynamic Images? Definitions, Examples, and How They Work

A dynamic image is an image whose displayed or generated content depends on changing data, a request, a selection rule, or time. The phrase has no single industry-wide definition. On a website it may mean selecting a different banner for each request. In an image service it may mean rendering a new raster from URL parameters. In advertising it can mean assembling a personalized creative from a feed. In document generation it can mean inserting a product image, barcode, or chart into a template. GIS and computer-vision researchers use the term in narrower ways.

“Dynamic” describes how the image is selected or produced; the result can still be an ordinary static PNG, JPEG, WebP, or image embedded in a PDF. It does not automatically mean animation.

Dynamic image meanings by field

Context	What changes	When it changes	What the viewer receives
Website authoring	A selection from existing files, such as rotating banners	When the page is requested	One selected image
On-demand rendering	Text, colors, source images, or visibility in a design	When a parameterized image URL is requested	A rendered and often cached variant
Advertising	Images plus copy, calls to action, links, and other creative fields	During ad serving or from a feed rule	A creative assembled for an impression
Document generation	Record-specific product images, barcodes, or charts	When a document is generated	An image embedded in a DOCX, PPTX, or PDF
GIS image services	Extent, dimensions, rendering functions, and source-data output	For each service request	A newly generated raster plus metadata
Computer vision	A representation of motion or temporal change	During processing of a video or still sequence	A still summary or an animated still-image treatment

These meanings are documented in Adobe’s Dreamweaver guidance on rotating images, Abyssale’s parameterized image-rendering documentation, Google Studio’s dynamic-creative documentation, Salesforce’s image-token documentation, Esri’s Types of service data documentation, and computer-vision papers on dynamic images. Vendor behavior is specific to each product.

How dynamic images work on websites

The simplest pattern is selection: the server or browser chooses one existing file from a list. A banner rotator might use a random choice, a campaign rule, a locale, a device type, or a user segment. The files themselves do not need to be edited.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Dynamic banner example</title>
<img id="banner" width="1200" height="400" alt="Promotion" loading="eager">
<script>
  const banners = [
    { src: "/images/sale.webp", alt: "Seasonal sale" },
    { src: "/images/new-product.webp", alt: "New product" },
    { src: "/images/webinar.webp", alt: "Developer webinar" }
  ];
  const choice = banners[Math.floor(Math.random() * banners.length)];
  const image = document.querySelector("#banner");
  image.src = choice.src;
  image.alt = choice.alt;
</script>
</html>

For production, choose on the server when possible so the first response contains the correct image, reserve the image’s dimensions to prevent layout shift, and keep alternative text meaningful for every variant.

Parameter-driven rendering

A rendering service can expose a URL such as /design/launch.webp?title=Spring&color=blue. The service applies the parameters to a template, returns an image, and may cache each unique variant. This is generation of a new output, even though the response is a static image file. Validate and encode parameters, restrict remote image sources, and define what happens when a parameter is missing or invalid.

Responsive delivery

Dynamic selection still needs normal image performance practices. Use srcset and sizes for known variants, modern formats where supported, explicit width and height, compression appropriate to photographic or graphic content, and lazy loading for below-the-fold images. Chrome’s performance guidance covers responsive markup, loading priority, and layout stability.

Dynamic images in advertising

Advertising platforms can swap more than imagery. A feed or profile field can control headline text, colors, product photography, calls to action, destination links, and visibility rules. The creative is assembled for an impression, so two viewers can receive different outputs from the same campaign. Google documents this as dynamic creative for Campaign Manager 360 users; its documentation says the feature is not available in Google Ad Manager.

Audit every combination before launch. Check contrast, text length, legal disclaimers, language fallback, destination URLs, and what happens when a feed row is empty or stale. Cache stable assets, but do not cache a personalized response under a URL that can be served to another user.

Dynamic images in generated documents

Document systems use image tokens or template fields to insert record-specific content. Examples include a product image for each ordered item, a unique barcode in a contract, or a pie chart generated from data. The document may be produced as DOCX, PPTX, or PDF; the inserted image is usually static once the file is generated.

1. Store or generate the source image with a predictable content type.
2. Map the record field to the template token.
3. Set maximum dimensions and a crop or fit policy.
4. Generate the document and verify that missing images have an accessible fallback.
5. Keep generated files immutable or version them so later source changes do not silently alter an issued document.

Dynamic images in GIS

In GIS, an image service can generate a new output for every request from source data, an extent, dimensions, and rendering functions. Esri describes dynamic images as outputs generated for each request and returned with metadata such as the image URL, extent, width, and height. One source dataset can therefore produce many products: different map areas, scales, bands, classifications, or enhancement functions.

Design GIS clients around the request parameters and metadata. Handle projections, pixel dimensions, no-data areas, retries, and cache keys. A cache should include every parameter that changes the raster; otherwise one map view can be returned for another.

Dynamic images in photography and computer vision

Research uses the phrase differently. One computer-vision workshop describes short animations that add life to a still picture, such as pan-and-zoom or cinemagraph-like effects. Another paper uses “dynamic image” for a still RGB representation that summarizes motion and temporal evolution from video for action recognition. These are specialist meanings and should not be confused with a rotating web banner.

A practical design checklist

• Define the changing input: existing-file selection, template parameters, feed data, record fields, GIS functions, or video frames.
• Choose the change point: page request, image URL request, ad impression, document generation, or offline processing.
• Keep cache keys complete: include every input that changes pixels or metadata.
• Reserve layout space: publish dimensions or aspect ratios for every possible variant.
• Set fallbacks: provide a default image, alt text, and behavior for missing or invalid data.
• Protect inputs: validate URLs, encode text, limit remote fetches, and prevent private-resource access.
• Observe outputs: log a variant identifier, source data version, response time, status, and cache result.
• Control cost: cache repeated variants and avoid regenerating identical images.

Capturing a dynamic webpage as an image

If the “dynamic image” you need is a screenshot of a page after JavaScript, personalization, or lazy loading has run, a browser must reach the required state before capture. A self-hosted workflow uses a headless browser such as Playwright:

import { chromium } from "playwright";

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
await page.goto("https://example.com", { waitUntil: "networkidle" });
await page.locator(".hero").waitFor();
await page.screenshot({ path: "dynamic-page.webp", fullPage: true, type: "webp" });
await browser.close();

Run this in a controlled worker, set navigation and selector timeouts, isolate untrusted pages, and decide whether cookies, authentication, geolocation, or a fixed timezone are part of the expected state.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. It can wait for selectors, delays, or network idle; load lazy images; capture a full page or one CSS-selected element; apply custom JavaScript or CSS; set cookies, headers, user agents, timezone, and geolocation; and return PNG, JPEG, WebP, or PDF. Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing result.

See the ScreenshotNeo API documentation for the complete option list. The same endpoint also supports signed links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, caching with a chosen TTL, HTML/CSS rendering, and an MCP server with take_screenshot, get_page_info, and capture_pdf for AI clients.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', data);

There is a free tier of 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. An MCP server lets AI agents take screenshots. Create a free ScreenshotNeo account.

Troubleshooting

Symptom	Likely cause	Fix
The image is always the same	A fixed seed, server cache, or incomplete cache key	Inspect selection inputs and include them in the cache key.
Layout jumps while loading	Variant dimensions are unknown	Set width, height, or aspect-ratio before the request completes.
Personalized content leaks	A shared cache ignores user or campaign identity	Partition cache keys and response headers by personalization inputs.
Text is clipped	Template bounds do not fit the longest value	Constrain input length, wrap or resize text, and test worst-case strings.
Screenshot shows a loading shell	Capture occurred before the dynamic state was ready	Wait for a selector, a deliberate delay, or network idle; verify the target element.
Screenshot contains a consent banner	The banner appeared after the initial page load	Accept consent before capture or use ScreenshotNeo’s consent and popup removal.
Remote images fail	CORS, authentication, robots policy, or an expired URL	Check the resource response in browser logs and provide authorized, stable URLs.
GIS output is wrong	Extent, projection, dimensions, or rendering parameters differ	Log the complete request and compare every parameter with the expected map view.

Performance, reliability, and cost

Every unique dynamic variant can require a render, fetch, or document build. Cache immutable variants with a content-derived key, precompute popular combinations, and use responsive dimensions so you do not generate a desktop image for a small device. For browser screenshots, reuse workers carefully, set finite timeouts, retry transient network failures with backoff, and record whether a result came from cache. For feeds and documents, version source data so an output can be reproduced.

Costs depend on the implementation: image bytes and transformation time for a renderer, impressions for an advertising platform, document jobs for a generator, GIS service requests, or screenshot captures. Check the current limits and pricing of the service you choose. ScreenshotNeo reports verdict and billing headers, bills only clean shots, and offers caching and bulk capture to reduce repeated work.

FAQ

Is a dynamic image animated?

Not necessarily. Dynamic can describe selection or generation of a single static response. Animation is only one possible output.

Is a personalized image the same as a dynamic image?

Personalization is one kind of dynamic behavior. A randomly rotated banner or a GIS raster generated from an extent is dynamic without being personalized to an individual.

Can the source file stay unchanged?

Yes. A system can select an existing file, or render a new response from unchanged source assets and changing parameters.

Why do dynamic images affect SEO and accessibility?

Changing pixels does not replace the need for meaningful alt text, stable dimensions, crawlable page content, and a usable fallback when a variant cannot load.

When should I generate variants ahead of time?

Pre-generate combinations that are popular, immutable, or needed for strict latency targets. Render on demand when the input space is large or changes frequently, then cache successful results.