To load fast on any device around the world, images need to be resized, cropped and compressed. No need to push a 20-megapixel image to deliver a 1170px wide thumbnail on a smartphone. DAM will manipulate and transform your images dynamically and optimize for web delivery, thus saving you days in image management.

DAM's image manipulation and transformation features rely on DMO (Dynamic media optimization), a standalone media optimization CDN developed by Scaleflex.

We have documented the most common resizing functions here. If you have any requests for undocumented features, contact us and we will do our best to help.

The basics

Everything starts with the basic URL format of a DAM URL:

DAM automatically compresses these images into the most optimal delivery format (WebP, AVIF, ...) based on the user's device and context and accelerates them over multiple Content Delivery Networks from tier 1 CDN providers such as Akamai, Fastly, AWS Cloudfront and CDNetworks.

Examples

Crops the image to specified dimensions (width and height) while keeping proportions and delivers the resulting image via CDN.

func=crop

Examples

Gravity

Specifies which part of the image you wish to keep while cropping. If you omit the gravity option, central cropping is performed.

gravity=X

Available gravity values

Examples

Resizes the image to a specified width or height (in pixels) while keeping proportions and delivers the resulting image via CDN.

width | w

height | h

Examples

Chooses the most important image features and objects and sets the focal point on them when cropping.

gravity=smart

gravity=auto

gravity=face

Smart gravity

Sets the crop focal point on the people in the image or on the most prominent featues if no faces are detected. Useful for creating thumbnails from images with different aspect ratios.

Examples

Automatic gravity (legacy)

If you prefer to use the legacy automatic crop, just set gravity operation to auto.

Examples

Face gravity

When using gravity=face, all images with one dominant face are focused on this face upon cropping. If there are many or no faces in the image, gravity falls back to auto.

Examples

When resizing with width or height operation, Filerobot either reduces or increases the dimensions of the image to keep proportions. To prevent the image from getting resized to a bigger size than the original, use the org_if_sml operation.

org_if_sml=1

Examples

Allows to crop an image by defining the coordinates of the crop focal point. It is useful when you want to crop images where the coordinates of the point of interest are already known.

To set the coordinates of the focal point, use the gravity=X,Y operation where X and Y are the coordinates of the focal point (in pixels). Alternatively, you can set the coordinates as a percentage of the original image - gravity=Xp,Yp or gravity=xc,yc, where X,Y=0..100 and x,y=0..1.

gravity=X,Y

gravity=Xp,Yp|xc,yc

Examples

Original image:

Finds the most prominent face in the image and crops it to specified dimension provided with the width and height parameters. If you however provide only one dimension, the other dimension will be chosen automatically to keep the aspect ratio of the face.

func=face

Examples

Face margin

Sets margins around the face. You can set equal margins with face_margin=X or separate horizontal and vertical margins (face_margin=W,H).

face_margin=X|W,H

Examples

Crops out the topmost part of an image if it contains a face.

To control the margin when cropping the face out, you can use the face_margin=Y operation where Y is a percentage of the face height. Its default value is 20. You can also use negative numbers if you would like to keep part of the face.

func=facehide

Examples

Resizes to a given width and height box and keeps proportions. Similar to but without adding padding. Delivers the resulting image via CDN.

func=bound

Examples

Resizes the image to a specified width and height without keeping original proportions and delivers the resulting image via CDN.

func=cover

Examples

Resizes an image while bounding the smaller dimension to the desired width or height while keeping proportions. Delivers the resulting image via CDN.

func=boundmin

Examples

Allows you to deliver the right image dimensions according to a defined device pixel ratio. This operation can help with conversion between device-independent pixels and CSS (reference) pixels. Useful in responsive image solutions using the srcset html attribute. Allows positive values limited to 5.

dpr=X

Examples

Allows to crop an image by providing the cropping area. It is useful when you want to crop a specific part of the image. To set the coordinates of the crop rectangle, use the tl_px and br_px operations.

tl_px=X1,Y1

br_px=X2,Y2

Examples

Original image: /docs/kids.jpg

Combining positionable crop with resize modes

