Create a DAT Derivative Using URL Parameters

You can create Dynamic Asset Transformations (DAT) by adding parameters directly to the DAT derivative URL, in addition to configuring them in the Asset Detail View. By appending transformation, filter, overlay, and output parameters to the base DAT URL, you can generate customized derivatives on the fly. Once generated, the DAT derivative will have the selected file extension.

This article provides a step-by-step guide and a complete reference of all supported URL parameters.
 

Video Tutorial: Create DAT Transformations Using Parameters

Watch this short walkthrough of how to build DAT transformations by appending parameters to the DAT derivative URL, including cropping, borders, overlays, and output settings.

Who?

  • This feature/solution requires Customer Support to enable.
  • Once enabled, individual permissions can be managed by the Bynder Admin.
  • Users need access to the Asset Bank and the Link to Public Files section of the Asset Detail View to retrieve the base DAT derivative URL.
  • Developers can retrieve the DAT base URL through the Bynder API to automate transformations on external platforms.

Why?

When you need to apply DAT on a website or another platform, automating the process is crucial. For example, in a web store where product photos require consistent cropping to 800 by 800 pixels with a 5-pixel border, manually creating these transformations in Bynder repeatedly is inefficient.

By appending parameters to the DAT derivative URL, you can:

  • Generate consistent, repeatable transformations without manual work in the Bynder UI.
  • Integrate DAT into external platforms via the API by retrieving the base URL once and appending parameters on the fly.
  • Chain multiple transformations, filters, and overlays in a single URL, and control output format, quality, and download behavior.

How?

Create a DAT Derivative Using URL Parameters

  1. Navigate to the Asset Bank.
  2. Select the asset that you want to create a Dynamic Asset Transformation.
  3. 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.
  4. Create your customized DAT derivative by adding one of the transformations indicated in the table below directly behind the derivative URL.
  5. Click the corresponding dropdown for more detailed information on the available transformations.

Combining parameters: chain multiple transformations with &. Example — crop to 800×800 and add a 5px white border, output as WebP:

https://yourportal.bynder.com/transform/{asset_id}/asset-name?io=transform:fill,width:800,height:800&io=transform:border,width:5,color:white&format=webp

All Transformation Options at a Glance

The complete list of parameters you can append to a DAT derivative URL. See the detailed sections below for full property details.

Category Option Example syntax
Transform Fill ?io=transform:fill,width:100,height:200,gravity:center
Transform Fit ?io=transform:fit,width:200,height:200
Transform Extend ?io=transform:extend,width:110,height:100
Transform Scale ?io=transform:scale,width:200,height:200
Transform Crop ?io=transform:crop,width:200,height:200
Transform Rotate ?io=transform:rotate,angle:270
Transform Flip (vertical) ?io=transform:flip
Transform Mirror (horizontal) ?io=transform:mirror
Transform Border ?io=transform:border,width:2,color:black
Transform Background ?io=transform:background,color:grey
Filter Opacity ?io=filter:opacity,amount:60
Filter Sepia ?io=filter:sepia
Filter Contrast ?io=filter:contrast,amount:80
Filter Brightness ?io=filter:brightness,amount:80
Filter Grayscale ?io=filter:grayscale
Filter Blur ?io=filter:blur,radius:20
Filter Sharpness ?io=filter:sharpness,amount:80
Filter Saturation ?io=filter:saturation,amount:80
Filter Vignette ?io=filter:vignette,amount:100,color:black,softness:50
Filter Temperature ?io=filter:temperature,amount:5000
Overlay Color overlay (box) ?io=overlay:box,color:red,opacity:20
Overlay Text overlay ?io=overlay:text,content:some%20text,font:Arial,size:11,color:black,angle:45
Overlay Image overlay ?io=overlay:image,asset:{asset_id},width:200,opacity:45,angle:45,gravity:center,padding:30
Output File format ?format=jpg (jpg, png, webp, avif)
Output Quality ?quality=80 (1–100; webp and jpg only)
Output Automatic download &download=true

Transform

Fill

Ensure that as much of the image as possible remains visible. With gravity, you can set which part of the image shouldn't be cropped. Depending on the entered dimensions, other sides may still be cropped. The aspect ratio is maintained. See the example below.

?io=transform:fill,width:100,height:200,gravity:center
Property Name Type Default Range / Notes 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 = height of the base DAT derivative) Yes
Area to keep; other areas may be cropped gravity string center center, top, topleft, topright, left, right, bottom, bottomleft, bottomright No

Fit

Resize the image based on the specified parameters. The aspect ratio will not change. See the example below.

?io=transform:fit,width:200,height:200
Property Name Type Range / Notes Required
Width in pixels width int >0 and less than max width Yes
Height in pixels height int >0 and less than max height Yes

