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.

Skip Directly To

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

Vignette

Flip

Temperature

Mirror

Border

Background

Fill

 

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

Fit

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://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?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 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

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.

Scale

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://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?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

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://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=transform:crop,shape:circle,width:600,height:800,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 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

shape

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

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

Mirror

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

Border

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://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/?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 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

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

Opacity

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

Sepia

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

Contrast

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

Brightness

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

Grayscale

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

Blur

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

Name

Type

Range

Required

radius

int

﹥0 (blur radius in pixels)

No

Sharpness

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

Saturation

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

Vignette

With this transformation you can add a vignette effect to the image.

?io=filter:vignette,amount:100,color:black,softness:50

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?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

Temperature

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

Color Overlay

The below transformation will apply an overlay with a solid color and specified transparency to the image.

?io=overlay:box,color:red,opacity:20

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?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

Text Overlay

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

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=overlay:text,content:TEST,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

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

Image Overlay

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

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=overlay:image,asset:46759cf6-0ac2-4e5e-9ae5-db3659a7465d,width:100,height:100,gravity:bottomleft

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

  • center

  • right

  • left

  • topleft

  • top

  • topright

  • bottomleft

  • bottom

  • bottomright

no

padding

int

applies padding to the overlay image

﹥0

no

Convert Output File to JPG or PNG

With this transformation you can convert the original file to a JPG or PNG 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

Name

Type

Range

Required

format

string

jpg, png

yes

Output Quality
?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

Automatic Download
&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

Learn More