Knowledge Base

Dynamic Asset Transformations (DAT)

Would you like to generate customized derivatives on demand and use them in your external systems? With Dynamic Asset Transformations (DAT) 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.

Dynamic Asset Transformations are 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 Transformations into your external websites, social media platforms and email newsletters.

How to Use Dynamic Asset Transformations?

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.

How to Enable Dynamic Asset Transformations?

Inform your Customer Success Manager that you would like to participate in the Beta program. 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 derivative URL.

  1. Open the asset for which you want to create a Dynamic Asset Transformation.

  2. 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.

  3. Create your customized DAT derivative by adding one of the transformations indicated in the table below directly behind the D derivative URL.

Fill

The below fill operations resize the image to the specified dimensions without distortion. The image may be cropped. When setting a manual focus point the first value is the X axis and the second value is the Y axis. For the X axis 0 is the left corner of the image and 1 is the right corner of the image. For the Y axis 0 is the top corner of the image and 1 is the bottom corner.

Focal Point

Parameters

Result

Example

Center

?io=transform:fill,width:100,height:200

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The focal point will be the center of the image. If necessary, the image will be cropped starting from the center of the image.

crop_right_left_top_bottom.png

Auto detected

?io=transform:fill,width:100,height:200,focus:auto

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The focal point will be detected automatically and if it can't be detected the image will be used. If necessary, the image will be cropped starting from the focal point.

Depends on the image

Gravity

?io=transform:fill,width:100,height:200,focus:top

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The focal point will be set to the top side of the image. If necessary, the bottom, right and left side of the image will be used to crop the image.

crop_right_left_bottom.png

Gravity

?io=transform:fill,width:100,height:200,focus:topleft

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The focal point will be set to the top left side of the image. If necessary, the bottom and right side of the image will be used to crop the image.

crop_right_bottom.png

Gravity

?io=transform:fill,width:100,height:200,focus:topright

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The focal point will be set to the top right side of the image. If necessary, the bottom and left side of the image will be used to crop the image.

crop_left_bottom.png

Gravity

?io=transform:fill,width:100,height:200,focus:left

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The focal point will be set to the left side of the image. If necessary, the right side of the image will be used to crop the image.

crop_top_bottom_right.png

Gravity

?io=transform:fill,width:100,height:200,focus:right

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The focal point will be set to the right side of the image. If necessary, the bottom and left side of the image will be used to crop the image.

crop_top_bottom_left.png

Gravity

?io=transform:fill,width:100,height:200,focus:bottom

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The focal point will be set to the bottom side of the image. If necessary, the top side of the image will be used to crop the image.

crop_top_right_left.png

Gravity

?io=transform:fill,width:100,height:200,focus:bottomleft

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The focal point will be set to the bottom left side of the image. If necessary, the top and right side of the image will be used to crop the image.

crop_top_right.png

Gravity

?io=transform:fill,width:100,height:200,focus:bottomright

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The focal point will be set to the bottom right side of the image. If necessary, the top and left side of the image will be used to crop the image.

crop_top_left.png

Manual Input

?io=transform:fill,width:100,height:200,focus:0.5;0.6

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The focal point will be set to value as specified in the parameters. Use a value between 0 and 1 to specify both the width and height of the focal point. If necessary, the top and right side of the image will be used to crop the image.

Crop

The below crop operations will crop the image based on the specified dimensions. The image will not be resized first, which may result in some parts of the image being cut off. When setting a manual focus point the first value is the X axis and the second value is the Y axis. For the X axis 0 is the left corner of the image and 1 is the right corner of the image. For the Y axis 0 is the top corner of the image and 1 is the bottom corner.

Focal Point

Parameters

Result

Center

?io=transform:crop,width:100,height:200

The system will crop the image to 100x200 pixels starting from the center of the image.

Auto detected

?io=transform:crop,width:100,height:200,focus:auto

The system will crop the image to 100x200 pixels starting from the automatically detected focal point of the image. If no focal point can be detected the center of the image will be used.

Manual Input

?io=transform:crop,width:100,height:200,focus:0.5;0.6

The system will crop the image to 100x200 pixels starting from the specified focal point. Use a value between 0 and 1 to specify both the width and height of the focal point.

Fit

The below operations resize the image to the specified dimensions while remaining the aspect ratio.

Focal Point

Parameters

Result

Not Applicable

?io=transform:fit,width:100,height:200

The system will resize the image to the specified dimensions of 100x200 pixels while maintaining the aspect ratio. No cropping will be applied. This means that only one side of the image will match the exact dimensions as specified in the parameters.

Not Applicable

?io=transform:fit,width:100

The image will be resized to the specified width of 100 pixels without applying crop. The height of the image will be resized accordingly respecting the aspect ratio of the original image.

Not Applicable

?io=transform:fit,height:200

The image will bel resized the specified height of 200 pixels without applying crop. The width of the image will be resized accordingly respecting the aspect ratio of the original image.

Extend

Focal Point

Parameters

Result

Not Applicable

?io=transform:extend,width:200,height:200,background:blue

The system will resize the image to the specified dimensions of 200x200 pixels while maintaining the aspect ratio. The canvas will be extended if the image does not fill the whole area. Use the parameter to set the color for the canvas.

File Format

The below operations will override the default webP file type with the file type as specified in the parameters.

Focal Point

Parameters

Result

Not Applicable

,format=jpg

This will create the derivative in the jpg file format.

Not Applicable

,format=png

This will create the derivative in the png file format.

Learn More