Extend

Extend the image to the specified dimensions. See the example below.

?io=transform:extend,width:110,height:100
Name Type Default Range / Notes Required
width int — >0 and less than max width Yes
height int — >0 and less than max height No
background string white HTML color names or HEX codes; use auto for the image's dominant color No

Scale

Scale the image to the specified width and height. The aspect ratio may change. See the example below.

?io=transform:scale,width:200,height:200
Name Type Range / Notes
width int >0 and less than max width
height int >0 and less than max height

Crop

Crop a part of the image. See the example below.

?io=transform:crop,width:200,height:200
Name Type Default Description Range / Notes Required
width int — — >0 and less than max width Yes
height int — — >0 and less than max height Yes
gravity string center Crop starts from the specified area; this part of the image remains center, top, topleft, topright, left, right, bottom, bottomleft, bottomright No
path string circle Round crop shape. Equal width/height = circle; unequal = oval — No
background string white Add a background color HTML color names or HEX codes; auto for dominant color No
blur int 0 Blur the edge of the crop 0–100 No

Rotate

Rotate the image clockwise based on the specified degrees. See the example below.

?io=transform:rotate,angle:270
Name Type Default Range Required
angle int 0 0–359 Yes

Flip

Flip the image vertically. See the example below.

?io=transform:flip

Mirror

Flip the image horizontally. See the example below.

?io=transform:mirror

Border

Add a border around the image and specify the border width and border color. See the example below.

?io=transform:border,width:2,color:black
Name Type Description Range / Notes Required
width int Border width in pixels >0 and less than the max width of the DAT derivative Yes
color string Border color HTML color names or HEX codes; auto for dominant color No

Background

Change the background color of a transparent image. See the example below.

?io=transform:background,color:grey
Name Type Default Range / Notes Required
color string white HTML color names or HEX codes; auto for dominant color Yes

Filters

Opacity

Adjust the transparency of the whole image.

?io=filter:opacity,amount:60
Name Type Range Required
amount int 0–100 (%) No

Sepia

Apply a sepia filter to the image.

?io=filter:sepia

Contrast

Adjust the contrast level of the image.

?io=filter:contrast,amount:80
Name Type Range Required
amount int -100–100 (%) No

Brightness

Adjust the brightness level of the image.

?io=filter:brightness,amount:80
Name Type Range Required
amount int -100–100 (%) No

Greyscale

Convert the image colors to black and white.

?io=filter:grayscale

Blur

Apply a blur effect to the image.

?io=filter:blur,radius:20
Name Type Range Required
radius int >0 (pixels) No

Sharpness

Adjust the sharpness of the image.

?io=filter:sharpness,amount:80
Name Type Range Required
amount int -100–100 (%) No

Saturation

Adjust the saturation level of the image.

?io=filter:saturation,amount:80
Name Type Range Required
amount int -100–100 (%) No

Vignette

Add a vignette effect to the image.

?io=filter:vignette,amount:100,color:black,softness:50
Name Type Description Range Required
amount int Opacity of the gradient 0–10 No
color string HTML color names or HEX codes; auto for dominant color — No
softness int % based value -100–100 No

Temperature

Adjust the color temperature of the image.

?io=filter:temperature,amount:5000
Name Type Description Range Required
amount int Color temperature in kelvin 800–12000 Yes

Overlay

Color Overlay

Apply a solid-color overlay with specified transparency.

?io=overlay:box,color:red,opacity:20
Name Type Default Description Range Required
color string — HTML color names or HEX codes; auto for dominant 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
Name Type Default 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 HTML color names or HEX codes; auto for dominant color — No
angle int — Angle in degrees — 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
Name Type Default Description Range Required
asset uuid — Asset ID of a Bynder image asset used as the overlay — Yes
width int — Overlay width >0 No
height int — Overlay height >0 No
rotate int — Rotation in degrees 0–359 No
opacity int 100% Overlay transparency 0–100 No
gravity string center Overlay position center, right, left, topleft, top, topright, bottomleft, bottom, bottomright No
padding int — Padding around the overlay image >0 No

Output

Convert Output File to JPG, PNG, WEBP and AVIF

Convert the original file to a JPG, PNG, WEBP or AVIF file.

?format=jpg
Name Type Range Required
format string jpg, png, webp, avif yes

Output Quality

?quality=80

Set the quality of the output file. This only works for webP and jpg files.

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.

Name Type Range Required
download boolean true yes

Limitations

  • DAT does not currently support SVG as an output format.
  • If you would like to use an SVG as an output, 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.

Related Articles

How To Create A DAT Derivative In Asset Detail View

Updated