Would you like to generate customized presets on demand and use them in your external systems? With Dynamic Asset Transformations (DAT) you can request a customized preset by adding parameters to the DAT Link.
By using Dynamic Asset Transformations that are optimized for the platform and/or device your users are working on you can ensure that they have the best user experience possible.
When creating Dynamic Asset Transformations the system uses the focus point that has been set on an asset level. If needed, you can change this focus point by using additional parameters.
The DAT service also automatically invalidates the Webdam CDN cache when a new manual focus point is set in the Asset Detail view or when a new asset version is uploaded. This ensures that the image will be updated everywhere the Webdam CDN reference is used, which ensures consistency across your brand.
Dynamic Asset Transformations are fully integrated into your Webdam account so you don't need to rely on external systems for preset generation. Find out below how you can start integrating Dynamic Asset Transformations into your external websites, social media platforms and email newsletters.
How to Use Dynamic Asset Transformations?
Dynamic Asset Transformations give you the freedom to generate the preset you want on the fly. One of the best practices to implement DAT is to use the srcset attribute. With this attribute you can define different size variations of the same image and provide information about the size of each one. The browser of your end users will then decide which image variation to display based on the end users' screen size. Read more about responsive image sizing here.
Give it a Try
Are you not sure if Dynamic Asset Transformations are what you're looking for and would you like to try it first?
Below you'll find some example base URLs that you can customize using the available parameters. Check out this section for more information on how you can apply those parameters. A preview of the original images can be found in the table below.
For example the following URL will create a crop of 1200x1200 pixels of the Musician photo and the focus point will be the center of the image or automatically update to your pre-selected focus point for the asset.
https://training.webdamdb.com/transform/MBazHJSI27v71sKM/music.jpg?accountId=11445?io=transform:fill,width:1200,height:1200
-
Music Photo
https://training.webdamdb.com/transform/MBazHJSI27v71sKM/music.jpg?accountId=11445
-
Party Photo
https://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?accountId=11445
-
Musician Photo
https://training.webdamdb.com/transform/Q8cl0cW9Xa571Mez/musician.jpeg?accountId=11445
How to Enable Dynamic Asset Transformations?
Contact your Customer Success Manager if you would like to have DAT enabled for your portal. Your Customer Success Manager will be happy to further assist you in setting this up.
How to Create Dynamic Asset Transformations?
You can create Dynamic Asset Transformations by adding parameters to the DAT Link.
-
Open the asset for which you want to create a Dynamic Asset Transformation.
- Click the
button.
-
Copy the DAT Link in the Public File Links section. This URL functions as the base URL to which you'll add your transformations.
-
Create your customized Dynamic Asset Transformations by adding one of the parameters indicated in the table below directly next to the DAT Link.
Dynamic Asset Transformation
Transform Transformations
Fill
-
With the below transformation you can ensure that as much of the image as possible remains visible. With the gravity you can set which part of the image shouldn't be cropped. Other sides still may be cropped depending on the entered dimensions. The aspect ratio is maintained. See the example below.
?io=transform:fill,width:100,height:200,gravity:center
|
Properties |
Name |
Type |
Default Value |
Range |
|---|---|---|---|---|
|
Transformed image width in pixels |
width |
int |
﹥0 and less than max width (max width = width of the base DAT image) |
|
|
Transformed image height in pixels |
height |
int |
﹥0 and less than max height (max height = width of the base DAT image) |
|
|
Indicates which area to keep for the transformation. The other areas may be cropped. |
gravity |
sting |
center |
Center, top, topleft, topright, left, right, bottom, bottomleft, bottomright |
With this transformation you can resize the image based on the specified parameters. The aspect ratio won't change. See the example below.
?io=transform:fit,width:200,height:200
Example URL: https://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?io=transform:extend,width:110,height:100
|
Properties |
Name |
Type |
Default Value |
Required |
|---|---|---|---|---|
|
Transformed image width in pixels |
width |
int |
﹥0 and less than max width (max width = width of the base DAT image) |
Yes |
|
Transformed image height in pixels |
height |
int |
﹥0 and less than max height (max height = width of the base DAT image) |
Yes |
Extend
With this transformation you can extend the image to the specified dimensions. See the example below.
?io=transform:extend,width:110,height:100
|
Name |
Type |
Default Value |
Description |
Range |
Required |
|---|---|---|---|---|---|
|
width |
int |
﹥0 and less than max width (max width = width of the base DAT image) |
Fit the image (resize) to a box based on the specified width and height. |
Yes |
|
|
height |
int |
﹥0 and less than max height (max height = width of the base DAT image) |
|||
|
background |
string |
white |
HTML color names (red, white, black, yellow) or HEX codes. Use auto to set the most dominant color inside the image as border color. |
With this transformation you can scale the image to the specified width and height. The aspect ratio may change. See the example below.
?io=transform:scale,width:200,height:200
Example URL: https://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?io=transform:scale,width:200,height:200
|
Name |
Type |
Default value |
|---|---|---|
|
width |
int |
﹥0 and less than max width (max width = width of the base DAT image) |
|
height |
int |
﹥0 and less than max height (max height = width of the base DAT image) |
With this transformation you can crop a part of the image. See the example below.
?io=transform:crop,width:200,height:200
Example URL: https://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?io=transform:crop,path:circle,width:600,height:600,background:yellow,blur:55
|
Name |
Type |
Default Value |
Description |
Range |
Required |
|---|---|---|---|---|---|
|
width |
int |
﹥0 and less than max width (max width = width of the base DAT image) |
Yes |
||
|
height |
int |
﹥0 and less than max width (max width = width of the base DAT iamge) |
Yes |
||
|
gravity |
string |
center |
The crop will start from the specified area. This part of the image will remain and other areas may be cropped. |
Center, top, topleft, topright, left, right, bottom, bottomleft, bottomright |
No |
|
path |
string |
circle |
This will change the crop to a round shape. Make sure width and height are set to the same dimensions in order to use a circle. Use different dimensions to use an oval. |
No |
|
|
background |
string |
white |
Add a background color |
HTML color names (red, white, black, yellow) or HEX codes. Use auto to set the most dominant color inside the image as border color. |
No |
|
blur |
int |
0 |
Blur the edge of the crop |
0 to 100 |
No |
Rotate
With this transformation you can rotate the image clockwise based on the specified degrees. See the example below.
?io=transform:rotate,angle:270
Example URL: https://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?io=transform:rotate,angle:45
|
Name |
Type |
Default Value |
Description |
Range |
Required |
|---|---|---|---|---|---|
|
angle |
int |
0 |
Rotate the image by a certain angle in degrees, clockwise |
0 < 360 |
Yes |
With this transformation you can flip the image vertically. See the example below.
?io=transform:flip
Example URL: https://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?io=transform:flip
With this transformation you can flip the image horizontally. See the example below.
?io=transform:mirror
Example URL: https://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?io=transform:mirror
With this transformation you can add a border around the image and specify the border width and border color. See the example below.
?io=transform:border,width:2,color:black
Example URL: https://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?io=transform:border,width:10,color:white
|
Name |
Type |
Description |
Range |
Required |
|---|---|---|---|---|
|
width |
int |
The border width specified in pixels. |
﹥0 and less than the maximum width of the DAT image |
Yes |
|
color |
string |
The color of the border |
Specify the border color using HTML color names (red, white, black, yellow) or HEX codes. Use auto to set the most dominant color inside the image as border color. |
No |
Background
With this transformation you can change the background color of a transparent image. See the example below.
?io=transform:background,color:grey
|
Name |
Type |
Default Value |
Range |
Required |
|---|---|---|---|---|
|
color |
string |
white |
Specify the background color using HTML color names (red, white, black, yellow) or HEX codes. Use auto to set the most dominant color inside the image as border color. |
Yes |
Filter
Adjust the transparency of the whole image.
?io=filter:opacity,amount:60
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:opacity,amount:60
|
Name |
Type |
Range |
Required |
|---|---|---|---|
|
amount |
int |
0—100 (% based value) |
No |
Apply a sepia filter to the image.
?io=filter:sepia
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:sepia
Adjust the contrast level of the image.
?io=filter:contrast,amount:80
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:contrast,amount:80
|
Name |
Type |
Range |
Required |
|---|---|---|---|
|
amount |
int |
-100—100 (% based value) |
No |
Adjust the brightness level of the image.
?io=filter:brightness,amount:80
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:brightness,amount:80
|
Name |
Type |
Range |
Required |
|---|---|---|---|
|
amount |
int |
-100—100 (% based value) |
No |
Convert the colors an image to black and white.
?io=filter:grayscale
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:grayscale
Apply a blur effect to the image.
?io=filter:blur,radius:20
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:blur,radius:20
Adjust the sharpness of the image.
?io=filter:sharpness,amount:80
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:sharpness,amount:80
|
Name |
Type |
Range |
Required |
|---|---|---|---|
|
amount |
int |
-100—100 (% based value) |
No |
Adjust the saturation level of the image.
?io=filter:saturation,amount:80
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:saturation,amount:80
|
Name |
Type |
Range |
Required |
|---|---|---|---|
|
amount |
int |
-100—100 (% based value) |
No |
Add a vignette effect to the image.
?io=filter:vignette,amount:100,color:black,softness:50
|
Name |
Type |
Description |
Range |
Required |
|---|---|---|---|---|
|
amount |
int |
Controls the opacity of the gradient |
0-10 |
No |
|
color |
string |
HTML color names (red, white, black, yellow) or HEX codes. Use auto to set the most dominant color inside the image as border color. |
No |
|
|
softness |
int |
% based value |
-100—100 |
No |
Adjust the color temperature of the image.
?io=filter:temperature,amount:5000
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:temperature,amount:5000
|
Name |
Type |
Description |
Range |
Required |
|---|---|---|---|---|
|
amount |
int |
Controls the color temperature in kelvin |
800-12000 |
yes |
Apply an overlay with a solid color and specified transparency to the image.
?io=overlay:box,color:red,opacity:20
|
Name |
Type |
Default Value |
Description |
Range |
Required |
|---|---|---|---|---|---|
|
color |
string |
Specify the color using HTML color names (red, white, black, yellow) or HEX codes. Use auto to set the most dominant color inside the image as border color. |
yes |
||
|
opacity |
int |
25% |
% based value |
0-100 |
no |
Apply a text layer to the image.
?io=overlay:text,content:some%20text,font:Arial,size:11,color:black,angle:45
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=overlay:text,content:TEST,font:Arial,size:80,color:blue,gravity:topleft,angle:25
|
Name |
Type |
Default Value |
Description |
Range |
Required |
|---|---|---|---|---|---|
|
content |
string |
URL encoded string |
yes |
||
|
font |
string |
arial |
supported fonts and uploaded custom fonts |
no |
|
|
size |
int |
16 |
font size |
﹥1 |
no |
|
color |
string |
#fff |
Specify the color using HTML color names (red, white, black, yellow) or HEX codes. Use auto to set the most dominant color inside the image as border color. |
no |
|
|
angle |
int |
angle units |
no |
Apply an image layer to the image.
io=overlay:image,asset:{asset_id},width:200,opacity:45,angle:45,gravity:center,padding:30
|
Name |
Type |
Default Value |
Description |
Range |
Required |
|---|---|---|---|---|---|
|
asset |
uuid |
The existing asset ID of a Bynder image asset (used for the overlay) |
yes |
||
|
width |
int |
overlay width |
﹥0 |
no |
|
|
height |
int |
overlay height |
﹥0 |
no |
|
|
rotate |
int |
rotation amount in degrees |
0-359 |
no |
|
|
opacity |
int |
100% |
adjust overlay transparency |
0-100 |
no |
|
gravity |
string |
center |
|
no |
|
|
padding |
int |
applies padding to the overlay image |
﹥0 |
no |
Output
Convert the original file to a JPG, PNG, WEBP or AVIF file.
?format=jpg
Example URLs:
https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?format=jpg
https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?format=png
https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?format=webp
https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?format=avif
|
Name |
Type |
Range |
Required |
|---|---|---|---|
|
format |
string |
jpg, png, webp, avif |
yes |
?quality=80
Set the quality of the output file. This only works for webP and jpg files.
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?quality=10
|
Name |
Type |
Range |
Required |
|---|---|---|---|
|
quality |
int |
1-100 |
yes |
&download=true
Ensure that the download of the DAT derivative will start automatically upon visiting the URL.
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?download=true
|
Name |
Type |
Range |
Required |
|---|---|---|---|
|
download |
int |
true |
yes |
Limitations
DAT does not currently support SVG as an output format.
If you would like to use an SVG as an output, you should mark the file as Public in the Advanced Rights section of the asset, then use the Original URL that will appear in the Public Links section of the Asset Detail view.
SVG files loaded into Bynder will still generate Webp DAT derivatives that can be used with the DAT UI and Presets.
Learn More
Updated
Comments
0 comments
Article is closed for comments.