Dynamic Asset Transformation (DAT) allows you to generate customized derivatives on demand for use in external systems. You can request a customized derivative by adding parameters to DAT derivative URL.
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 in the DAM. If needed, you can override this focus point when creating a new transformation or preset. This override will not change the focus point for the asset in the portal, it will only be changed for the purposes of the transformation. The DAT service also automatically invalidates the Bynder 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 Bynder CDN reference is used, which ensures consistency across your brand.
Dynamic Asset Transformation is fully integrated into your Bynder DAM making sure you don't need to rely on external systems for derivative generation. Find out below how you can start integrating Dynamic Asset Transformation into your external websites, social media platforms and email newsletters.
Skip Directly To
Dynamic Asset Transformation give you the freedom to generate the derivative 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.
Are you not sure if Dynamic Asset Transformation is 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 focal point will be automatically detected.
https://datdemo.getbynder.com/transform/a8ad6713-8687-4356-b22f-d09334bdf7b2/Musician?io=transform:fill,width:1200,height:1200
-
Music Photo
https://datdemo.getbynder.com/transform/fb60f96f-ebf2-4a69-9ed8-8a828ef17283/Music -
Party Photo
https://datdemo.getbynder.com/transform/f4229dda-83d4-4414-aad7-26bec3365391/Party -
Musician Photo
https://datdemo.getbynder.com/transform/a8ad6713-8687-4356-b22f-d09334bdf7b2/Musician
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.
You can create Dynamic Asset Transformations on the fly in the Asset Detail view or you can create them by adding parameters to the DAT derivative URL.
Note
All image types supported for conversion and creating derivatives are also supported as input files for DAT. Learn more here.
Follow the steps below to create a DAT derivative from within the Asset Detail view.
-
Go to the asset for which you want to create a DAT derivative.
-
Click Transformations in the Info tab of the Asset Detail view. A screen to configure the DAT transformations will open.
-
(Optional) Click the DAT preset you want to apply in the right sidebar. A preview of what the DAT derivative will look like will be generated.
-
Click
Transform to create a custom DAT derivative on the fly.
-
Click the ➕ Add transformation button
-
Open the Transformation dropdown and select one of the available transformations. Read more about the transformations here.
-
Use the fields, sliders, and options that appear to configure the transformation.
- If you’d like to update the focus point set on the asset level, when applying crop or fill transformations, click the dropdown and select Override focus point.
- Select a new focus point by editing the percentages or directly clicking on the asset with the real time editor. This focus point will only be applied to the transformed asset, it won’t change the preset DAM focus point.
-
(Optional) Click the ➕ Add transformation button if you want to add another transformation to the DAT preset.
-
Click the Format dropdown and select the file extension you want the output file of your DAT derivative to have between WebP, JPG, PNG, AVIF or Auto (recommended).
If you select Auto (recommended), WebP will be the default output for all browsers that accept it, and in all other cases it will be JPG.
-
Click the Quality dropdown and select one of the available options to set the quality of the output file.
-
Click the
button to copy the URL of the DAT derivative and/or click
and Download to download the DAT derivative.
-
Click Done to close the screen.
With this transformation you can change the background color of a transparent image. See the example below.
-
Enter the HEX code of the color you want to fill the background with in the Color field.
With this transformation you can add a border around the image and specify the border width and border color.
-
Enter the HEX code for the border color in the Color field.
-
Set the border width by entering the number of pixels in the Border field.
With this transformation you can crop a part of the image.
-
Select the shape you want to apply to the crop by choosing one of the below options
-
Rectangle
The image will be cropped using a rectangle shape.
-
Ellipse
The image will be cropped using an ellipse shape.
-
Clipping Path
The image will be cropped respecting the clipping path. Clipping paths can be set up using image editing software. Anything inside the path will be included after the clipping path is applied and the rest of the image will be removed.
Caution
Clipping Path is supported only for PSD and TIFF files
-
-
Set the dimensions of your crop using the width and height fields in the Dimensions section.
Note
The dimensions can only be set for Rectangle and Ellipse crops.
With this transformation you can remove the image background. The system will use the available clipping path information to mask the image and remove the background.
Tip
Fill the removed background with a solid color using the Background transformation.
With this transformation you can extend the image to the specified dimensions.
-
Decide how much you want to extend the image canvas by entering the new width and height in the Dimensions section.
-
(Optional) Enter the HEX code of a color in the Background field if you want to fill the transparent area of the extended canvas with a solid background color.
With this transformation you can resize the image without distortion (losing the aspect ratio) As much of the image as possible will remain visible. The image may be cropped to create an image with the specified dimensions.
-
Resize the image by entering the desired dimensions in the width and height fields of the Dimensions section.
Note
We cannot upscale the image as this would lead to quality loss.
-
Open the Focus dropdown and decide which part of the image should be cropped by choosing one of the following options
-
Focus point
The image will be cropped from the predefined focus point ensuring that the most important visual information will be available in your crop.
-
Gravity
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.
Use the gravity picker or the dropdowns in the Graviy section to set the gravity
-
With this transformation you can resize the image based on the specified dimensions. The aspect ratio won't change which means one size of the resized image may not have the exact specified dimension.
-
Resize your image by entering the desired image in the width and height fields in the Dimensions section.
Note
We cannot upscale the image as this would lead to quality loss.
With this transformation you can rotate the image clockwise based on the specified degrees.
-
Enter the number of degrees you want to rotate the image in the Angle field.
With this transformation you can set the opacity level of the DAT derivate.
-
Use the Opacity slider to set the opacity level.
With this transformation you can adjust the contrast of the DAT derivate.
-
Use the Contrast slider to set the opacity level.
With this transformation you can adjust the brightness of the DAT derivative.
-
Use the Brightness slider to set the brightness of the DAT derivative.
With this transformation you can apply blur to the DAT derivative.
-
Use the Blur slider to set the blur level of the DAT derivative.
With this transformation you can set the sharpness level of the DAT derivate.
-
Use the Sharpness slider to set the brightness of the DAT derivative.
With this transformation you can apply a text layer to the image.
-
Enter the text for the overlay in the Text field.
-
Select the font for the text overlay in the Font dropdown.
-
Enter the HEX code of the desired font color in the Text color field.
-
Choose the position for the text overlay using the position picker or the dropdowns in the Position section.
-
(Optional) Set the padding for the text in the Padding field.
-
(Optional) Enter the number of degrees you want to rotate the text in the Angle field.
With this transformation you can overlay an image over another.
-
Select the asset you want to overlay by clicking on Choose asset in the image section
-
Search through your DAM assets and select the one you would like to use
-
Enter a percentage(1-100) to determine the opacity of the overlay image in the Opacity field
-
Select the position of the overlay image using the position picker or the dropdowns in the Position section
-
Enter a number (0-359) to determine the angle of the overlay image in the Angle section
-
Open the asset for which 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 |
Filters |
Overlay |
Output |
|
Fill |
Brightness |
Color Fill/Box |
File Type |
|
Fit |
Grayscale |
Text |
Quality |
|
Extend |
Blur |
Image |
Automatic Download |
|
Scale |
Sharpness |
||
|
Crop |
Saturation |
||
|
Rotate |
Temperature |
||
|
Flip |
|||
|
Mirror |
|||
|
Border |
|||
|
Background |
-
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 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, 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
|
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 |
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 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. |
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
|
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) |
With this transformation you can 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 |
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://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 |
With this transformation you can 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
With this transformation you can 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
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
|
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 |
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 |
With this transformation you can 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 |
With this transformation you can 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
With this transformation you can 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 |
With this transformation you can 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 |
With this transformation you can 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
With this transformation you can 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
With this transformation you can 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 |
With this transformation you can 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 |
With this transformation you can 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 |
With this transformation you can 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 |
The below transformation will 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 |
The below transformation will apply a text layer to the image.
?io=overlay:text,content:some%20text,font:Arial,size:11,color:black,angle:45
|
Name |
Type |
Default Value |
Description |
Range |
Required |
|---|---|---|---|---|---|
|
content |
string |
URL encoded string |
yes |
||
|
font |
string |
arial |
supported 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 |
The below transformation will 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 |
With this transformation you can 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
With this transformation you can 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
With this transformation you can 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 |
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
Comments
0 comments
Article is closed for comments.