Dynamic Asset Transformations (DAT) in Webdam

Follow

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

Musician Photo

2766 × 3470 pixels

 

How to Enable Dynamic Asset Transformations?

Inform your Customer Success Manager that you would like to participate in the Beta program. Your Customer Success Manager will be happy to further assist you in setting this up.

 

How to Create Dynamic Asset Transformations?

You can create Dynamic Asset Transformations by adding parameters to the DAT 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.

Fill

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

When setting a manual focus point the first value is the X axis and the second value is the Y axis. For the X axis 0 is the left corner of the image and 1 is the right corner of the image. For the Y axis 0 is the top corner of the image and 1 is the bottom corner.

Focal Point

Parameters

Result

Example

Gravity

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

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

crop_right_left_top_bottom.png

Gravity

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

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

crop_right_left_bottom.png

Gravity

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

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

crop_right_bottom.png

Gravity

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

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

crop_left_bottom.png

Gravity

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

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

crop_top_bottom_right.png

Gravity

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

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

crop_top_bottom_left.png

Gravity

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

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

crop_top_right_left.png

Gravity

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

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

crop_top_right.png

Gravity

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

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

crop_top_left.png

Manual Input

?io=transform:fill,width:100,height:200&focuspoint=.5,.5

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

 

Crop

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

Focal Point

Parameters

Result

Center

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

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

Manual Input

?io=transform:crop,width:100,height:200&focuspoint=0.5,0.6

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

Fit

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

Focal Point

Parameters

Result

Not Applicable

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

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

Not Applicable

?io=transform:fit,width:100

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

Not Applicable

?io=transform:fit,height:200

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

Extend

Focal Point

Parameters

Result

Not Applicable

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

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

File Format

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

Note

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

Focal Point

Parameters

Result

Not Applicable

&output=jpg

This will create the derivative in the jpg file format.

Not Applicable

&output=png

This will create the derivative in the png file format.

Other Transformations

Transformation

Focal Point

Parameters

Explanation & Result

Crop Circular Shapes

Defined in Database

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

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

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

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

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

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

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

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

Background Color

Not Applicable

?io=background:yellow

?io=background:fff00

?io=background:auto

Tip

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

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

Rotation of Image

Not Applicable

?io=transform:rotate,angle:270

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

 

Learn More

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Request Support
Existing Request