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.

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

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

music.jpg

Music Photo

5760 × 3840 pixels

party.jpg

Party Photo

5616 × 3744 pixels

musician.jpg

Musician Photo

2766 × 3470 pixels

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 derivative URL.

Fill

The below fill operations will first resize the smallest side of the image based on the specified dimensions. The long side of the image will be resized accordingly. The remaining part of the long side may be cropped taking into consideration the focal point.

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

For File Service portals the focal point is automatically detected and saved in the database

?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 available in the database will be used to determine which areas are cropped if necessary to maintain the aspect ratio.

Gravity

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

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

crop_right_left_top_bottom.png

Gravity

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

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The gravity 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,gravity:topleft

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The gravity 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,gravity:topright

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The gravity 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,gravity:left

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The gravity 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,gravity:right

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The gravity 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,gravity:bottom

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The gravity 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,gravity:bottomleft

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The gravity 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,gravity:bottomright

The system will first resize the image to the specified dimensions of 100x200 pixels without changing the aspect ratio. The gravity 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&gravity: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

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&focuspoint=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 acrop. 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 be resized to the specified height of 200 pixels without applying a 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.

Note

The below operations can't be used standalone and need to be applied in addition to one of the above mentioned parameters.

Focal Point

Parameters

Result

Not Applicable

&output=jpg

This will create the derivative in the jpg file format.

Not Applicable

&output=png

This will create the derivative in the png file format.

Filter Transformations

Type

Parameters

Result

opacity

?io=filter:opacity,amount:60

This will set the transparency of the image to 60%. The transparency is set using a percentage ranging from 0 to 100.

sepia

?io=filter:sepia

This will apply a sepia filter to the image.

contrast

?io=filter:contrast,amount:80

This will set the contrast of the image to 80%. The contrast is set using a percentage ranging from -100 to 100.

brightness

?io=brightness,amount:80

This will set the brightness of the image to 80%. The brightness is set using a percentage ranging from -100 to 100.

grayscale

?io=filter:grayscale

This will apply a black and white filter to the image.

blur

?io=filter:blur,radius:20

This will blur the image with a blur length of 20 pixels.

Overlay Transformations

Type

Parameters

Result

box

?io=overlay:box,color:yellow,opacity:10

This will apply a yellow overlay box to the image with an opacity set to 10%.

The opacity is set using a percentage ranging from 0 to 100. The color can be set by using named color values or hex values.

Transform Transformations

Type

Parameters

Result

border

?io=transform:border,width:20,color:white

This will add a white border to the image with a width of 20 pixels.

The border size can be set in pixels and the default border color is white. Optionally, you can change the border color by using named color values or hex values.

Other Transformations

Transformation

Focal Point

Parameters

Explanation & Result

Crop Circular Shapes

Defined in Database

?io=transform:crop,shape:circle,width:500,height:500

?io=transform:crop,shape:circle,width:300,height:200

?io=transform:crop,shape:circle,width:500,height:500,blur:88

The image will be cropped with a circular shape around the focus point.

If the width is the same as the height the shape will become a circle.

If the width is larger than the height the shape will become a landscape oval.

If the width is smaller than the height the shape will become a portrait oval.

You can add blurred edges to circular shapes by adding blur to the parameter. The supported blur range lies between 0 and 100 where 0 is no blur and 100 is the maximum blur.

Background Color

Not Applicable

?io=background:yellow

?io=background:fff00

?io=background:auto

Tip

The color can be indicated by its name (yellow), with an hexadecimal color code (fff00), or auto.

The system will fill the transparent layer of the image with the indicated color.

Rotation of Image

Not Applicable

?io=transform:rotate,angle:270

The system will rotate the image from 0 to 360 degrees.

Learn More