You can create Dynamic Asset Transformations by adding parameters to the DAT derivative URL or by adding them in your Asset Detail View. Once you've set up all the necessary transformations, you can configure the output options. Once generated, the DAT derivative will have the selected file extension. When you need to apply Dynamic Asset Transformation (DAT) on a website or another platform, automating the process is crucial. For instance, in the case of a web store where product photos require consistent cropping to 800 by 800 pixels with a 5-pixel border, manually creating these transformations in Bynder repeatedly is inefficient. Utilizing our API, you can integrate DAT on your external platform by utilizing the DAT base URL along with specific parameters to achieve the desired transformations efficiently.
How to enable this feature in your portal?
Contact your Customer Success Manager to enable this feature in your portal and learn about any associated costs.
-
Navigate to Asset Bank.
-
Select the asset that you want to create a Dynamic Asset Transformation.
-
Copy the DAT derivative URL in the Link to Public Files section. This URL functions as the base URL to which you'll add your transformations.
-
Create your customized DAT derivative by adding one of the transformations indicated in the table below directly behind the derivative URL.
-
Click the corresponding dropdown for more detailed information on the available transformations.
Transform
Fill
-
Ensure that as much of the image as possible remains visible. With gravity, you can set which part of the image shouldn't be cropped. Depending on the entered dimensions, other sides may still be cropped. 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 derivative) |
|
|
Transformed image height in pixels |
height |
int |
﹥0 and less than max height (max height = width of the base DAT derivative) |
|
|
Indicates which area to keep for the transformation. The other areas may be cropped. |
gravity |
sting |
center |
Center, top, top left, topright, left, right, bottom, bottom left, bottom right |
Resize the image based on the specified parameters. The aspect ratio will not change. See the example below.
?io=transform:fit,width:200,height:200
|
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 derivative) |
Yes |
|
Transformed image height in pixels |
height |
int |
﹥0 and less than max height (max height = width of the base DAT derivative) |
Yes |
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 derivative) |
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 derivative) |
|||
|
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. |
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
|
Name |
Type |
Default value |
|---|---|---|
|
width |
int |
﹥0 and less than max width (max width = width of the base DAT derivative) |
|
height |
int |
﹥0 and less than max height (max height = width of the base DAT derivative) |
Crop a part of the image. See the example below.
?io=transform:crop,width:200,height:200
|
Name |
Type |
Default Value |
Description |
Range |
Required |
|---|---|---|---|---|---|
|
width |
int |
﹥0 and less than max width (max width = width of the base DAT derivative) |
Yes |
||
|
height |
int |
﹥0 and less than max width (max width = width of the base DAT derivative) |
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 the image clockwise based on the specified degrees. See the example below.
?io=transform:rotate,angle:270
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?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 |
Flip the image vertically. See the example below.
?io=transform:flip
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=transform:flip
Flip the image horizontally. See the example below.
?io=transform:mirror
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=transform:mirror
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
|
Name |
Type |
Description |
Range |
Required |
|---|---|---|---|---|
|
width |
int |
The border width specified in pixels. |
﹥0 and less than the maximum width of the DAT derivative |
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 |
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 |
Filters
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.
Updated