Understanding the Dynamic Asset Transformation component
The Dynamic Asset Transformation (DAT) component is a self-contained, embeddable interface that lets users transform an asset on demand. You add it to your own application as a custom HTML element, and it provides the full transformation experience without you building an editor or managing multiple stored copies of each asset. This page explains what the component does, how it applies transformations, and how it fits into an application, so you understand the model before you integrate it.
Why transform on demand
Without dynamic transformation, teams create, store, and manage a separate copy of an asset for every placement and use case. A single image might exist as a dozen variants for different sizes, crops, and formats, each briefed, produced, and stored separately. This wastes effort, increases storage costs, and leads to inconsistency when variants drift out of sync with the original.
The DAT component takes a different approach. It applies transformations to a single source asset at request time, producing each variant on demand rather than in advance. The source asset stays the single point of truth, and integrators deliver the exact variant they need without duplicating storage.
What the component can do
The component groups its capabilities into standard transformations, adjustments, and AI transformations.
-
Standard transformations: resize, crop, rotate, scale by proportion, and fill a transparent background with a solid colour.
-
Adjustments: brightness, contrast, saturation, hue, RGB balance, sharpen, and blur, all controlled with sliders.
-
Format conversion: output as JPEG, PNG, GIF, WebP, TIFF, AVIF, or JP2.
-
AI transformations: remove the background, expand the canvas with generative content, and replace the background (available behind a feature flag).
For video assets, the component also offers automated reframing, which generates correctly-cropped variants for different placements. Video reframing is available behind a feature flag.
The exact parameters, ranges, and defaults for each transformation are specified in the reference pages linked below.
How transformations are applied
The component applies transformations in two distinct layers, and understanding the difference explains what your application receives back.
Standard transformations and adjustments are URL-encoded. Each one is appended to the asset URL as a path segment, and the transformed image is rendered at request time:
{assetUrl}/transform/image/{segment}/{segment}/...This layer is non-destructive and cacheable. The source asset is never modified, and combining transformations simply adds more segments to the URL.
AI transformations work differently. The AI service processes the image and returns a new base URL pointing at the generated result. Any standard transformations then re-apply on top of that new base URL.
Because these are separate layers, a result can carry both a transformed URL and a record of the AI operations that produced its base image. The component preserves both, and includes them in the event it emits when a user selects a result.
How the component fits into your application
The component is a custom HTML element, <cmp-dat>, that you place in your page.
You pass it an asset and the credentials it needs as HTML attributes, the user interacts with the transformation interface, and the component emits events that your application listens for, such as when the user selects a transformed asset.
Your application decides what to do with the result, for example saving it as a new asset or inserting it into a template.
The component encapsulates its own styles, so it will not interfere with your application’s styling, and your styling will not affect it. It ships as an embeddable web component for use in any application, and also runs in a standalone mode for development and testing.
For the steps to load and configure the component, see Embed the DAT web component. For the complete list of attributes and events, see DAT web component reference.