Positionable crop can be combined with all available resize functions - width/height, crop, fit, bound or cover. This operation is performed after the positionable crop.

Examples

Rotates the image by a specified angle, counterclockwise. You can use bg_color=X to set the background fill color if the rotation angle is not divisible by 90.

r=X

Examples

Removes any single-color padding around the image if present.

The parameter does not specify the amount of border or frame to trim but rather how aggressive the trim algorithm should be. A bigger value of the parameter (e.g. 25) will trim rather more than not enough. Typical values are between 0 and 10.

This allows you to use the same parameter values for all your images.

trim=X

Examples

Resizes the image to fit into a specified width and height box, adds padding (image or solid color) to keep proportions, and delivers the resulting image via CDN.

func=fit

The padding can be customised using the following additional operations:

Gravity

Examples

Resizing operations enable the dynamic generation of image transformations to meet various web delivery use cases. Operations focus on the image size while allow to modify the image itself.

Available operations

Resize functions

When you specify both width and height, original image proportions can be either ignored or maintained. Also, you may choose to add padding to the image to fill the blank space.

Filerobot supports the following resize function (operation func).

Crop

Fit

Cropfit

Bound

Cover

Mirrors the image horizontally and/or vertically.

flip=h | flip=v | flip=hv

Examples

Performs either or operation depending on the origin image and the desired transformation dimensions.

If the desired image is smaller than the original, the result is cropped to achieve the desired dimensions.

func=cropfit

Examples

Using cropfit with trim

If you include the operation in the URL, the image will be trimmed first (if possible) and then either cropped or fitted to the desired size.

Examples

Rounds the corners of images with a radius of X pixels. If you wish to fill the cut corners with a specific colour, you can use the bg_color parameter.

radius=X

Examples

Filters allow you to modify images on-the-fly by applying different effects.

Available filters

Combining filters

To use more than one filter, you can either use separate parameters or concatenate them with commas into the f parameter:

To create a color overlay by using colorize=X[,Y], where X is the color of the overlay (hex value or color name) and Y is the opacity (Y=0..1, default 0.5).

colorize=X[,Y] | colourise=X[,Y]

To adjust the contrast, you can use the contrast filter and set the desired adjustment value.

contrast=X

Examples

To adjust the brightness, you can use the bright filter and set the desired adjustment value.

bright=X

Examples

Sets target aspect ratio or aspect ratio range when cropping. Aspect ratios can be set as decimal values (1.778) or ratios (16:9).

aspect_ratio=AR | ar=AR

aspect_ratio=AR1,AR2 | ar=AR1,AR2

Crop and resize

If you provide only one dimension parameter (width or height) and aspect_ratio, the other dimension will be calcualted. If you include both width and height in the URL, aspect_ratio is ignored.

Examples

Crop without resize

If you provide only aspect_ratio and no dimensions (width or height), the image will be cropped without resizing.

Examples

Aspect ratio range

You can spcify a range of aspect ratio, for example aspect_ratio=4:3,16:9. Images which fall within this range, will not be cropped. Useful to avoid very wide ot very tall images by cropping them to the closest aspect ratio.

Examples

Applies a pixelation effect to an image. You can set the desired block size in pixels. If the image is resized the filter is applied after resizing.

pixelate=X | pixellate=X

Examples

Applies Gaussian blur to the image. The parameter value (X) is the kernel size of the filter in pixels.

blur=X

Examples

DAM can place a watermark on top of your images if you want to protect them from copying, or tag them with a serial number or custom text. There are three types of watermarks - click on each one for more details.

Multiple watermarks

Basic syntax

You can overlay multiple watermarks by indexing the parameters in the URL wat[1]=1&wat[2]=1. The wat=1 parameter must be indexed and contain all watermarks to activate the feature.

All parameters without indices will be applied to all watermarks in the image.

?wat[1]=1&wat[2]=1&wat_scale[1]=50&wat_scale[2]=10&wat_opacity=0.5

In the above fragment, wat_opacity=0.5 will be applied to both watermarks.

Multiple watermark types

