Dynamic Asset Transformations (DAT) in Webdam

Would you like to generate customized presets on demand and use them in your external systems? With Dynamic Asset Transformations (DAT) you can request a customized preset by adding parameters to the DAT Link.

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

The DAT service also automatically invalidates the Webdam 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 Webdam CDN reference is used, which ensures consistency across your brand.

Dynamic Asset Transformations are fully integrated into your Webdam account so you don't need to rely on external systems for preset 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 Transformations give you the freedom to generate the preset 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 focus point will be the center of the image or automatically update to your pre-selected focus point for the asset.

https://training.webdamdb.com/transform/MBazHJSI27v71sKM/music.jpg?accountId=11445?io=transform:fill,width:1200,height:1200
  • Music Photo

    https://training.webdamdb.com/transform/MBazHJSI27v71sKM/music.jpg?accountId=11445
  • Party Photo

    https://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?accountId=11445
  • Musician Photo

    https://training.webdamdb.com/transform/Q8cl0cW9Xa571Mez/musician.jpeg?accountId=11445

 

music.jpg

Music Photo

5760 × 3840 pixels

party.jpg

Party Photo

5616 × 3744 pixels

musician.jpeg

Musician Photo

2766 × 3470 pixels

 

How to Enable Dynamic Asset Transformations?

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.

 

How to Create Dynamic Asset Transformations?

You can create Dynamic Asset Transformations by adding parameters to the DAT Link.

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

  2. Click the blobid0.png button.
  3. Copy the DAT Link in the Public File Links section. This URL functions as the base URL to which you'll add your transformations.

  4. Create your customized Dynamic Asset Transformations by adding one of the parameters indicated in the table below directly next to the DAT Link.

 

Dynamic Asset Transformation

 

 

DAT - Available Transformations

 

Transform Transformations

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

 

Transformed image height in pixels

height

int

﹥0 and less than max height (max height = width of the base DAT image)

 

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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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 image)

Yes

Transformed image height in pixels

height

int

﹥0 and less than max height (max height = width of the base DAT image)

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

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

     

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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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 image)

height

int

﹥0 and less than max height (max height = width of the base DAT image)

 

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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?io=transform:crop,path:circle,width:600,height:600,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 image)

   

Yes

height

int

﹥0 and less than max width (max width = width of the base DAT iamge)

   

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

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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?io=transform:flip

 

Mirror

With this transformation you can flip the image horizontally. See the example below.

?io=transform:mirror

Example URL: https://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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 image

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

 

Filter

Opacity

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

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

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

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

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

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

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

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

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

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

Overlay

Color Overlay

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

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

Image Overlay

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

Output

Output Quality

?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

Automatic Download

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

 

Learn More

Would you like to generate customized presets on demand and use them in your external systems? With Dynamic Asset Transformations (DAT) you can request a customized preset by adding parameters to the DAT Link.

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

The DAT service also automatically invalidates the Webdam 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 Webdam CDN reference is used, which ensures consistency across your brand.

Dynamic Asset Transformations are fully integrated into your Webdam account so you don't need to rely on external systems for preset 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 Transformations give you the freedom to generate the preset 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 focus point will be the center of the image or automatically update to your pre-selected focus point for the asset.

https://training.webdamdb.com/transform/MBazHJSI27v71sKM/music.jpg?accountId=11445?io=transform:fill,width:1200,height:1200
  • Music Photo

    https://training.webdamdb.com/transform/MBazHJSI27v71sKM/music.jpg?accountId=11445
  • Party Photo

    https://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?accountId=11445
  • Musician Photo

    https://training.webdamdb.com/transform/Q8cl0cW9Xa571Mez/musician.jpeg?accountId=11445

 

music.jpg

Music Photo

5760 × 3840 pixels

party.jpg

Party Photo

5616 × 3744 pixels

musician.jpeg

Musician Photo

2766 × 3470 pixels

 

How to Enable Dynamic Asset Transformations?

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.

 

How to Create Dynamic Asset Transformations?

You can create Dynamic Asset Transformations by adding parameters to the DAT Link.

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

  2. Click the blobid0.png button.
  3. Copy the DAT Link in the Public File Links section. This URL functions as the base URL to which you'll add your transformations.

  4. Create your customized Dynamic Asset Transformations by adding one of the parameters indicated in the table below directly next to the DAT Link.

 

Dynamic Asset Transformation

 

 

DAT - Available Transformations

 

Transform Transformations

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

 

Transformed image height in pixels

height

int

﹥0 and less than max height (max height = width of the base DAT image)

 

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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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 image)

Yes

Transformed image height in pixels

height

int

﹥0 and less than max height (max height = width of the base DAT image)

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

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

     

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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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 image)

