# Image optimization

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.&#x20;

<figure><img src="https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FFD3L3Jh6DVwvtNLYk6Ld%2FCloudimage%20dynamic%20transformation.gif?alt=media&#x26;token=83007900-42f3-48bc-9c09-fef4042b3b71" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you do not need storage for your origin (master) images and Digital Asset Management but just on-the-fly image and video transformation + CDN delivery, check-out [Cloudimage](https://www.cloudimage.io/en/home). Cloudimage is a media proxy pulling your media assets from your origin hosting (web server, S3 bucket, etc.), caching, compressing and delivering them over CDN.&#x20;
{% endhint %}

We have documented the most common resizing functions here. If you have any requests for undocumented features, [contact us](https://www.cloudimage.io/en/contact-us) and we will do our best to help.

## The basics

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

{% hint style="info" %}
//<mark style="color:red;">**token**</mark>.filerobot.com/**folder/filename**?<mark style="color:orange;">**operations**</mark>&<mark style="color:green;">**filters**</mark>&<mark style="color:purple;">**watermarks**</mark>
{% endhint %}

<table data-header-hidden><thead><tr><th width="374"></th><th></th></tr></thead><tbody><tr><td><mark style="color:red;"><strong>token</strong></mark></td><td>Your Filerobot token</td></tr><tr><td><strong>folder/filename</strong></td><td>Here, you can use the full path to the image in your Filerobot container, e.g. <strong>demo/part2/image.jpg</strong></td></tr><tr><td><mark style="color:orange;"><strong>operations</strong></mark></td><td>Image manipulation operations like <strong>width</strong>, <strong>height</strong>, <strong>crop</strong>, <strong>fit</strong>, <strong>rotate</strong>, and <strong>trim</strong>. For a full list, see <a data-mention href="broken-reference">Broken link</a>.</td></tr><tr><td><mark style="color:green;"><strong>filters</strong></mark></td><td>Use filters like <strong>contrast</strong>, <strong>pixellate</strong>, <strong>blur</strong>, <strong>grayscale</strong>, and <strong>sharpen</strong> to apply different effects to your image. All filters can be found in the <a data-mention href="broken-reference">Broken link</a>.</td></tr><tr><td><mark style="color:purple;"><strong>watermarks</strong></mark></td><td>Place static or dynamic watermarks on your images, <a data-mention href="broken-reference">Broken link</a>.</td></tr></tbody></table>

{% hint style="info" %}
The hostname <mark style="color:red;">**token**</mark>.filerobot.com can be replaced by a custom CNAME. Our [Support](https://www.scaleflex.com/contact-us) team can set it up for you.&#x20;
{% endhint %}

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

| Preview                                                                                                                                                                                                             | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FuZKLqGYASWu6WxKLb5ht%2Fimage.png?alt=media\&token=5c91c603-5b1e-4ec9-97a1-9c4a1a64b6fd) | <p>Resize operation:<br><a href="https://fdocs.filerobot.com/docs/paris.jpg?width=400">/docs/paris.jpg?<mark style="color:orange;"><strong>width=400</strong></mark></a></p>                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| ![](https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FuzCeozUZWt8kaa28UYJg%2Fimage.png?alt=media\&token=57291a45-8526-402d-b3f8-4427ae6298fd) | <p>Resize and convert to grayscale:<br><a href="https://fdocs.filerobot.com/docs/paris.jpg?width=400&#x26;gray=1">/docs/paris.jpg?<mark style="color:orange;"><strong>width=400</strong></mark>&<mark style="color:green;"><strong>gray=1</strong></mark></a></p>                                                                                                                                                                                                                                                                                                                                                     |
| ![](https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FNMZiHcNvlMeJZRkyLLIF%2Fimage.png?alt=media\&token=d96d6dd1-5e09-4e6e-a062-49b1f220d525) | <p>Grayscale thumbnail with a watermark:<br><a href="https://fdocs.filerobot.com/docs/paris.jpg?width=400&#x26;wat=1&#x26;wat_scale=35&#x26;wat_gravity=northwest&#x26;wat_pad=10&#x26;gray=1">/docs/paris.jpg?<mark style="color:orange;"><strong>width=400</strong></mark>&<mark style="color:purple;"><strong>wat=1</strong></mark>&<mark style="color:purple;"><strong>wat\_scale=35</strong></mark>&<mark style="color:purple;"><strong>wat\_gravity=northwest</strong></mark>&<mark style="color:purple;"><strong>wat\_pad=10</strong></mark>&<mark style="color:green;"><strong>gray=1</strong></mark></a></p> |