Combining multiple watermark types is also possible. Remember that the presense of wat_url=X parameter defines a dynamic watermark, wat_text=X defines a text watermark and the absence of either defines a static watermark.

?wat[1]=1&wat[2]=1&wat[3]=1&wat_url[2]=sample.li/Angular.png&wat_text[3]=text

In the above fragment, there are three watermarks. Watermark 2 is a dynamic watermark, watermark 3 is a text watermark and watermark 1 is a static one.

The dynamic watermark function allows you to specify the watermark image in the Filerobot URL. This way, different watermarks can be used with different images.

Available parameters

Examples

You can change the compression (output format and quality) of your image by using compression filters. You can use the compression filters alongside and .

You can of course force a specific output format(s). More details can be found in the image formats section.

JPEG compression

The JPEG compression format is suitable for delivering photographic images with minimal quality loss and high compression rate. You can either choose the compression factor yourself or use Optipress - our Machine Learning based algorithm, which will choose the best way to reduce JPEG file size minimising perceptual quality loss.

Available parameters

Examples

PNG format

This format is a good choice for non-photographic images - flowcharts, graphs, screenshots, logos, etc. PNG also supports transparency.

Available parameters

Lossy PNG compression

While the PNG format offers lossy compression only, Filerobot can optimize the image before compression by reducing the number of colors or adding slight dithering (while preserving edges). This method usually leads to smaller file sizes for images visually indistinguishable from the original ones.

You can activate this feature in the Asset Hub (Settings/Process/Images/Image compression):

Examples

WebP format

WebP is an image format maintained by Google and supported in certain browsers (mainly Chrome, Opera and on Chrome Android) which provides more aggressive compression techniques as JPG without noticeable quality degradation.

You can use the following parameters to control webp compression quality:

Examples

Deliver images in their original format

By default, Filerobot delivers the images as WebP, when the format is supported by the browser. If you would like to keep the format of the original image (when possible), you can use force_format=original.

This function will watermark selected images with the same watermark - an image set in the Asset Hub. This is useful for placing your company logo, name or other copyright information. If you would like to watermark different images with different watermarks, please refer to the section.

Step 1 - upload your watermark in the Asset Hub

Log in to your DAM and navigate to Settings / DMO -> Images / Watermark and upload your default watermark using the uploader.

Step 2 - start watermarking!

Available parameters

Use watermark

To activate the watermark function, you need to include the wat=1 parameter.

Watermark position

The wat_gravity option sets the position of the watermark (available values are east, northeast, north, northwest, west, southwest, south, southeast, and center/centre) and the wat_pad defines the offset of the watermark from the gravity position.

The padding can be defined in pixels (wat_pad=X[,Y]) or in percent of output size (wat_pad=Xp[,Yp]). The padding is applied after scaling the final image and then it is compressed (see Compression) and delivered via CDN.

Watermark size

The watermark can be scaled relative to the original watermark image (wat_scale=X[,Y]) or relative to the output image (wat_scale=Xp[,Yp]).

Examples

If you need to tag an image or add a reference number as an overlay, use the text watermark function.

Available parameters

Examples

Different images compressed with the same compression parameters may result in different perceptive quality. Moreover, the same image in different sizes may require different compression strategy to achieve maximum size gain without visible quality loss.

To overcome this, you can use our Optipress JPEG compression algorithm.

• Optipress finds out the best JPG compression approach by analysing specific image features and current compression parameters.

• A Machine Learning model determines the best compression strategy for this image.

• Quality is then evaluated based on a simulation model of the Human Visual System to achieve optimum compression without perceptive quality deterioration.

By using Optipress, you can get the most of the JPEG compression format.

Usage

Examples

To adjust the color saturation, you can use the saturate=X filter and set the desired adjustment value (X= -100..100). Negative values will decrease color saturation while positive ones will increase it.

saturate=X

Examples

Desaturate

Using saturate=-100 will remove all color information and convert the image to grayscale.

Examples

Sharpening is a powerful tool to emphasise texture and details, especially on smaller images, e.g. thumbnails. Filerobot can apply an unsharp mask filter which will make your image look sharper. You can specify the filter radius (X) in pixels.

sharp=X

Examples