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
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.
-
Open the asset for which you want to create a Dynamic Asset Transformation.
- Click the
button. -
Copy the DAT Link in the Public File Links section. This URL functions as the base URL to which you'll add your transformations.
-
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. |
 |
|
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. |
 |
|
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. |
 |
|
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. |
 |
|
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. |
 |
|
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. |
 |
|
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. |
 |
|
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. |
 |
|
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. |
 |
|
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. |
|
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. |
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. |
|
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. |
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. |
|
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 TipThe 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. |
Comments