height

int

﹥0 and less than max height (max height = width of the base DAT image)

 

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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?io=transform:crop,path:circle,width:600,height:600,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 image)

   

Yes

height

int

﹥0 and less than max width (max width = width of the base DAT iamge)

   

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

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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?io=transform:flip

 

Mirror

With this transformation you can flip the image horizontally. See the example below.

?io=transform:mirror

Example URL: https://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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 image

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

 

Filter

Opacity

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

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

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

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

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

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

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

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

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

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

Overlay

Color Overlay

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

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

Image Overlay

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

Output

Output Quality

?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

Automatic Download

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

 

Learn More

  • Focus Point

    Would you like to generate customized presets on demand and use them in your external systems? With Dynamic Asset Transformations (DAT) you can request a customized preset by adding parameters to the DAT Link.

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

    The DAT service also automatically invalidates the Webdam 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 Webdam CDN reference is used, which ensures consistency across your brand.

    Dynamic Asset Transformations are fully integrated into your Webdam account so you don't need to rely on external systems for preset 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 Transformations give you the freedom to generate the preset 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 focus point will be the center of the image or automatically update to your pre-selected focus point for the asset.

    https://training.webdamdb.com/transform/MBazHJSI27v71sKM/music.jpg?accountId=11445?io=transform:fill,width:1200,height:1200
    • Music Photo

      https://training.webdamdb.com/transform/MBazHJSI27v71sKM/music.jpg?accountId=11445
    • Party Photo

      https://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?accountId=11445
    • Musician Photo

      https://training.webdamdb.com/transform/Q8cl0cW9Xa571Mez/musician.jpeg?accountId=11445

     

    music.jpg

    Music Photo

    5760 × 3840 pixels

    party.jpg

    Party Photo

    5616 × 3744 pixels

    musician.jpeg

    Musician Photo

    2766 × 3470 pixels

     

    How to Enable Dynamic Asset Transformations?

    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.

     

    How to Create Dynamic Asset Transformations?

    You can create Dynamic Asset Transformations by adding parameters to the DAT Link.

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

    2. Click the blobid0.png button.
    3. Copy the DAT Link in the Public File Links section. This URL functions as the base URL to which you'll add your transformations.

    4. Create your customized Dynamic Asset Transformations by adding one of the parameters indicated in the table below directly next to the DAT Link.

     

    Dynamic Asset Transformation

     

     

    DAT - Available Transformations

     

    Transform Transformations

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

     

    Transformed image height in pixels

    height

    int

    ﹥0 and less than max height (max height = width of the base DAT image)

     

    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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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 image)

    Yes

    Transformed image height in pixels

    height

    int

    ﹥0 and less than max height (max height = width of the base DAT image)

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

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

         

    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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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 image)

    height

    int

    ﹥0 and less than max height (max height = width of the base DAT image)

     

    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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?io=transform:crop,path:circle,width:600,height:600,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 image)

       

    Yes

    height

    int

    ﹥0 and less than max width (max width = width of the base DAT iamge)

       

    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

    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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?io=transform:flip

     

    Mirror

    With this transformation you can flip the image horizontally. See the example below.

    ?io=transform:mirror

    Example URL: https://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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 image

    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

     

    Filter

    Opacity

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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

    Overlay

    Color Overlay

    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

    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

    Image Overlay

    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

    Output

    Output Quality

    ?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

    Automatic Download

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

     

    Learn More

    • Focus Point

      Would you like to generate customized presets on demand and use them in your external systems? With Dynamic Asset Transformations (DAT) you can request a customized preset by adding parameters to the DAT Link.

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

      The DAT service also automatically invalidates the Webdam 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 Webdam CDN reference is used, which ensures consistency across your brand.

      Dynamic Asset Transformations are fully integrated into your Webdam account so you don't need to rely on external systems for preset 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 Transformations give you the freedom to generate the preset 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 focus point will be the center of the image or automatically update to your pre-selected focus point for the asset.

      https://training.webdamdb.com/transform/MBazHJSI27v71sKM/music.jpg?accountId=11445?io=transform:fill,width:1200,height:1200
      • Music Photo

        https://training.webdamdb.com/transform/MBazHJSI27v71sKM/music.jpg?accountId=11445
      • Party Photo

        https://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?accountId=11445
      • Musician Photo

        https://training.webdamdb.com/transform/Q8cl0cW9Xa571Mez/musician.jpeg?accountId=11445

       

      music.jpg

      Music Photo

      5760 × 3840 pixels

      party.jpg

      Party Photo

      5616 × 3744 pixels

      musician.jpeg

      Musician Photo

      2766 × 3470 pixels

       

      How to Enable Dynamic Asset Transformations?

      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.

       

      How to Create Dynamic Asset Transformations?

      You can create Dynamic Asset Transformations by adding parameters to the DAT Link.

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

      2. Click the blobid0.png button.
      3. Copy the DAT Link in the Public File Links section. This URL functions as the base URL to which you'll add your transformations.

      4. Create your customized Dynamic Asset Transformations by adding one of the parameters indicated in the table below directly next to the DAT Link.

       

      Dynamic Asset Transformation

       

       

      DAT - Available Transformations

       

      Transform Transformations

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

       

      Transformed image height in pixels

      height

      int

      ﹥0 and less than max height (max height = width of the base DAT image)

       

      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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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 image)

      Yes

      Transformed image height in pixels

      height

      int

      ﹥0 and less than max height (max height = width of the base DAT image)

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

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

           

      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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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 image)

      height

      int

      ﹥0 and less than max height (max height = width of the base DAT image)

       

      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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?io=transform:crop,path:circle,width:600,height:600,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 image)

         

      Yes

      height

      int

      ﹥0 and less than max width (max width = width of the base DAT iamge)

         

      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

      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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?io=transform:flip

       

      Mirror

      With this transformation you can flip the image horizontally. See the example below.

      ?io=transform:mirror

      Example URL: https://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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 image

      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

       

      Filter

      Opacity

      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

      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

      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

      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

      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

      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

      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

      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

      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

      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

      Overlay

      Color Overlay

      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

      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

      Image Overlay

      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

      Output

      Output Quality

      ?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

      Automatic Download

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

       

      Learn More

       

       

       

       

      Would you like to generate customized presets on demand and use them in your external systems? With Dynamic Asset Transformations (DAT) you can request a customized preset by adding parameters to the DAT Link.

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

      The DAT service also automatically invalidates the Webdam 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 Webdam CDN reference is used, which ensures consistency across your brand.

      Dynamic Asset Transformations are fully integrated into your Webdam account so you don't need to rely on external systems for preset 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 Transformations give you the freedom to generate the preset 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 focus point will be the center of the image or automatically update to your pre-selected focus point for the asset.

      https://training.webdamdb.com/transform/MBazHJSI27v71sKM/music.jpg?accountId=11445?io=transform:fill,width:1200,height:1200
      • Music Photo

        https://training.webdamdb.com/transform/MBazHJSI27v71sKM/music.jpg?accountId=11445
      • Party Photo

        https://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?accountId=11445
      • Musician Photo

        https://training.webdamdb.com/transform/Q8cl0cW9Xa571Mez/musician.jpeg?accountId=11445

       

      music.jpg

      Music Photo

      5760 × 3840 pixels

      party.jpg

      Party Photo

      5616 × 3744 pixels

      musician.jpeg

      Musician Photo

      2766 × 3470 pixels

       

      How to Enable Dynamic Asset Transformations?

      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.

       

      How to Create Dynamic Asset Transformations?

      You can create Dynamic Asset Transformations by adding parameters to the DAT Link.

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

      2. Click the blobid0.png button.
      3. Copy the DAT Link in the Public File Links section. This URL functions as the base URL to which you'll add your transformations.

      4. Create your customized Dynamic Asset Transformations by adding one of the parameters indicated in the table below directly next to the DAT Link.

       

      Dynamic Asset Transformation

       

       

      DAT - Available Transformations

       

      Transform Transformations

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

       

      Transformed image height in pixels

      height

      int

      ﹥0 and less than max height (max height = width of the base DAT image)

       

      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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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 image)

      Yes

      Transformed image height in pixels

      height

      int

      ﹥0 and less than max height (max height = width of the base DAT image)

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

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

           

      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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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 image)

      height

      int

      ﹥0 and less than max height (max height = width of the base DAT image)

       

      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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?io=transform:crop,path:circle,width:600,height:600,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 image)

         

      Yes

      height

      int

      ﹥0 and less than max width (max width = width of the base DAT iamge)

         

      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

      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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?io=transform:flip

       

      Mirror

      With this transformation you can flip the image horizontally. See the example below.

      ?io=transform:mirror

      Example URL: https://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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://training.webdamdb.com/transform/EB3dNjEBZv88IHSe/party.jpeg?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 image

      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

       

      Filter Banana

      Opacity

      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

      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

      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

      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

      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

      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

      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

      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

      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

      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

      Overlay

      Color Overlay

      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

      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

      Image Overlay

      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

      Output

      Output Quality

      ?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

      Automatic Download

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

       

      Learn More

Updated

Was this article helpful?

0 out of 0 found this helpful

We're sorry to hear that!

Learn more with Webdam Webinars

Have more questions? Check out Webdam Webinars

Comments

0 comments

Article is closed for comments.