# Welcome to Cloudimage

Cloudimage helps you store, optimize, transform, and deliver your media at scale.

Leverage Cloudimage to automatically compress and accelerate images, videos, PDFs, CSS, and JS over CDN, ensuring faster websites, smoother apps, and better user experiences.

#### What you can do with Cloudimage

* **Optimize and deliver any media**: images, videos, PDFs, CSS, and JS with on-the-fly compression and CDN acceleration.
* **Integrate pixel-perfect images and videos** on your website thanks to powerful Responsive Libraries.
* **Create reusable image Presets**: use the Asset Variation Builder to visually build transformations (crop, resize, background removal, face blurring, etc.) and save them for consistent formatting.
* **Centralize your assets**: upload, preview, edit, and enrich files directly in the Asset Library.
* **Boost SEO, GEO, and accessibility**: generate smart alt text and auto-tags automatically with Visual AI.

#### Why Cloudimage?

* No more slow-loading websites caused by heavy visuals.
* No need for complex scripts or hours of manual Photoshop edits.
* Easy tools for marketers or e-commerce managers, and developers alike.
* Future-proof workflows: from SEO-ready alt text to adaptive video streaming.

{% hint style="info" %}
Cloudimage is provided by [Scaleflex](https://scaleflex.com) alongside the Visual Experience Platform, a collaborative suite of solutions for media management at scale
{% endhint %}

#### How does it work?

Cloudimage URL Format: 

{% hint style="success" %} <mark style="color:blue;">**//token**</mark>.cloudimg.io/<mark style="color:red;">**original\_image\_url**</mark>**?**<mark style="color:orange;">**operations**</mark>**&**<mark style="color:green;">**filters**</mark>**&**<mark style="color:purple;">**watermarks**</mark>
{% endhint %}

| <mark style="color:blue;">**token**</mark>                                               | Your Cloudimage customer token. Subscribe [here](https://www.cloudimage.io/en/registration) to get one. You can also [ask us](https://www.cloudimage.io/en/contact-us) for a customized token.                   |
| ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:red;">**original\_image\_url**</mark>                                 | That's an easy one :)                                                                                                                                                                                            |
| [<mark style="color:orange;">**operations**</mark>](/transformations/image-operations)   | Image manipulation operations like **width**, **height**, **crop**, **fit**, **rotate**, **trim**. For a full list, see [Image watermarking](/transformations/image-watermarking).                               |
| [<mark style="color:green;">**filters**</mark>](/transformations/image-filters)          | Use filters like **contrast**, **pixellate**, **blur**, **greyscale** and **sharpen** to apply different effects on your image. For a full list, see [Image filters](/transformations/image-filters).            |
| [<mark style="color:purple;">**watermarks**</mark>](/transformations/image-watermarking) | Cloudimage can place a watermark in your images if you want to protect them from copying, or tag them with a custom text. More details in the [Image watermarking](/transformations/image-watermarking) section. |

Cloudimage supports chaining multiple transformations in a single URL, such as crop, resize, format conversion, filters, or watermarking. Here is the step-by-step flow for your asset transformations:&#x20;

1. Cloudimage downloads your original asset (image, video, PDF, CSS, JS).
2. On-the-fly, it applies a selection of 50+ transformations and filters.
3. Optimized files are served worldwide via a rocket-fast CDN.

{% hint style="danger" %}
If you host your images on a Web Server, Image Repository, or Storage Bucket sitting behind a Firewall or protected by authentication, make sure your images are accessible over HTTP(S) and that you have whitelisted our infrastructure and are in possession of the required credentials. Otherwise, Cloudimage servers will not be able to download the originals.
{% endhint %}

Examples:

```
https//token.cloudimg.io/{origin_image_url}?func=cropfit&w=500&h=350&bg_colorize=navy&contrast=10&q=90
```

| Preview                          | Cloudimage URL syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/fHwlcdnBeshGGgtvSc3M) | [/samples.scaleflex.com/ny\_doc.jpg?<mark style="color:orange;">**func=cropfit**</mark>&<mark style="color:orange;">**w=500**</mark>&<mark style="color:orange;">**h=350**</mark>&<mark style="color:orange;">**bg\_img\_fit=1**</mark>&<mark style="color:orange;">**bg\_colorize=navy**</mark>&<mark style="color:orange;">**bg\_opacity=0.5**</mark>&<mark style="color:orange;">**bg\_blur=20**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/ny_doc.jpg?func=cropfit\&w=500\&h=350\&bg_img_fit=1\&bg_colorize=navy\&bg_opacity=0.5\&bg_blur=20)                                              |
| ![](/files/E0HuKYxz3I7SPK7yiZwb) | [/samples.scaleflex.com/flat1.jpg?<mark style="color:orange;">**w=450**</mark>&<mark style="color:orange;">**q=90**</mark>&<mark style="color:green;">**contrast=10**</mark>&<mark style="color:green;">**saturate=30**</mark>&<mark style="color:purple;">**wat=1**</mark>&<mark style="color:purple;">**wat\_gravity=northeast**</mark>&<mark style="color:purple;">**wat\_scale=25**</mark>&<mark style="color:purple;">**wat\_pad=10**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/flat1.jpg?w=450\&q=90\&contrast=10\&saturate=30\&wat=1\&wat_gravity=northeast\&wat_scale=25\&wat_pad=10) |

Preview transformations instantly in the UI, save them as presets, and deliver them globally through our premium CDN infrastructure.

We have documented the most common resizing functions here. Cloudimage supports many more and we can even build them for your specific use-case, please [contact us](https://www.cloudimage.io/contact-us) if you don't find your luck!&#x20;


# Input formats

We support all the major image formats, and a large number of more confidential ones.

We are obviously expanding our support to include any new significant formats being created. As of today, we have full support for the following origin formats and the ability to apply transformations for them:

| Input format supported                   |
| ---------------------------------------- |
| Adobe Photoshop Document (PSD)           |
| AVIF - AV1 image format                  |
| Bitmap (BMP)                             |
| Encapsulated PostScript (EPS)            |
| Graphics Interchange Format (GIF)        |
| High Efficiency Image File Format (HEIC) |
| Icon (ICO)                               |
| JPEG-compressed images                   |
| JPEG2000-compressed images               |
| Portable Document Format (PDF)           |
| Portable Network Graphics (PNG)          |
| Scalable Vector Graphics (SVG)           |
| Tag Image File Format (TIFF)             |
| WebP image format                        |


# Asset Variation Builder

Create and preview image transformations directly in the Cloudimage UI - no code needed

The Asset Variation Builder (AVB) lets you create and preview image transformations directly in the Cloudimage UI — no coding needed. Non-Developers using Cloudimage can easily gain control with instant previews of future image transformations before creating a [preset](/setup/shortening-urls/presets).

<figure><img src="/files/i5czefq9ZrKDaZPcDKe8" alt=""><figcaption></figcaption></figure>

While building your URL transformations, you can easily spot the active parameters in the different categories thanks to a blue dot: Format, Adjust

Once satisfied, save the transformation as a preset to apply consistent templates across all your images. Every adjustment is shown live in the Asset Library in "Asset Details" / "Variations", so you see the exact output before saving.&#x20;

**Preview image transformations**\
Stop guessing URL parameters: visually build your transformation, preview results in real time, and save as reusable presets. These presets ensure consistency, speed up content workflows, and empower non-technical teams to manage image variants independently.

**Supported features in the AVB:**

* **Image compression & format**
  * Automatic best format or force WEBP, JPEG, PNG, GIF
  * Quality settings (lossless, adjustable compression)
* **Image operations**
  * Resize by width & height (with enlargement prevention)
  * Cropping options: automatic gravity, positionable, focal point, face crop, aspect ratio crop, face hide
  * Fit, Cropfit, Background color, Bound, Boundmin, Cover
  * Flip, Rotate, Rounded corners, Trim
* **AI operations**
  * Background removal ⚡️
  * Face blurring ⚡️
* **Image filters**
  * Adjustments: brightness, contrast, saturation, blur, sharpen
  * Colorize: overlay, grayscale, sepia, pixelate, duotone, invert
* **Watermarking**
  * Static watermark
  * Dynamic watermark

{% hint style="info" %}
The operations marked with a ⚡️ are powered by Visual Operations Credits; full details on consumption rates can be found here: [Visual Operation Credits table](https://docs.cloudimage.io/account-management/usage#visual-operation-credits-table)
{% endhint %}


# Image operations

Basic image resizing operations

Resizing operations enable the dynamic generation of image transformations to meet various web delivery use cases. Operations focus on the image size while [Image filters](/transformations/image-filters) allow to modify the image itself.&#x20;

Most of the on-the-fly image transformations can be configured using the [Asset Variation Builder](/transformations/asset-variation-builder), an in-line URL  builder to preview each image transformation instantly.

## Available operations <a href="#od_e8ec73ce" id="od_e8ec73ce"></a>

<table><thead><tr><th width="223.33333333333331">Operation</th><th width="168">Syntax</th><th>Description</th></tr></thead><tbody><tr><td><a data-mention href="/pages/3FFZZFfIMiaOpCYzNied">/pages/3FFZZFfIMiaOpCYzNied</a></td><td><mark style="color:orange;"><strong>width=X</strong></mark></td><td>resizes the image width to X pixels while keeping original aspect ratio</td></tr><tr><td><a data-mention href="/pages/3FFZZFfIMiaOpCYzNied">/pages/3FFZZFfIMiaOpCYzNied</a></td><td><mark style="color:orange;"><strong>height=X</strong></mark></td><td>resizes the image height to X pixels while keeping original aspect ratio</td></tr><tr><td><a data-mention href="/pages/s1v0ivMBhb03UvxTwLn4">/pages/s1v0ivMBhb03UvxTwLn4</a></td><td><mark style="color:orange;"><strong>org_if_sml=1</strong></mark></td><td>prevents upscaling if any of the target dimensions is larger than the origin image</td></tr><tr><td><a data-mention href="/pages/j7Q2Vgh86tDwXUVDFut5">/pages/j7Q2Vgh86tDwXUVDFut5</a></td><td><mark style="color:orange;"><strong>func=crop</strong></mark></td><td>resizes the image to the desired dimensions without distorting it while cropping out portions of the image if necessary, to achieve the desired aspect ratio. You need to also provide both width and height</td></tr><tr><td></td><td><mark style="color:orange;"><strong>gravity=X</strong></mark></td><td>defines the desired "focal point" of the image. Used with func=crop, this will set the part of the image which will be retained. With the func=fit resize mode, it will set the placement of the image within the new canvas<br>X = [north | south][east | west] | auto | smart | trim | X,Y</td></tr><tr><td><a data-mention href="/pages/9fPdpbUMDiCU3lvvHgRi">/pages/9fPdpbUMDiCU3lvvHgRi</a></td><td><mark style="color:orange;"><strong>tl_px=X,Y</strong></mark></td><td>defines the coordinates of the top left corner of the cropping rectangle when performing positionable crop</td></tr><tr><td></td><td><mark style="color:orange;"><strong>br_px=X,Y</strong></mark></td><td>sets coordinates of the bottom right corner of the cropping rectangle when performing positionable crop</td></tr><tr><td><a data-mention href="/pages/v5mcsyVrVjFref5jpnS7">/pages/v5mcsyVrVjFref5jpnS7</a></td><td><mark style="color:orange;"><strong>func=face</strong></mark></td><td>crops the image automatically focusing on the most prominent face in the image (if a face is detected)</td></tr><tr><td><a data-mention href="/pages/e6fRATZGgJv2PFa0eIas">/pages/e6fRATZGgJv2PFa0eIas</a></td><td><mark style="color:orange;"><strong>func=fit</strong></mark></td><td>resizes the image to the desired dimensions without distorting it by increasing the image canvas if necessary, to achieve the desired aspect ratio</td></tr><tr><td></td><td><mark style="color:$warning;"><strong>margin=X</strong></mark></td><td>sets the minimum margin when using the fit resize mode</td></tr><tr><td><a data-mention href="/pages/zaBE12MYMA93ZgV80og5">/pages/zaBE12MYMA93ZgV80og5</a></td><td><mark style="color:orange;"><strong>func=cropfit</strong></mark></td><td>resizes the image while automatically choosing between the <em>crop</em> and <em>fit</em> resize modes depending on the origin image dimensions, the desired dimensions, and the other parameters in the transformation URL</td></tr><tr><td><a data-mention href="/pages/OMsW8YIz9byGdfhESgZG">/pages/OMsW8YIz9byGdfhESgZG</a></td><td><mark style="color:orange;"><strong>func=bound</strong></mark></td><td>resizes the image to dimensions no larger than the ones specified in the transformation URL. The resulting image might not match both width and height depending on the desired aspect ratio</td></tr><tr><td><a data-mention href="/pages/hIgHNINFUg7mh7RmweYv">/pages/hIgHNINFUg7mh7RmweYv</a></td><td><mark style="color:orange;"><strong>func=boundmin</strong></mark></td><td>resizes the image to dimensions no larger than the larger one specified in the transformation URL. The resulting image might not match both width and height depending on the desired aspect ratio </td></tr><tr><td><a data-mention href="/pages/MEszXvTLzmBJoiD7TE87">/pages/MEszXvTLzmBJoiD7TE87</a></td><td><mark style="color:orange;"><strong>func=cover</strong></mark></td><td>resizes the image to the set width and hight while ignoring the origin aspect ratio (image might be distorted)</td></tr><tr><td><a data-mention href="/pages/Z4COFlamjYgy5ff5GXIo">/pages/Z4COFlamjYgy5ff5GXIo</a></td><td><mark style="color:orange;"><strong>flip=[h][v]</strong></mark></td><td>mirrors the image horizontally and/or vertically</td></tr><tr><td><a data-mention href="/pages/JwWZlzug007Pli2VPzlu">/pages/JwWZlzug007Pli2VPzlu</a></td><td><mark style="color:orange;"><strong>r=X</strong></mark></td><td>rotates the image to an arbitrary angle of X degrees (counterclockwise)</td></tr><tr><td><a data-mention href="/pages/K0WDZjzoGgfTlE6x1QF3">/pages/K0WDZjzoGgfTlE6x1QF3</a></td><td><mark style="color:orange;"><strong>trim=X</strong></mark></td><td>trims any solid-color border (if present); X is the aggressiveness of the operation</td></tr><tr><td><a data-mention href="/pages/bhaDtnmXIx7gLpV5mviF">/pages/bhaDtnmXIx7gLpV5mviF</a></td><td><mark style="color:orange;"><strong>radius=X</strong></mark></td><td>rounds the corners of the image while optionally fills the empty background with a chosen color</td></tr><tr><td><a data-mention href="/pages/bI6PVK2B2jBKdoKTzCYS">/pages/bI6PVK2B2jBKdoKTzCYS</a></td><td><mark style="color:$warning;"><strong>bg_remove=1</strong></mark></td><td>removes the background of the image using AI</td></tr></tbody></table>

{% hint style="info" %}
Do not hesitate to [contact us](https://www.cloudimage.io/en/contact-us) if you need any additional operations not listed above
{% endhint %}

## Resize functions <a href="#od_8cd351ba" id="od_8cd351ba"></a>

When you resize an image by specify both **width** and **height**, the original image proportions can be either ignored or maintained. You may also choose to add padding to the image to fill the blank space (extending the canvas).

Cloudimage supports the following resize functions (defined with the <mark style="color:orange;">**func**</mark> parameter):

### Crop

Keeps image proportions, cutting the image to fit the defined width and height; see [Crop](/transformations/image-operations/crop)

{% hint style="warning" %}
This resizing function removes parts of the image and is the default behavior when both **width** and **height** are defined. Read further for other resizing functions.
{% endhint %}

| Preview                          | Syntax                                                                                                                                              |
| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/crUCrpKlpUFvWzIKHuoI) | [/samples.scaleflex.com/hotel.jpg?w=400\&h=200\&func=crop](https://doc.cloudimg.io/https://samples.scaleflex.com/hotel.jpg?w=400\&h=200\&func=crop) |

### Fit

Resizes the image, keeping proportions and extending the canvas (by adding padding) to satisfy the desired dimensions; see [Fit](/transformations/image-operations/fit)

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                                                  |
| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/3VDhsTcE2XL11DEPvonz) | [/samples.scaleflex.com/hotel.jpg?<mark style="color:orange;">**w=400**</mark>&<mark style="color:orange;">**h=200**</mark>&<mark style="color:orange;">**func=fit**</mark>&<mark style="color:orange;">**bg\_color=000**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/hotel.jpg?w=400\&h=200\&func=fit\&bg_color=000) |

### Cropfit

Performs either [#crop](#crop "mention")or [#fit](#fit "mention") based on the image dimensions, aspect ratio and transformation parameters; see [Cropfit](/transformations/image-operations/cropfit)

{% hint style="warning" %}
This resizing function may remove (crop out) parts of the image.
{% endhint %}

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/TXZSNCtAShiB8DnYvuPj) | <p>650x500 origin image, resolves to "crop":<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/classroom.jpg?func=cropfit&#x26;w=500&#x26;h=350&#x26;bg_colour=auto">/samples.scaleflex.com/classroom.jpg?func=cropfit\&w=500\&h=350\&bg\_colour=auto</a></p>                                                                                                                                                                                                                         |
| ![](/files/eHyfjTcpVcEPBW4D9gbm) | <p>Same parameters, 400x250 origin image, resolves to "fit":<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/ny_doc.jpg?func=cropfit&#x26;w=500&#x26;h=350&#x26;bg_colour=auto">/samples.scaleflex.com/ny\_doc.jpg?<mark style="color:orange;"><strong>func=cropfit</strong></mark>&<mark style="color:orange;"><strong>w=500</strong></mark>&<mark style="color:orange;"><strong>h=350</strong></mark>&<mark style="color:orange;"><strong>bg\_colour=auto</strong></mark></a></p> |

### Bound

Fits image in a box of defined size without adding padding; see [Bound](/transformations/image-operations/bound)

| Preview                          | Syntax                                                                                                                                                                                                                                                                   |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](/files/wSzzij3g2yIdnPkOd54q) | [/samples.scaleflex.com/hotel.jpg?<mark style="color:orange;">**w=400**</mark>&<mark style="color:orange;">**h=200**</mark>&<mark style="color:orange;">**func=bound**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/hotel.jpg?w=400\&h=200\&func=bound) |

{% hint style="info" %}
The **boundmin** operation is a special case of bound where the smaller dimension is respected instead of the larger one; see [Boundmin](/transformations/image-operations/boundmin)
{% endhint %}

### Cover

Resizes the image to the given **width** and **height**, ignoring original image proportions, thus distorting the image; see [Cover](/transformations/image-operations/cover)

| Preview                          | Syntax                                                                                                                                                                                                                                                                   |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](/files/Z8fQY2Hm3fdgTh3AJnQC) | [/samples.scaleflex.com/hotel.jpg?<mark style="color:orange;">**w=400**</mark>&<mark style="color:orange;">**h=250**</mark>&<mark style="color:orange;">**func=cover**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/hotel.jpg?w=400\&h=250\&func=cover) |

{% hint style="info" %}
For troubleshooting purposes, use the **ci\_info=1** operation to view details about resizing and compression, for example, [/sample.li/hotel.jpg?<mark style="color:orange;">**w=400**</mark>&<mark style="color:orange;">**ci\_info=1**</mark>](https://doc.cloudimg.io/sample.li/hotel.jpg?w=400\&ci_info=1)
{% endhint %}


# Width and height

Proportionally resize an image to the desired width or height

Resizes an image to a specified width or height while preserving its original aspect ratio. You need to specify the **`width`** or **`height`** parameter in pixels. After transformation, the image will be compressed and delivered via CDN.

<mark style="color:orange;">**width**</mark> | <mark style="color:orange;">**w**</mark>

<mark style="color:orange;">**height**</mark> | <mark style="color:orange;">**h**</mark>

## Examples

| Preview                                                             | Syntax                                                                                                                                                                                                            |
| ------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/y3mhOeScbvBLFvmSgLoK)                                    | [/samples.scaleflex.com/birds.jpg?<mark style="color:orange;">**w=600**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/birds.jpg?w=600)                                                            |
| ![](/files/zUrTSmZQJ7FT19gRHVeb)                                    | [/samples.scaleflex.com/frog.png?<mark style="color:orange;">**width=415**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?width=415)                                                      |
| ![](/files/qlG8bMtyMwFwneVJv8Ri)                                    | [/samples.scaleflex.com/paris-salon2.jpg?<mark style="color:orange;">**h=430**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/paris-salon2.jpg?h=430)                                              |
| <img src="/files/pyj2rMNzqNdVkEKCy3G4" alt="" data-size="original"> | [<mark style="color:blue;">**/samples.scaleflex.com/mountains.jpg?**</mark><mark style="color:orange;">**h=400\&w=350**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/mountains.jpg?h=400\&w=350) |
| <img src="/files/Im6rR17JASmY4f2rHsNs" alt="" data-size="original"> | [<mark style="color:blue;">**/samples.scaleflex.com/tesla.jpg?**</mark><mark style="color:orange;">**height=350**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/tesla.jpg?height=350)             |


# Prevent enlargement

Do not upscale an image if target size is larger than the origin image

Disallows image upscaling when resizing with the width or height operations. When resizing, the image can be either scaled down or up depending on the original and target dimensions. If you want to ensure that the image is never upscaled - so the output will not be larger than the original, you can use the **org\_if\_sml** parameter.

<mark style="color:orange;">**org\_if\_sml=1**</mark>

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                              |
| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/svcq9LqKxQ9f8sK7ekx5) | <p>Allow upscaling (default):<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/ny_doc.jpg?w=450">/samples.scaleflex.com/ny\_doc.jpg?<mark style="color:orange;"><strong>w=450</strong></mark></a></p>                                                                              |
| ![](/files/U67JNh9TZ29eVh8kaE1E) | <p>Prevent upscaling:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/ny_doc.jpg?w=450&#x26;org_if_sml=1">/samples.scaleflex.com/ny\_doc.jpg?<mark style="color:orange;"><strong>w=450</strong></mark>&<mark style="color:orange;"><strong>org\_if\_sml=1</strong></mark></a></p> |


# Crop

Resize and crop to achieve the desired width and height

Resizes and crops the image to specified dimensions (**width** and **height**) while keeping proportions. The resulting image is then compressed and delivered via CDN.

<mark style="color:orange;">**func=crop**</mark>

{% hint style="info" %}
This is the default resizing mode when both **width** and **height** operations are used. You do not need to specify **func=crop** explicitly.
{% endhint %}

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                 |
| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/Prucsyco8PHqoxyMfLDW) | [/samples.scaleflex.com/birds.jpg?<mark style="color:orange;">**func=crop**</mark>&<mark style="color:orange;">**w=600**</mark>&<mark style="color:orange;">**h=310**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/birds.jpg?func=crop\&w=600\&h=310) |
| ![](/files/bhnhhb2QfdJhRkGanGRl) | [/samples.scaleflex.com/birds.jpg?<mark style="color:orange;">**w=600**</mark>&<mark style="color:orange;">**h=410**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/birds.jpg?w=600\&h=410)                                                             |

## Gravity

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

<mark style="color:orange;">**gravity=X**</mark>

### Available gravity values

| <mark style="color:orange;">**northwest**</mark>                                                                                                  | <mark style="color:orange;">**north**</mark>                                                                                          | <mark style="color:orange;">**northeast**</mark>                                                                                        |
| ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:orange;">**west**</mark>                                                                                                       | <mark style="color:orange;">**center**</mark> \| <mark style="color:orange;">**centre**</mark> (default)                              | <mark style="color:orange;">**east**</mark>                                                                                             |
| <mark style="color:orange;">**southwest**</mark>                                                                                                  | <mark style="color:orange;">**south**</mark>                                                                                          | <mark style="color:orange;">**southeast**</mark>                                                                                        |
| <mark style="color:orange;">**auto**</mark> - [more info](/transformations/image-operations/crop/automatic-gravity-crop#automatic-gravity-legacy) | <mark style="color:orange;">**face**</mark> - [more info](/transformations/image-operations/crop/automatic-gravity-crop#face-gravity) | <mark style="color:orange;">**smart**</mark> - [more info](/transformations/image-operations/crop/automatic-gravity-crop#smart-gravity) |
| <mark style="color:orange;">**X,Y**</mark> - [more info](/transformations/image-operations/crop/focal-point-crop)                                 | <mark style="color:$warning;">**trim**</mark> - [more info](/transformations/image-operations/trim#trim-gravity)                      |                                                                                                                                         |

### Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                     |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](/files/pfVrVoPTU0Hr9mI6eM8i) | [/samples.scaleflex.com/paris-salon2.jpg?<mark style="color:orange;">**w=500**</mark>&<mark style="color:orange;">**h=430**</mark>&<mark style="color:orange;">**gravity=west**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/paris-salon2.jpg?w=500\&h=430\&gravity=west) |
| ![](/files/8p5gblPRw6NMwFClsmM6) | [/samples.scaleflex.com/paris-salon2.jpg?<mark style="color:orange;">**w=500**</mark>&<mark style="color:orange;">**h=430**</mark>&<mark style="color:orange;">**gravity=east**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/paris-salon2.jpg?w=500\&h=430\&gravity=east) |


# Automatic gravity crop

Automatically detects the focal point

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

<mark style="color:orange;">**gravity=smart**</mark>

<mark style="color:orange;">**gravity=auto**</mark>

<mark style="color:orange;">**gravity=face**</mark>

<mark style="color:orange;">**gravity=meta**</mark>

## Smart gravity

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

### Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                 |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/dYgrJzhHo82xiPV5HJmd) | [/samples.scaleflex.com/mountains.jpg?<mark style="color:orange;">**w=300**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/mountains.jpg?w=300)                                                                                                                         |
| ![](/files/8l085gVnb5YXqJliJ3w4) | [/samples.scaleflex.com/mountains.jpg?<mark style="color:orange;">**h=300**</mark>&<mark style="color:orange;">**w=300**</mark>&<mark style="color:orange;">**gravity=smart**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/mountains.jpg?h=300\&w=300\&gravity=smart) |
| ![](/files/BecCkY5Gtjj0v5liiq2N) | [/samples.scaleflex.com/hotel.jpg?<mark style="color:orange;">**h=300**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/hotel.jpg?h=300)                                                                                                                                 |
| ![](/files/d5QyY3VbesVLR8QmeAfZ) | [/samples.scaleflex.com/hotel.jpg?<mark style="color:orange;">**h=300**</mark>&<mark style="color:orange;">**w=300**</mark>&<mark style="color:orange;">**gravity=smart**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/hotel.jpg?h=300\&w=300\&gravity=smart)         |

## Automatic gravity

Setting the **gravity** parameter to **auto** finds the focal point of the image based on entropy.

### Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                     |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/4RNiaFbDxAVs7bUqQn2u) | [/samples.scaleflex.com/boat.jpg?<mark style="color:orange;">**h=300**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/boat.jpg?h=300)                                                                                                                       |
| ![](/files/I5mIbAB861lrZ53VTe8l) | [/samples.scaleflex.com/boat.jpg?<mark style="color:orange;">**h=300**</mark>&<mark style="color:orange;">**w=300**</mark>&<mark style="color:orange;">**gravity=auto**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/boat.jpg?h=300\&w=300\&gravity=auto) |

## 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**.

{% hint style="info" %}
If you would like to try and include multiple faces in the image, you can use **gravity=smart**
{% endhint %}

### Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                               |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](/files/fiNHLAmbFCdmIsApv5q6) | [/samples.scaleflex.com/classroom.jpg?<mark style="color:orange;">**h=300**</mark>&<mark style="color:orange;">**w=300**</mark>&<mark style="color:orange;">**gravity=face**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/classroom.jpg?h=300\&w=300\&gravity=face) |

## Metadata gravity

When using **gravity=meta**, all images having a custom focus point defined in the library will use this as if using the `focal point crop`. If there is no `focus point` defined in the image metadata, **gravity** falls back to **auto**.

{% hint style="info" %}
You can override the fallback by chaining the methods, so that in case there is no `focus point` defined in the library's image metadata, it would proceed using another method like face, trim, or other.&#x20;

eg. of use: **gravity=meta,face**
{% endhint %}


# Positionable crop

Crops by boundary coordinates

Allows to crop an image by providing the exact 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 or  the `X` and `Y` Parameters are an alternative way to set the coordinates.

<mark style="color:orange;">**tl\_px=X1,Y1**</mark>

<mark style="color:orange;">**br\_px=X2,Y2**</mark>\
\ <mark style="color:orange;">**X=X1**</mark>\ <mark style="color:orange;">**Y=Y1**</mark>

## Examples

Origin image: [/docs/kids.jpg](https://doc.cloudimg.io/https://samples.scaleflex.com/kids.jpg)

<figure><img src="https://fdocs.filerobot.com/docs/kids.jpg" alt=""><figcaption></figcaption></figure>

| Preview                                                             | Syntax                                                                                                                                                                                                                                       |
| ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/cORb1BHYOal8C2uXt9e1)                                    | [/samples.scaleflex.com/kids.jpg?<mark style="color:orange;">**tl\_px=900,100**</mark>&<mark style="color:orange;">**br\_px=1300,550**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/kids.jpg?tl_px=900,100\&br_px=1300,550) |
| ![](/files/FACa5vu1wZ6mDfy8S5F1)                                    | [/samples.scaleflex.com/kids.jpg?<mark style="color:orange;">**br\_px=890,560**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/kids.jpg?br_px=890,560)                                                                        |
| <img src="/files/twpnuTQ7xrMi4GvtTFdA" alt="" data-size="original"> | [<mark style="color:blue;">**/samples.scaleflex.com/kids.jpg?**</mark><mark style="color:orange;">**x=650\&y=100**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/kids.jpg?x=650\&y=100)                                      |

## Combining positionable crop with resize modes

Positionable crop is a separate operation can be combined with all available resize functions - [Width and height](/transformations/image-operations/width-and-height), [Crop](/transformations/image-operations/crop), [Fit](/transformations/image-operations/fit), [Bound](/transformations/image-operations/bound) and [Cover](/transformations/image-operations/cover). This resize is always performed after the positionable crop.

### Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/rq2u5nmePlCARcXT3rl1) | [/samples.scaleflex.com/kids.jpg?<mark style="color:orange;">**w=200**</mark>&<mark style="color:orange;">**tl\_px=900,0**</mark>&<mark style="color:orange;">**br\_px=1300,600**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/kids.jpg?w=200\&tl_px=900,0\&br_px=1300,600)                                                                                                                                                                                          |
| ![](/files/VLzo4Sz9aGAXR8Usk90j) | [/samples.scaleflex.com/kids.jpg?<mark style="color:orange;">**w=800**</mark>&<mark style="color:orange;">**h=270**</mark>&<mark style="color:orange;">**tl\_px=310,70**</mark>&<mark style="color:orange;">**br\_px=1550,580**</mark>&<mark style="color:orange;">**func=fit**</mark>&<mark style="color:orange;">**bg\_color=3498db**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/kids.jpg?w=800\&h=270\&tl_px=310,70\&br_px=1550,580\&func=fit\&bg_color=3498db) |


# Focal point crop

Sets the crop focal point coordinates

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 or set.

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.

<mark style="color:orange;">**gravity=X,Y**</mark>

<mark style="color:orange;">**gravity=Xp,Yp|xc,yc**</mark>

Another way to set the coordinates is to save them as part of the `file info` metadata in the integrated Cloudimage library and use the **gravity=meta** operation (the file needs to be stored in the Cloudimage library so that the transformation engine can query and use the custom point).

<mark style="color:orange;">**gravity=meta**</mark>

{% hint style="info" %}
**gravity=meta** will use the coordinates if present, and fall-back to **auto** if not.
{% endhint %}

## Examples

Original image: [/docs/castle.jpg?<mark style="color:orange;">**w=1000**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/castle.jpg?w=1000)

<figure><img src="https://fdocs.filerobot.com/docs/castle.jpg?w=1000" alt=""><figcaption></figcaption></figure>

| Preview                          | Syntax                                                                                                                                                                                                                                                                                   |
| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/2odjiDmLfMH3ociI3kFk) | [/samples.scaleflex.com/castle.jpg?<mark style="color:orange;">**w=450**</mark>&<mark style="color:orange;">**h=300**</mark>&<mark style="color:orange;">**gravity=1750,1000**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/castle.jpg?w=450\&h=300\&gravity=1750,1000) |
| ![](/files/dipAQagUjCI7aPtWIuM1) | [/samples.scaleflex.com/castle.jpg?<mark style="color:orange;">**w=450**</mark>&<mark style="color:orange;">**h=300**</mark>&<mark style="color:orange;">**gravity=80p,50p**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/castle.jpg?w=450\&h=300\&gravity=80p,50p)     |

{% hint style="info" %}
Please note that the focal point in **gravity=X,Y** has to be defined as coordinates **X** and **Y** of the full-sized origin image and not the scaled-down version.
{% endhint %}


# Face crop

Crop operation focusing only on one face

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

<mark style="color:orange;">**func=face**</mark>

{% hint style="info" %}
If there is no face in the image or many faces are found, the operation defaults to a standard crop.
{% endhint %}

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                                                                                          |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/PrW67NDRw7QsAm8v7YDR) | <p>Standard crop:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/business-portfolio.jpg?w=400&#x26;h=300">/samples.scaleflex.com/business-portfolio.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>h=300</strong></mark></a></p>                                                                          |
| ![](/files/KPkUyJXoNhNOLzR93KB2) | <p>Face crop:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/business-portfolio.jpg?w=400&#x26;h=300&#x26;func=face">/samples.scaleflex.com/business-portfolio.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>h=300</strong></mark>&<mark style="color:orange;"><strong>func=face</strong></mark></a></p> |
| ![](/files/5L8TD42jDBbQmyqJpGuW) | <p>Face crop:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/classroom.jpg?h=240&#x26;w=380&#x26;func=face">/samples.scaleflex.com/classroom.jpg?<mark style="color:orange;"><strong>h=240</strong></mark>&<mark style="color:orange;"><strong>w=380</strong></mark>&<mark style="color:orange;"><strong>func=face</strong></mark></a></p>                   |
| ![](/files/8458hjSzzbIIOiHWt4kn) | <p>Face crop with automatic aspect ratio:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/classroom.jpg?h=240&#x26;func=face">/samples.scaleflex.com/classroom.jpg?<mark style="color:orange;"><strong>h=240</strong></mark>&<mark style="color:orange;"><strong>func=face</strong></mark></a></p>                                                            |

## 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**).

<mark style="color:orange;">**face\_margin=X|W,H**</mark>

### Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                                                                                  |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/dOPFoeFHMnkVuN8aiG3P) | [/samples.scaleflex.com/business-portfolio.jpg?<mark style="color:orange;">**w=400**</mark>&<mark style="color:orange;">**h=300**</mark>&<mark style="color:orange;">**func=face**</mark>&<mark style="color:orange;">**face\_margin=60**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/business-portfolio.jpg?w=400\&h=300\&func=face\&face_margin=60) |
| ![](/files/XyZCcx2CcSN6rNhucgq8) | [/samples.scaleflex.com/classroom.jpg?<mark style="color:orange;">**h=240**</mark>&<mark style="color:orange;">**func=face**</mark>&<mark style="color:orange;">**face\_margin=80,30**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/classroom.jpg?h=240\&func=face\&face_margin=80,30)                                                                 |


# Face hide

Crop operation which removes faces from the top of the image

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.

<mark style="color:orange;">**func=facehide**</mark>

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                                                                             |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](/files/HG7uspq2X8OGY4XloXCV) | [/samples.scaleflex.com/woman\_dress.jpg?<mark style="color:orange;">**w=450**</mark>&<mark style="color:orange;">**h=600**</mark>&<mark style="color:orange;">**gravity=auto**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/woman_dress.jpg?w=450\&h=600\&gravity=auto)                                                                          |
| ![](/files/YvvNtlQORIbG5311Vaue) | [/samples.scaleflex.com/woman\_dress.jpg?<mark style="color:orange;">**func=facehide**</mark>&<mark style="color:orange;">**w=450**</mark>&<mark style="color:orange;">**h=600**</mark>&<mark style="color:orange;">**face\_margin=10**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/woman_dress.jpg?func=facehide\&w=450\&h=600\&face_margin=10) |


# Aspect ratio crop

Crop by aspect ratio or aspect ratio range

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

<mark style="color:orange;">**aspect\_ratio=AR**</mark> | <mark style="color:orange;">**ar=AR**</mark>

<mark style="color:orange;">**aspect\_ratio=AR1,AR2**</mark> | <mark style="color:orange;">**ar=AR1,AR2**</mark>

## **Crop and resize**

If you provide only one dimension parameter (**width** or **height**) and **aspect\_ratio**, the other dimension will be calculated. If you include both **width** and **height** in the URL, **aspect\_ratio** is ignored.

### Examples

|                                  |                                                                                                                                                                                                                                                                                                    |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/WJO5C08Pea3dwSQRiClK) | <p>Original aspect ratio (3:2 or 1.5):<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/car1.jpg?w=400">/samples.scaleflex.com/car1.jpg?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                         |
| ![](/files/JjCdye6hqU6LMCapBDU5) | <p>Cropped to 1.8:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/car1.jpg?w=400&#x26;aspect_ratio=1.8">/samples.scaleflex.com/car1.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>aspect\_ratio=1.8</strong></mark></a></p> |

## Crop without resize <a href="#od_46b79893" id="od_46b79893"></a>

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

### Examples

| Preview                          | Syntax                                                                                                                                                                                                                              |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/HDq5lk0K0gFFdqaSaCtN) | <p>Original aspect ratio (1.323):<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png">/samples.scaleflex.com/frog.png</a></p>                                                                               |
| ![](/files/wgss6O4uzD18VrKGQw75) | <p>Cropped to 3:2 (1.5):<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?aspect_ratio=3:2">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>aspect\_ratio=3:2</strong></mark></a></p> |

## Aspect ratio range <a href="#od_e014a40a" id="od_e014a40a"></a>

You can specify a range of aspect ratio values, for example, **aspect\_ratio=4:3,16:9**. Images that fall within this range, will not be cropped. Useful to avoid very wide or very tall images by cropping them to the closest aspect ratio.

### Examples

|                                  |                                                                                                                                                                                                                                                                                                                                        |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/rtYMJtA2ZQkUnYMo8t2v) | <p>Original aspect ratio 1.5:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/car1.jpg?w=400">/samples.scaleflex.com/car1.jpg?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                                                                      |
| ![](/files/sg8tYcpNiQCZijnx96sy) | <p>Aspect ratio range 1.5..2 (no crop needed):<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/car1.jpg?w=400&#x26;aspect_ratio=1.5,2.0">/samples.scaleflex.com/car1.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>aspect\_ratio=1.5,2.0</strong></mark></a></p> |
| ![](/files/jfoJI43W2N8dZNIxX3i5) | <p>Original aspect ratio 2.25:1 (2.25):<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/kids.jpg?w=400">/samples.scaleflex.com/kids.jpg?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                                                            |
| ![](/files/MqgqElrVeryuDkuqCgdi) | <p>Aspect ratio range 3:2..2:1 (1.5..2):<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/kids.jpg?w=400&#x26;aspect_ratio=3:2,2:1">/samples.scaleflex.com/kids.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>aspect\_ratio=3:2,2:1</strong></mark></a></p>       |


# Fit

Fits the image in a box with padding when needed

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.

<mark style="color:orange;">**func=fit**</mark>

{% hint style="info" %}
Please note that by default, smaller images will not be upscaled to fit the box. If you want to enable this behavior, you need to use <mark style="color:orange;">**fit\_enlarge=1**</mark>. along with <mark style="color:orange;">**func=fit**</mark>.
{% endhint %}

The padding can be customized using the following additional operations:

<table><thead><tr><th width="173.33333333333331">Operation</th><th>Syntax</th><th>Description</th></tr></thead><tbody><tr><td>gravity</td><td><mark style="color:orange;"><strong>gravity=X</strong></mark><br><code>X=[north|south][east|west]</code></td><td>sets the position of the image in the fit box</td></tr><tr><td>margin</td><td><mark style="color:$warning;"><strong>margin=X</strong></mark></td><td>defines a minimum margin when fitting the image in the new canvas</td></tr><tr><td>solid background</td><td><mark style="color:orange;"><strong>bg_color=X</strong></mark> | <mark style="color:orange;"><strong>bg_colour=X</strong></mark><br><code>X={hex color}|auto</code></td><td>defines a background color with a hex code, color name or automatically, based on the image palette</td></tr><tr><td>blurred background</td><td><mark style="color:orange;"><strong>bg_img_fit=1</strong></mark></td><td>sets blurred image background</td></tr><tr><td></td><td><mark style="color:orange;"><strong>bg_blur=X</strong></mark></td><td>applies Gaussian blur to the background image</td></tr><tr><td></td><td><mark style="color:orange;"><strong>bg_opacity=X</strong></mark><br><code>X=0..1</code></td><td>specifies background image opacity</td></tr><tr><td></td><td><mark style="color:orange;"><strong>bg_colorize=X</strong></mark> | <mark style="color:orange;"><strong>bg_colourise=X</strong></mark></td><td>defines a color to tint the background image</td></tr><tr><td></td><td><mark style="color:orange;"><strong>bg_gravity=X</strong></mark><br><code>X=[north|south][east|west]</code></td><td>defines the positioning of the background image within its container</td></tr><tr><td>image upscaling</td><td><mark style="color:orange;"><strong>fit_enlarge=1</strong></mark></td><td>allows upscaling smaller images to the desired dimensions (will result in inferior image resolution)</td></tr></tbody></table>

## Gravity

| <mark style="color:orange;">**northwest**</mark>                                                                 | <mark style="color:orange;">**north**</mark>                                                             | <mark style="color:orange;">**northeast**</mark> |
| ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
| <mark style="color:orange;">**west**</mark>                                                                      | <mark style="color:orange;">**center**</mark> \| <mark style="color:orange;">**centre**</mark> (default) | <mark style="color:orange;">**east**</mark>      |
| <mark style="color:orange;">**southwest**</mark>                                                                 | <mark style="color:orange;">**south**</mark>                                                             | <mark style="color:orange;">**southeast**</mark> |
| <mark style="color:$warning;">**trim**</mark> - [more info](/transformations/image-operations/trim#trim-gravity) |                                                                                                          |                                                  |

When using **`func=fit`** along with (**`trim=X)`**, you can set **`gravity=trim`**. This way, upon a successful trim, the gravity will be resolved to a compass position so that the canvas will not be extended on the non-trimmed edges.

## Margin

<mark style="color:$warning;">**margin=X**</mark>

If only one value is provided (**`margin=X`**), this sets the same minimum margin for all four edges. When two values are provided (**`margin=V,H`**), this sets the vertical (top and bottom) and horizontal (left and right) margins. If four values are listed (**`margin=N,E,S,W`**), they refer to the four image edges - north (top), east (right), south (bottom) and west (left).

By default, the margin is defined in pixels and applied before resizing. Alternatively, you can also use percentages (eg. **`margin=5p`**) of the destination size or absolute values in pixels (**`margin=100a`**) to define the margins.

{% hint style="info" %}
When using a margin alongside **`trim=X`** and **`gravity=trim`**, if a successful trim is performed, the margins on the non-trimmed side is removed. For more details, see the [Trim](/transformations/image-operations/trim) operation.
{% endhint %}

## Examples

| Preview                                                             | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](/files/KPN8hWQ9notq7q4f8cBo)                                    | <p>Solid background:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/hotel.jpg?w=400&#x26;h=245&#x26;func=fit&#x26;bg_color=000">/samples.scaleflex.com/hotel.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>h=245</strong></mark>&<mark style="color:orange;"><strong>func=fit</strong></mark>&<mark style="color:orange;"><strong>bg\_color=000</strong></mark></a></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ![](/files/HANA7y9eDNqG8J1bdso4)                                    | <p>Automatic solid background:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?func=fit&#x26;w=400&#x26;h=220&#x26;bg_colour=auto">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>func=fit</strong></mark>&<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>h=220</strong></mark>&<mark style="color:orange;"><strong>bg\_colour=auto</strong></mark></a></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ![](/files/YuKbljbxDhdKJtF4ZONj)                                    | <p>Blurred background:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/car1.jpg?w=400&#x26;h=320&#x26;func=fit&#x26;bg_img_fit=1&#x26;bg_opacity=0.75">/samples.scaleflex.com/car1.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>h=320</strong></mark>&<mark style="color:orange;"><strong>func=fit</strong></mark>&<mark style="color:orange;"><strong>bg\_img\_fit=1</strong></mark>&<mark style="color:orange;"><strong>bg\_opacity=0.75</strong></mark></a></p>                                                                                                                                                                                                                                                                                                                                                                                                        |
| ![](/files/lcMD6OZXIAzKYlbtgAQ9)                                    | <p>Blurred background, tinted:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/boat.jpg?func=fit&#x26;w=400&#x26;h=330&#x26;bg_img_fit=1&#x26;bg_opacity=0.5&#x26;bg_colorize=red">/samples.scaleflex.com/boat.jpg?<mark style="color:orange;"><strong>func=fit</strong></mark>&<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>h=330</strong></mark>&<mark style="color:orange;"><strong>bg\_img\_fit=1</strong></mark>&<mark style="color:orange;"><strong>bg\_opacity=0.5</strong></mark>&<mark style="color:orange;"><strong>bg\_colorize=red</strong></mark></a></p>                                                                                                                                                                                                                                                                                                        |
| <img src="/files/Q4wXW3DUgIoFRT9pMjIW" alt="" data-size="original"> | <p>Align Background image to right (east gravity):<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/classroom.jpg?func=fit&#x26;width=600&#x26;height=600&#x26;q=70&#x26;bg_img_fit=1&#x26;bg_blur=15&#x26;bg_gravity=east&#x26;bg_colorize=lc000000&#x26;bg_opacity=0.5">/samples.scaleflex.com/classroom.jpg?<mark style="color:orange;"><strong>func=fit</strong></mark>&<mark style="color:orange;"><strong>width=600</strong></mark>&<mark style="color:orange;"><strong>height=600</strong></mark>&<mark style="color:orange;"><strong>q=70</strong></mark>&<mark style="color:orange;"><strong>bg\_img\_fit=1</strong></mark>&<mark style="color:orange;"><strong>bg\_blur=15</strong></mark>&<mark style="color:orange;"><strong>bg\_gravity=east</strong></mark>&<mark style="color:orange;"><strong>bg\_colorize=lc000000</strong></mark>&<mark style="color:orange;"><strong>bg\_opacity=0.5</strong></mark></a></p> |
| <img src="/files/O6fqG9zmOj1dZ3SocWCF" alt="" data-size="original"> | <p>Align Background image to left (west gravity):<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/classroom.jpg?func=fit&#x26;width=600&#x26;height=600&#x26;q=70&#x26;bg_img_fit=1&#x26;bg_blur=15&#x26;bg_gravity=west&#x26;bg_colorize=lc000000&#x26;bg_opacity=0.5">/samples.scaleflex.com/classroom.jpg?<mark style="color:orange;"><strong>func=fit</strong></mark>&<mark style="color:orange;"><strong>width=600</strong></mark>&<mark style="color:orange;"><strong>height=600</strong></mark>&<mark style="color:orange;"><strong>q=70</strong></mark>&<mark style="color:orange;"><strong>bg\_img\_fit=1</strong></mark>&<mark style="color:orange;"><strong>bg\_blur=15</strong></mark>&<mark style="color:orange;"><strong>bg\_gravity=west</strong></mark>&<mark style="color:orange;"><strong>bg\_colorize=lc000000</strong></mark>&<mark style="color:orange;"><strong>bg\_opacity=0.5</strong></mark></a></p>  |
| <img src="/files/oag8bjXAP7nkn9uQiL8f" alt="" data-size="original"> | <p>No upscaling of smaller images (default):</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/castle_doc.jpg?w=600&#x26;h=245&#x26;func=fit&#x26;bg_color=113650">/samples.scaleflex.com/castle\_doc.jpg?<mark style="color:orange;"><strong>w=600</strong></mark>&<mark style="color:orange;"><strong>h=245</strong></mark>&<mark style="color:orange;"><strong>func=fit</strong></mark>&<mark style="color:orange;"><strong>bg\_color=113650</strong></mark></a></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| <img src="/files/w5yWePHPJJDroUlOwjjX" alt="" data-size="original"> | <p>Upscaling allowed:</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/castle_doc.jpg?w=600&#x26;h=245&#x26;func=fit&#x26;bg_color=113650&#x26;fit_enlarge=1">/samples.scaleflex.com/castle\_doc.jpg?<mark style="color:orange;"><strong>w=600</strong></mark>&<mark style="color:orange;"><strong>h=245</strong></mark>&<mark style="color:orange;"><strong>func=fit</strong></mark>&<mark style="color:orange;"><strong>bg\_color=113650</strong></mark>&<mark style="color:orange;"><strong>fit\_enlarge=1</strong></mark></a></p>                                                                                                                                                                                                                                                                                                                                                                                        |


# Cropfit

Automatic crop or fit based on origin dimensions

Performs either [Crop](/transformations/image-operations/crop) or [Fit](/transformations/image-operations/fit) 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.

<mark style="color:orange;">**func=cropfit**</mark>

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](/files/Bfk19e3taIMo6E995FQ0) | <p>Original image (650x500 pixels):<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/classroom.jpg">/samples.scaleflex.com/classroom.jpg</a></p>                                                                                                                                                                                                                                                                                                  |
| ![](/files/uVXRJUvNBN7DKI5yWbGy) | <p>Cropfit to 500x350:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/classroom.jpg?func=cropfit&#x26;w=500&#x26;h=350&#x26;bg_color=auto">/samples.scaleflex.com/classroom.jpg?<mark style="color:orange;"><strong>func=cropfit</strong></mark>&<mark style="color:orange;"><strong>w=500</strong></mark>&<mark style="color:orange;"><strong>h=350</strong></mark>&<mark style="color:orange;"><strong>bg\_color=auto</strong></mark></a></p> |
| ![](/files/FsiMe4W8y9czk1owOBWt) | <p>Original image (400x250 pixels):<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/ny_doc.jpg">/samples.scaleflex.com/ny\_doc.jpg</a></p>                                                                                                                                                                                                                                                                                                       |
| ![](/files/2TzhIKs1sWriQaEuBTpc) | <p>Cropfit to 500x350:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/ny_doc.jpg?func=cropfit&#x26;w=500&#x26;h=350&#x26;bg_color=auto">/samples.scaleflex.com/ny\_doc.jpg?<mark style="color:orange;"><strong>func=cropfit</strong></mark>&<mark style="color:orange;"><strong>w=500</strong></mark>&<mark style="color:orange;"><strong>h=350</strong></mark>&<mark style="color:orange;"><strong>bg\_color=auto</strong></mark></a></p>      |

## Using cropfit with trim

If you include the [Trim](/transformations/image-operations/trim) operation in the URL, the image will be trimmed first (if possible) and then either cropped or fitted to the desired size.

### Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/ZppoRLxXckuWex9LZuBQ) | <p>Original image:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/sofa.jpg">/samples.scaleflex.com/sofa.jpg</a></p>                                                                                                                                                                                                                                                                                                                                                                                        |
| ![](/files/iiU2tNmlfZqxLXyoCxsG) | <p>Cropfit + trim:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/sofa.jpg?func=cropfit&#x26;trim=0&#x26;w=500&#x26;h=350&#x26;bg_colour=auto">/samples.scaleflex.com/sofa.jpg?<mark style="color:orange;"><strong>func=cropfit</strong></mark>&<mark style="color:orange;"><strong>trim=0</strong></mark>&<mark style="color:orange;"><strong>w=500</strong></mark>&<mark style="color:orange;"><strong>h=350</strong></mark>&<mark style="color:orange;"><strong>bg\_colour=auto</strong></mark></a></p> |


# Bound

Resize with maximum size constraints (fit in a box)

Resizes to a given **width** and **height** box and keeps proportions. Similar to [Fit](/transformations/image-operations/fit) but without adding padding. Delivers the resulting image via CDN.

<mark style="color:orange;">**func=bound**</mark>

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/UhCl8DfzAnViMb47OWsH) | [/samples.scaleflex.com/eiffel\_doc.jpg?<mark style="color:orange;">**width=600**</mark>&<mark style="color:orange;">**height=600**</mark>&<mark style="color:orange;">**func=bound**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/eiffel_doc.jpg?width=600\&height=600\&func=bound) |


# Boundmin

Resize with minimum size constraints (to fill a box)

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

<mark style="color:orange;">**func=boundmin**</mark>

{% hint style="info" %}
Please note that the larger dimension of the resized image will be equal to or greater than the dimensions set in the URL. If you would like to fit the image to set **width** and **height**, you should use either [Fit](/transformations/image-operations/fit) or [Bound](/transformations/image-operations/bound).
{% endhint %}

## Examples <a href="#examples-1" id="examples-1"></a>

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                      |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/xD8h29169ljjxYi2XRhZ) | [/samples.scaleflex.com/eiffel\_doc.jpg?<mark style="color:orange;">**width=600**</mark>&<mark style="color:orange;">**height=600**</mark>&<mark style="color:orange;">**func=boundmin**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/eiffel_doc.jpg?width=600\&height=600\&func=boundmin) |

<br>


# Cover

Resize ignoring proportions

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

<mark style="color:orange;">**func=cover**</mark>

{% hint style="info" %}
The **cover** resize function does not keep proportions and might distort your original image. This mode should be used carefully.
{% endhint %}

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                     |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](/files/AjiY704VVVdh3kEKH03s) | [/samples.scaleflex.com/tesla.jpg?<mark style="color:orange;">**width=400**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/tesla.jpg?width=400)                                                                                                                             |
| ![](/files/vfVyWeJYX82ln36eaUEK) | [/samples.scaleflex.com/tesla.jpg?<mark style="color:orange;">**width=400**</mark>&<mark style="color:orange;">**height=400**</mark>&<mark style="color:orange;">**func=cover**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/tesla.jpg?width=400\&height=400\&func=cover) |


# Device pixel ratio

Delivers the optimal size based on device pixel-ratio

Allows you to deliver the proper 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.

<mark style="color:orange;">**dpr=X**</mark>

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                       |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/33Lr87FjcD5FozEDppX4) | <p>No dpr parameter (assumed dpr=1):<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/birds.jpg?w=400">/samples.scaleflex.com/birds.jpg?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                   |
| ![](/files/wK8C8RsUDbQ0ayMQCLjr) | <p>Device pixel ratio 1.75:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/birds.jpg?w=400&#x26;dpr=1.75">/samples.scaleflex.com/birds.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>dpr=1.75</strong></mark></a></p> |


# Flip

Mirror image

Mirrors the image horizontally and/or vertically.

<mark style="color:orange;">**flip=h**</mark> | <mark style="color:orange;">**flip=v**</mark> | <mark style="color:orange;">**flip=hv**</mark>

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                        |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/BFI5jLw7NxsVEKZZtJTw) | <p>Flip horizontally:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/flat_hd.jpg?w=400&#x26;flip=h">/samples.scaleflex.com/flat\_hd.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>flip=h</strong></mark></a></p>                       |
| ![](/files/eJS8psi1MGULOra2L09I) | <p>Flip both horizontally and vertically:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/flat_hd.jpg?w=400&#x26;flip=hv">/samples.scaleflex.com/flat\_hd.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>flip=hv</strong></mark></a></p> |

{% hint style="info" %}
If the image is also rotated, rotation is performed *after* the image has been flipped.
{% endhint %}


# Rotate

Arbitrary angle rotation

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.

<mark style="color:orange;">**r=X**</mark>

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                            |
| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/bXA2ygFHTs1GRaIlNM1S) | [/samples.scaleflex.com/earth.jpg?<mark style="color:orange;">**w=400**</mark>&<mark style="color:orange;">**r=90**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/earth.jpg?w=400\&r=90)                                                                          |
| ![](/files/7A6ESN05dOAjrZ9R4Yst) | [/samples.scaleflex.com/earth.jpg?<mark style="color:orange;">**w=400**</mark>&<mark style="color:orange;">**r=15**</mark>&<mark style="color:orange;">**bg\_color=10100E**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/earth.jpg?w=400\&r=15\&bg_color=10100E) |

{% hint style="info" %}
Please note that image rotation is performed *before* resizing operations.
{% endhint %}


# Trim

Image trimming

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) might trim part of the image. Typical values are between 0 and 10.

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

<mark style="color:orange;">**trim=X**</mark>

{% hint style="info" %}
If the image is resized with the **width** and/or **height** commands, the resizing is performed *after* the border (if present) is trimmed.
{% endhint %}

## Trim gravity

When **`gravity=trim`** is set alongside trim=X (for the [Crop](/transformations/image-operations/crop), [Fit](/transformations/image-operations/fit) or [Cropfit](/transformations/image-operations/cropfit) operations), the focal point is defined depending on the trim result:

* When the image is trimmed on all sides, gravity is set to **center**;
* When no trim has been performed, gravity is set to **smart**;
* If the image has been trimmed on some edges only, the gravity is set to:
  * **fit** operation - gravity is set to the edges opposite of the trimmed ones so that the canvas is extended only on the trimmed sides;
  * **crop** operation - gravity is set to the trimmed edges so that the image is not cropped anymore on the trimmed edges.

## Whitespace trim

By default, the trim operation removes any solid color regions at the edges. If you prefer to only trim out white (and near-white) and transparent regions while preserving other solid colors, you can add the `whites` instruction to the trim. The intensity parameter remains the same.

<mark style="color:orange;">**trim=whites,X**</mark>

## Examples

| Preview                                                                               | Syntax                                                                                                                                                                                                                                                                                          |
| ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/hoEJIxKju5Et59mc7mKV)                                                      | <p>Original image:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/painting_big.jpg?w=400">/samples.scaleflex.com/painting\_big.jpg?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                         |
| ![](/files/satDZgqXKPXeZ9wj90x8)                                                      | <p>Trimmed image:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/painting_big.jpg?w=400&#x26;trim=10">/samples.scaleflex.com/painting\_big.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>trim=10</strong></mark></a></p> |
| ![](/files/i4goQqSkUiwTa1hZpflq)                                                      | <p>Original image:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/sofa.jpg?w=400">/samples.scaleflex.com/sofa.jpg?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                                          |
| ![](/files/5fbmTBYDNUdOR1vQkb5P)                                                      | <p>Trimmed image:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/sofa.jpg?w=400&#x26;trim=10">/samples.scaleflex.com/sofa.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>trim=10</strong></mark></a></p>                  |
| ![](https://doc.cloudimg.io/https://samples.scaleflex.com/darkside.jpg)               | <p>Original image:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/darkside.jpg">/samples.scaleflex.com/darkside.jpg</a></p>                                                                                                                                                  |
| ![](https://doc.cloudimg.io/https://samples.scaleflex.com/darkside.jpg?trim=1)        | <p>Wrongly trimmed image:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/darkside.jpg?trim=1">/samples.scaleflex.com/darkside.jpg?<mark style="color:orange;"><strong>trim=1</strong></mark></a></p>                                                                         |
| ![](https://doc.cloudimg.io/https://samples.scaleflex.com/darkside.jpg?trim=whites,1) | <p>Trim corrected with "only whites":<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/darkside.jpg?trim=whites,1">/samples.scaleflex.com/darkside.jpg?<mark style="color:orange;"><strong>trim=whites,1</strong></mark></a></p>                                               |


# Rounded corners

Apply rounded corners with specified radius

Rounds the corners of images with a radius of X pixels. If you wish to fill the cut corner(s) with a specific color, you can use the **bg\_color** parameter.

<mark style="color:orange;">**radius=X**</mark>  (all corners are rounded with radius X pixels)

<mark style="color:orange;">**radius=R1,R2,R3,R4**</mark> (values for each corner, with max being the min px of the 2 sides around corner)

If four values are provided, these values correspond to the four corners: R1 = top-left corner, R2 = bottom-left corner, R3 = bottom-right corner, R4 =top-right corner. For example, to round only one of the corners with the maximum possible radius, you need to use **radius=max,0,0,0**.

## Examples

<table><thead><tr><th width="373.5390625">Preview</th><th>Syntax</th></tr></thead><tbody><tr><td><div><figure><img src="/files/IJNDyL1jecNLG3diKoJT" alt="" width="300"><figcaption></figcaption></figure></div></td><td>Transparent corners (default, if the formats supports transparency):<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/flat2.jpg?w=400&#x26;radius=25&#x26;force_format=png">/samples.scaleflex.com/flat2.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&#x26;<mark style="color:orange;"><strong>radius=25</strong></mark>&#x26;<mark style="color:orange;"><strong>force_format=png</strong></mark></a></td></tr><tr><td><div><figure><img src="/files/87FsaU3wZr71HLtX6uDa" alt="" width="300"><figcaption></figcaption></figure></div></td><td>Solid color corners:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/car1.jpg?w=400&#x26;radius=25&#x26;bg_color=cccc30">/samples.scaleflex.com/car1.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&#x26;<mark style="color:orange;"><strong>radius=25</strong></mark>&#x26;<mark style="color:orange;"><strong>bg_color=cccc30</strong></mark></a></td></tr><tr><td><div><figure><img src="/files/SjFcYLzfZQZ0RpfX6U29" alt="" width="300"><figcaption></figcaption></figure></div></td><td>Maximum radius on two corners only:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/hotel.jpg?w=400&#x26;h=245&#x26;func=crop&#x26;radius=0,max,0,max">/samples.scaleflex.com/hotel.jpg?<mark style="color:$warning;"><strong>w=400</strong></mark>&#x26;<mark style="color:$warning;"><strong>h=245</strong></mark>&#x26;<mark style="color:$warning;"><strong>radius=0,max,0,max</strong></mark></a></td></tr></tbody></table>


# Background removal

Isolate the main object in the image and remove the background

{% hint style="info" %}
Background removal is powered by Visual Operations Credits; full details on consumption rates can be found here: [Visual Operation Credits table](https://docs.cloudimage.io/account-management/usage#visual-operation-credits-table)
{% endhint %}

<mark style="color:orange;">**bg\_remove=1**</mark>

Background removal automatically detects the foreground object and isolates it by removing the background of an image using advanced AI technology. It can help you create a solid or transparent background for your pictures. This can give your application or website an overall polished look. Moreover, product images with a clear-defined foreground can be indexed better in search engines which rely on AI classification.

{% hint style="info" %}
Please keep in mind that the background removal operation is asynchronous which means that the first request will return the original image (with short cache value) while the image is being processed in the background. The status is checked on each consecutive request and after the operation is complete, the origin image is replaced and the standard caching settings are set.
{% endhint %}

## Examples

| Preview                                                             | Syntax                                                                                                                                                                                                                                                                                     |
| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <img src="/files/3yJZ3F0YIBRNBIJBatrn" alt="" data-size="original"> | [/samples.scaleflex.com/face.png?<mark style="color:orange;">**w=400**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/face.png?w=400)                                                                                                                                       |
| <img src="/files/QqKswrOqjpAdmuG9j3MM" alt="" data-size="original"> | [/samples.scaleflex.com/face.png?<mark style="color:orange;">**w=400**</mark>&<mark style="color:orange;">**bg\_remove=1**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/face.png?w=400\&bg_remove=1)                                                                      |
| <img src="/files/eKJADtzVpnSiHcat5KWh" alt="" data-size="original"> | [/samples.scaleflex.com/purse.jpg?<mark style="color:orange;">**w=400**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/purse.jpg?w=400)                                                                                                                                     |
| <img src="/files/eav1XeQwbOq9APmSykK3" alt="" data-size="original"> | [/samples.scaleflex.com/purse.jpg?<mark style="color:orange;">**w=400**</mark>&<mark style="color:orange;">**bg\_remove=1**</mark>&<mark style="color:orange;">**bg\_color=456**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/purse.jpg?w=400\&bg_remove=1\&bg_color=456) |

Feel free to try the background removal algorithm with your own images on our [AI demo page](https://ai.scaleflex.com/demo/#/).


# Image filters

Apply image effects and adjustments

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

Most of the on-the-fly image transformations can be configured using the [Asset Variation Builder](/transformations/asset-variation-builder), an in-line URL  builder to preview each image transformation instantly.

## Available filters

| Filter                                                                 | Syntax                                                                                                 | Description                                                     |                                                                    |                                                                      |                                               |
| ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------- | --------------------------------------------- |
| [Brightness](/transformations/image-filters/adjustment/brightness)     | <mark style="color:green;">**bright=X**</mark> \| <mark style="color:green;">**f=bright:X**</mark>     | adjusts the brightness of the image                             |                                                                    |                                                                      |                                               |
| [Contrast](/transformations/image-filters/adjustment/contrast)         | <mark style="color:green;">**contrast=X**</mark> \| <mark style="color:green;">**f=contrast:X**</mark> | adjusts the contrast of the image                               |                                                                    |                                                                      |                                               |
| [Saturate](/transformations/image-filters/adjustment/saturate)         | <mark style="color:green;">**saturate=X**</mark> \| <mark style="color:green;">**f=saturate:X**</mark> | adjusts the saturation of the image                             |                                                                    |                                                                      |                                               |
| [Grayscale](/transformations/image-filters/colorize/grayscale)         | <p><mark style="color:green;"><strong>gray=1</strong></mark>                                           | <mark style="color:green;"><strong>f=gray</strong></mark>       | <br><mark style="color:green;"><strong>grey=1</strong></mark>      | <mark style="color:green;"><strong>f=grey</strong></mark></p>        | converts the image to a black and white one   |
| [Color overlay](/transformations/image-filters/colorize/color-overlay) | <mark style="color:green;">**colorize=X**</mark> \| <mark style="color:green;">**colourise=X**</mark>  | applies a color overlay                                         |                                                                    |                                                                      |                                               |
| [Pixelate](/transformations/image-filters/pixelate)                    | <p><mark style="color:green;"><strong>pixelate=X</strong></mark>                                       | <mark style="color:green;"><strong>f=pixelate:X</strong></mark> | <br><mark style="color:green;"><strong>pixellate=X</strong></mark> | <mark style="color:green;"><strong>f=pixellate:X</strong></mark></p> | pixelates the image into X-pixel-sized blocks |
| [Blur](/transformations/image-filters/blur)                            | <mark style="color:green;">**blur=X**</mark> \| <mark style="color:green;">**f=blur:X**</mark>         | applies Gaussian blur                                           |                                                                    |                                                                      |                                               |
| [Sharpen](/transformations/image-filters/sharpen)                      | <mark style="color:green;">**sharp=X**</mark> \| <mark style="color:green;">**f=sharp:X**</mark>       | applies unsharp mask to sharpen the image                       |                                                                    |                                                                      |                                               |
| [Face blur](/transformations/image-filters/face-blur)                  | <mark style="color:green;">**blur\_faces=X**</mark>                                                    | detects all faces in the image and applies blur to conceal them |                                                                    |                                                                      |                                               |

## Combining filters

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

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                                                                                        |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/u0x81FqQ9646KVM7Nd8k) | <p>Separate parameters:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/ny_doc.jpg?bright=15&#x26;contrast=30&#x26;gray=1">/samples.scaleflex.com/ny\_doc.jpg?<mark style="color:green;"><strong>bright=15</strong></mark>&<mark style="color:green;"><strong>contrast=30</strong></mark>&<mark style="color:green;"><strong>gray=1</strong></mark></a></p> |
| ![](/files/E4j3BSjMTNweIw3NRD9a) | <p>Concatenate into the f parameter:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/ny_doc.jpg?f=bright:15,contrast:30,gray">/samples.scaleflex.com/ny\_doc.jpg?<mark style="color:green;"><strong>f=bright:15,contrast:30,gray</strong></mark></a></p>                                                                                                    |


# Adjustment

Modify brightness, contrast and saturation


# Brightness

Brightness correction

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

<mark style="color:green;">**bright=X**</mark>

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                     |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](/files/dHx77GnZrDEOsfMloic9) | <p>Original image:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?w=400">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                                     |
| ![](/files/v6JD5y10AIc3rf6RMM2h) | <p>Increased brightness:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?w=400&#x26;bright=15">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>bright=15</strong></mark></a></p>   |
| ![](/files/x4MSXzBoXwnQ8lcpZdTo) | <p>Decreased brightness:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?w=400&#x26;bright=-10">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>bright=-10</strong></mark></a></p> |


# Contrast

Brightness correction

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

<mark style="color:green;">**contrast=X**</mark>

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                       |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/Xke2jn5RzekEKrr4TSyh) | <p>Original image:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?w=400">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                                       |
| ![](/files/xOfmOwdnvFbx3eHsqqyh) | <p>Increased contrast:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?w=400&#x26;contrast=30">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>contrast=30</strong></mark></a></p>   |
| ![](/files/GZuuA5m1QeN4OBPZfFsw) | <p>Decreased contrast:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?w=400&#x26;contrast=-10">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>contrast=-10</strong></mark></a></p> |


# Saturate

Color saturation correction

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.

<mark style="color:green;">**saturate=X**</mark>

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                       |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/JD9IpcRQLrDXK0T3arXg) | <p>Original image:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?w=400">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                                       |
| ![](/files/1f3BDj30kGwsOxqSr8IJ) | <p>Increased saturation:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?w=400&#x26;saturate=35">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>saturate=35</strong></mark></a></p> |

## Desaturate

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

{% hint style="info" %}
Please keep in mind that desaturating an image just discards all color information. If you prefer to create a grayscale image while taking into account the human visual system's color perception, you should use the **gray** parameter instead.
{% endhint %}

### Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                   |
| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/9zSVqAjiIqo3GQvsjl3t) | <p>Desaturation:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?w=400&#x26;saturate=-100">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>saturate=-100</strong></mark></a></p> |
| ![](/files/hu43VgFVCwAZqxRDxVi6) | <p>Grayscale:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?w=400&#x26;gray=1">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>gray=1</strong></mark></a></p>                  |


# Color manipulation

Color effects and filters


# Color overlay

Colorize the image with an overlay

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`).

<mark style="color:green;">**colorize=X\[,Y]**</mark> | <mark style="color:green;">**colourise=X\[,Y]**</mark>

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                                                                                                             |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/mf5s1AeKLknohtFNc1Ho) | <p>Original image:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?w=400">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                                                                                                                                             |
| ![](/files/oHiy8IWtzb1pQL3tnOEL) | <p>Color overlay:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?w=400&#x26;colorize=red,0.85">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>colorize=red,0.85</strong></mark></a></p>                                                                                                  |
| ![](/files/bZTxPY0Npo2K2MxPVdI6) | <p>Desaturate and color overlay:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?w=400&#x26;saturate=-100&#x26;colorize=7af,0.6">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>saturate=-100</strong></mark>&<mark style="color:green;"><strong>colorize=7af,0.6</strong></mark></a></p> |
| ![](/files/v6T76RRp9n2tEZVNKGnf) | <p>Grayscale and color overlay:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?w=400&#x26;gray=1&#x26;colorize=7af,0.6">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>gray=1</strong></mark>&<mark style="color:green;"><strong>colorize=7af,0.6</strong></mark></a></p>                |


# Grayscale

Black and white conversion

Transforms the image into a black-and-white image.

<mark style="color:green;">**gray=1**</mark> | <mark style="color:green;">**grey=1**</mark>

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                          |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/R31AdjMUXfi1MouIFRYj) | <p>Original image:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/paris.jpg?w=400">/samples.scaleflex.com/paris.jpg?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                        |
| ![](/files/nL70DnzNCfdUJxYcSnSA) | <p>Grayscale image:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/paris.jpg?w=400&#x26;gray=1">/samples.scaleflex.com/paris.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>gray=1</strong></mark></a></p> |


# Duotone

Duotone transform

Create a duotone effect by using **duotone=C1,C2\[,Y]**, where **C1** and **C2** are the colors for the duotone (hex value or color name) and **Y** is the opacity (`Y=0..1`, default`1`).

<mark style="color:green;">**duotone=C1,C2\[,Y]**</mark>

| Preview                                                             | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="/files/oBUnpas6V5ga9IQF7LB8" alt="" data-size="original"> | <p>Original image:</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/mountains.jpg?w=400">/samples.scaleflex.com/mountains.jpg?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                                                                                                                                                                |
| <img src="/files/hmsiJbBRr7FpfDoFwCOx" alt="" data-size="original"> | <p>By default, the image is desaturated first:</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/mountains.jpg?w=400&#x26;duotone=000080,ffff00">/samples.scaleflex.com/mountains.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>duotone=000080,ffff00</strong></mark></a></p>                                                                                |
| <img src="/files/3Pfvor7rfAb3PIjmZVQs" alt="" data-size="original"> | <p>If you prefer, you can convert to grayscale instead:</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/mountains.jpg?w=400&#x26;duotone=000080,ffff00&#x26;gray=1">/samples.scaleflex.com/mountains.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>duotone=000080,ffff00</strong></mark>&<mark style="color:green;"><strong>gray=1</strong></mark></a></p> |
| <img src="/files/8BvNqkIhQm0x3RmVeMne" alt="" data-size="original"> | <p>60% opacity (0.6) of the filter:</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/mountains.jpg?w=400&#x26;duotone=000080,ffff00,0.6">/samples.scaleflex.com/mountains.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>duotone=000080,ffff00,0.6</strong></mark></a></p>                                                                                   |


# Sepia

Sepia tone

To apply a sepia effect to your images, you can use the `sepia=1` parameter.

<mark style="color:green;">**sepia=1**</mark>

| Preview                                                             | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <img src="/files/64o2cVWo9aDp3X63aMB6" alt="" data-size="original"> | <p>Original image:</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/paris.jpg?w=400">/samples.scaleflex.com/paris.jpg?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                                                                                                                                                                                                                                                                                                                                      |
| <img src="/files/eZopKw3xZtpc1vkRYe4x" alt="" data-size="original"> | <p>Sepia tone:</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/paris.jpg?w=400&#x26;sepia=1">/samples.scaleflex.com/paris.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>sepia=1</strong></mark></a></p>                                                                                                                                                                                                                                                                                                                  |
| <img src="/files/HyC90EkTjWAyC5QbPS0j" alt="" data-size="original"> | <p>Original image:</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/face.png?w=400">/samples.scaleflex.com/face.png?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                                                                                                                                                                                                                                                                                                                                        |
| <img src="/files/hOjHzS2adT55FBwZwdRk" alt="" data-size="original"> | <p>You can combine any color adjustments and filters to achieve the desired artistic effects:</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/face.png?w=400&#x26;sepia=1&#x26;contrast=24&#x26;bright=-10&#x26;gray=1">/samples.scaleflex.com/face.png?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>sepia=1</strong></mark>&<mark style="color:green;"><strong>contrast=24</strong></mark>&<mark style="color:green;"><strong>bright=-10</strong></mark>&<mark style="color:green;"><strong>gray=1</strong></mark></a></p> |


# Invert

Color inversion

To invert the colors of an image, use the invert=1 parameter.

<mark style="color:green;">**invert=1**</mark>

| Preview                                                             | Syntax                                                                                                                                                                                                            |
| ------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="/files/zIC468MzJEcpL1w9T9jP" alt="" data-size="original"> | <p>Original image:</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/fields.jpg?w=400">/samples.scaleflex.com/fields.jpg?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>     |
| <img src="/files/Io3FQ7S5Jf70mVMrSRNC" alt="" data-size="original"> | [/samples.scaleflex.com/fields.jpg?<mark style="color:orange;">**w=400**</mark>&<mark style="color:green;">**invert=1**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/fields.jpg?w=400\&invert=1) |


# Blur

Gaussian blur

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

<mark style="color:green;">**blur=X**</mark>

## Examples

| Preview                          | Syntax                                                                                                                                                                                                     |
| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/gIBXVlYABkGVuaLcdr2H) | <p>Original image:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/ny_doc.jpg">/samples.scaleflex.com/ny\_doc.jpg</a></p>                                                                |
| ![](/files/YDWJjqyQM0PaqwEL4th6) | <p>Blur applied:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/ny_doc.jpg?blur=6">/samples.scaleflex.com/ny\_doc.jpg?<mark style="color:green;"><strong>blur=6</strong></mark></a></p> |


# Pixelate

Mosaic filter

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.

<mark style="color:green;">**pixelate=X**</mark> | <mark style="color:green;">**pixellate=X**</mark>

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                  |
| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/4qHpp0LWN9kFV7W9yPW6) | <p>Original image:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/earth.jpg?w=400">/samples.scaleflex.com/earth.jpg?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                                |
| ![](/files/2RcXRQLK64vIB0PV6esP) | <p>Pixelate effect:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/earth.jpg?w=400&#x26;pixelate=8">/samples.scaleflex.com/earth.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:green;"><strong>pixelate=8</strong></mark></a></p> |


# Sharpen

Unsharp mask

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

<mark style="color:green;">**sharp=X**</mark>

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                     |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](/files/I5OzP0BYNoM75zyCsfHV) | <p>Only resize:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/darkside.jpg?w=300">/samples.scaleflex.com/darkside.jpg?<mark style="color:orange;"><strong>w=300</strong></mark></a></p>                                                                                |
| ![](/files/6uXPS0Ew86OfR49iKuDm) | <p>Resize and sharpen:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/darkside.jpg?w=300&#x26;sharp=3">/samples.scaleflex.com/darkside.jpg?<mark style="color:orange;"><strong>w=300</strong></mark>&<mark style="color:green;"><strong>sharp=3</strong></mark></a></p> |


# Face blur

{% hint style="info" %}
Face blur is powered by Visual Operations Credits; full details on consumption rates can be found here: [Visual Operation Credits table](https://docs.cloudimage.io/account-management/usage#visual-operation-credits-table)
{% endhint %}

Detects all faces in the image and applies blur to conceal them. To activate the filter, set X to 1 (`blur_faces=1`). You can control the blur radius (default: `R=30`) and sigma (default: `S=1000`).

<mark style="color:green;">**blur\_faces=1\[,R\[,S]]**</mark>

## Examples

| Preview                                                             | Syntax                                                                                                                                                                                                                                                                                                  |
| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="/files/V29Rd4KGMKdTRDd4FW0L" alt="" data-size="original"> | <p>Original image:</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/busystreet.jpg?w=600">/samples.scaleflex.com/busystreet.jpg?<mark style="color:orange;"><strong>w=600</strong></mark></a></p>                                                                                   |
| <img src="/files/DslHKVnrmhxJti7zR6CR" alt="" data-size="original"> | <p>Faces blurred:</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/busystreet.jpg?w=600&#x26;blur_faces=1">/samples.scaleflex.com/busystreet.jpg?<mark style="color:orange;"><strong>w=600</strong></mark>&<mark style="color:green;"><strong>blur\_faces=1</strong></mark></a></p> |


# Image watermarking

Compose image or text layers over the main image

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

Most of the on-the-fly image transformations can be configured using the [Asset Variation Builder](/transformations/asset-variation-builder), an in-line URL  builder to preview each image transformation instantly.

| <p><a data-mention href="/pages/7qO2BNUSggrFIAbOvIli">/pages/7qO2BNUSggrFIAbOvIli</a></p><p><br>Apply the same image watermark to all the images you decide to watermark (e.g. your company's logo).</p>       | ![](/files/9fcnfaWIOkjESwATRcCQ) |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| <p><a data-mention href="/pages/gw9dSLe02bS5iUhqbqXT">/pages/gw9dSLe02bS5iUhqbqXT</a></p><p><br>Specify the watermark in the Cloudimage URL to apply different watermarks to different images.</p>             | ![](/files/qA7LkJrli1JIr8hRdggQ) |
| <p><a data-mention href="/pages/JM94OrgPW0SHtccrmNsC">/pages/JM94OrgPW0SHtccrmNsC</a></p><p><br>If you need to tag images, use the text watermark to dynamically embed text to the images you need tagged.</p> | ![](/files/8E7ZayyGFTZVz7BBkcur) |

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

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

?<mark style="color:purple;">**wat\[1]=1**</mark>&<mark style="color:purple;">**wat\[2]=1**</mark>&<mark style="color:purple;">**wat\_scale\[1]=50**</mark>&<mark style="color:purple;">**wat\_scale\[2]=10**</mark>&<mark style="color:purple;">**wat\_opacity=0.5**</mark>

In the above fragment, **wat\_opacity=0.5** will be applied to both watermarks.

### Multiple watermark types

Combining multiple watermark types is also possible.

{% hint style="info" %}
Remember that the presence of the **wat\_url=X** parameter defines a dynamic watermark, **wat\_text=X** defines a text watermark and the absence of either defines a static watermark.
{% endhint %}

?<mark style="color:purple;">**wat\[**</mark><mark style="color:red;">**1**</mark><mark style="color:purple;">**]=1**</mark>&<mark style="color:purple;">**wat\[**</mark><mark style="color:red;">**2**</mark><mark style="color:purple;">**]=1**</mark>&<mark style="color:purple;">**wat\[**</mark><mark style="color:red;">**3**</mark><mark style="color:purple;">**]=1**</mark>&<mark style="color:purple;">**wat\_url\[**</mark><mark style="color:red;">**2**</mark><mark style="color:purple;">**]=sample.li/Angular.png**</mark>&<mark style="color:purple;">**wat\_text\[**</mark><mark style="color:red;">**3**</mark><mark style="color:purple;">**]=text**</mark>

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.

### Example

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](/files/yAJCcGIIoruaYlMMvAsY) | [/samples.scaleflex.com/paris-salon2.jpg?<mark style="color:orange;">**w=600**</mark>&<mark style="color:purple;">**wat\[**</mark><mark style="color:red;">**1**</mark><mark style="color:purple;">**\]=1**</mark>&<mark style="color:purple;">**wat\[**</mark><mark style="color:red;">**2**</mark><mark style="color:purple;">**\]=1**</mark>&<mark style="color:purple;">**wat\[**</mark><mark style="color:red;">**3**</mark><mark style="color:purple;">**\]=1**</mark>&<mark style="color:purple;">**wat\_pad=6**</mark>&<mark style="color:purple;">**wat\_url\[**</mark><mark style="color:red;">**1**</mark><mark style="color:purple;">**\]=http://sample.li/Angular.png**</mark>&<mark style="color:purple;">**wat\_url\[**</mark><mark style="color:red;">**2**</mark><mark style="color:purple;">**\]=http://sample.li/React.png**</mark>&<mark style="color:purple;">**wat\_gravity\[**</mark><mark style="color:red;">**1**</mark><mark style="color:purple;">**\]=southeast**</mark>&<mark style="color:purple;">**wat\_gravity\[**</mark><mark style="color:red;">**2**</mark><mark style="color:purple;">**\]=southwest**</mark>&<mark style="color:purple;">**wat\_scale=25**</mark>&<mark style="color:purple;">**wat\_text\[**</mark><mark style="color:red;">**3**</mark><mark style="color:purple;">**\]=TEXT%20WATERMARK**</mark>&<mark style="color:purple;">**wat\_fontsize\[**</mark><mark style="color:red;">**3**</mark><mark style="color:purple;">**\]=20**</mark>&<mark style="color:purple;">**wat\_gravity\[**</mark><mark style="color:red;">**3**</mark><mark style="color:purple;">**\]=north**</mark>&<mark style="color:purple;">**wat\_color\[**</mark><mark style="color:red;">**3**</mark><mark style="color:purple;">**\]=blue**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/paris-salon2.jpg?w=600\&wat\[1]=1\&wat\[2]=1\&wat\[3]=1\&wat_pad=6\&wat_url\[1]=http://sample.li/Angular.png\&wat_url\[2]=http://sample.li/React.png\&wat_gravity\[1]=southeast\&wat_gravity\[2]=southwest\&wat_scale=25\&wat_text\[3]=TEXT%20WATERMARK\&wat_fontsize\[3]=20\&wat_gravity\[3]=north\&wat_color\[3]=blue) |


# Static watermark

Statically defined image overlay

This function will watermark selected images with the same watermark - an image set in the Cloudimage admin console. 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 [Dynamic watermark](/transformations/image-watermarking/dynamic-watermark) section.

## Step 1. Upload your watermark <a href="#od_90635baf" id="od_90635baf"></a>

Log in to your Cloudimage admin console, navigate to *Image Settings / Watermark,* and upload your default watermark using the uploader.

<figure><img src="/files/n4IwadUtekeaxp8qggEq" alt=""><figcaption></figcaption></figure>

## Step 2. Start watermarking!

### Available parameters

| Parameter                                               | Syntax                                                                                                            | Description                                                                                                                    |       |        |                           |                     |                                                   |
| ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ----- | ------ | ------------------------- | ------------------- | ------------------------------------------------- |
| use watermark                                           | <mark style="color:purple;">**wat=1**</mark>                                                                      | **(required)** Activates the watermark function                                                                                |       |        |                           |                     |                                                   |
| watermark gravity                                       | <p><mark style="color:purple;"><strong>wat\_gravity=X</strong></mark><br><code>X=\[north                          | south]\[east                                                                                                                   | west] | center | </code><br><code>absolute | relative</code></p> | Defines the position to "anchor" the watermark to |
| watermark scaling (relative to original watermark size) | <p><mark style="color:purple;"><strong>wat\_scale=X</strong></mark><br><code>X=0..100</code></p>                  | Watermark image scaling defined in in percent of the watermark dimensions                                                      |       |        |                           |                     |                                                   |
| watermark scaling (relative to output image size)       | <p><mark style="color:purple;"><strong>wat\_scale=Xp</strong></mark><br><code>X=0..100p</code></p>                | Watermark image scaling defined in in percent of the output image dimensions                                                   |       |        |                           |                     |                                                   |
| watermark padding                                       | <p><mark style="color:purple;"><strong>wat\_pad=X\[p]\[,Y\[p]]</strong></mark><br><code>X/Y=0..100\[p]</code></p> | Adds padding from the anchoring point in pixels (**X**) or in percent (**Xp**)                                                 |       |        |                           |                     |                                                   |
| watermark positon                                       | <mark style="color:purple;">**wat\_pos=X\[,Y]**</mark>                                                            | <p>sets the position in percent from the resized image; works only with<br>wat\_gravity=absolute and wat\_gravity=relative</p> |       |        |                           |                     |                                                   |
| watermark opacity                                       | <p><mark style="color:purple;"><strong>wat\_opacity=X</strong></mark><br><code>X=0..1</code></p>                  | Defines watermark opacity                                                                                                      |       |        |                           |                     |                                                   |

#### Use watermark <a href="#od_cdeda1ea" id="od_cdeda1ea"></a>

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

#### Watermark gravity <a href="#od_cdeda1ea" id="od_cdeda1ea"></a>

The **wat\_gravity** parameter allows you to define the position of the watermark. You can choose between "fixed" anchor points (**east**, **northeast**, **north**, **northwest**, **west**, **southwest**, **south**, **southeast**, and **center**) or define the exact position (**relative**, **absolute**).

When using "compass" point gravity, the **wat\_pad** parameter defines the offset from the chosen 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.

To set the exact position of the watermark, you can choose **absolute** or **relative** gravity and use the **wat\_pos** parameter to define the position of the top left or center point of the watermark, respectively. The position is always defined in percent of the resized image dimensions.

#### Watermark size

The watermark can be scaled relative to the original watermark image (**wat\_scale=X**) or relative to the output image (**wat\_scale=Xp**).

{% hint style="info" %}
To keep the watermark-to-image proportions for all image resizes, you should use the **wat\_scale=Xp**.
{% endhint %}

Please note that the watermark cannot be larger than the image - if larger, it is always scaled down first to match the image dimensions. Then, the **wat\_scale** parameter values are applied.

### Examples

| Preview                                                             | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/mXj81Cu32RKFEXTEKgy8)                                    | [/samples.scaleflex.com/earth1.jpg?<mark style="color:orange;">**w=400**</mark>&<mark style="color:orange;">**h=240**</mark>&<mark style="color:purple;">**wat=1**</mark>&<mark style="color:purple;">**wat\_scale=30**</mark>&<mark style="color:purple;">**wat\_gravity=northwest**</mark>&<mark style="color:purple;">**wat\_pad=10,8**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/earth1.jpg?w=400\&h=240\&wat=1\&wat_scale=30\&wat_gravity=northwest\&wat_pad=10,8)                                                                                                                                                                                                                                                         |
| ![](/files/HU6zFMgmKtbccbWEyFfI)                                    | [/samples.scaleflex.com/boat.jpg?<mark style="color:orange;">**w=400**</mark>&<mark style="color:purple;">**wat=1**</mark>&<mark style="color:purple;">**wat\_scale=80**</mark>&<mark style="color:purple;">**wat\_gravity=center**</mark>&<mark style="color:purple;">**wat\_opacity=0.2**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/boat.jpg?w=400\&wat=1\&wat_scale=80\&wat_gravity=center\&wat_opacity=0.2)                                                                                                                                                                                                                                                                                                                 |
| ![](/files/of7acv1KDyNigpgIGryO)                                    | [/samples.scaleflex.com/ny\_doc.jpg?<mark style="color:orange;">**w=400**</mark>&<mark style="color:purple;">**wat=1**</mark>&<mark style="color:purple;">**wat\_scale=45**</mark>&<mark style="color:purple;">**wat\_gravity=north**</mark>&<mark style="color:purple;">**wat\_pad=0p,5p**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/ny_doc.jpg?w=400\&wat=1\&wat_scale=45\&wat_gravity=north\&wat_pad=0p,5p)                                                                                                                                                                                                                                                                                                                  |
| ![](/files/bmziRqDiYZngZVQ6q525)                                    | <p>Watermark scaled down to 45% of its original size (1178px), results in 530px watermark:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/tesla.jpg?w=1400&#x26;wat=1&#x26;wat_gravity=southwest&#x26;wat_scale=45&#x26;wat_pad=25">/samples.scaleflex.com/tesla.jpg?<mark style="color:orange;"><strong>w=1400</strong></mark>&<mark style="color:purple;"><strong>wat=1</strong></mark>&<mark style="color:purple;"><strong>wat\_gravity=southwest</strong></mark>&<mark style="color:purple;"><strong>wat\_scale=45</strong></mark>&<mark style="color:purple;"><strong>wat\_pad=15</strong></mark></a></p>                                                                                                                   |
| ![](/files/1j2sw6VGsbc8B3SCcmq3)                                    | <p>Watermark scaled relative to the output image dimensions (618px watermark):<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/tesla.jpg?w=1400&#x26;wat=1&#x26;wat_gravity=southwest&#x26;wat_scale=45p&#x26;wat_pad=25">/samples.scaleflex.com/tesla.jpg?<mark style="color:orange;"><strong>w=1400</strong></mark>&<mark style="color:purple;"><strong>wat=1</strong></mark>&<mark style="color:purple;"><strong>wat\_gravity=southwest</strong></mark>&<mark style="color:purple;"><strong>wat\_scale=45p</strong></mark>&<mark style="color:purple;"><strong>wat\_pad=15</strong></mark></a></p>                                                                                                                             |
| <img src="/files/nSv4E9ASyM5ciCcSB2W0" alt="" data-size="original"> | <p>Absolute positioning - the top left corner of the watermark is position at 7% and 5% of the image width and height, respectively:</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/earth1.jpg?w=400&#x26;h=240&#x26;wat=1&#x26;wat_scale=30&#x26;wat_gravity=absolute&#x26;wat_pos=7,5">/samples.scaleflex.com/earth1.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>h=240</strong></mark>&<mark style="color:purple;"><strong>wat=1</strong></mark>&<mark style="color:purple;"><strong>wat\_scale=30</strong></mark>&<mark style="color:purple;"><strong>wat\_gravity=absolute</strong></mark>&<mark style="color:purple;"><strong>wat\_pos=7,5</strong></mark></a></p> |


# Dynamic watermark

Dynamic (defined in URL) image overlay

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

## Available parameters

| Parameter                                               | Syntax                                                                                                            | Description                                                                                                                    |       |        |                           |                     |                                                   |
| ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ----- | ------ | ------------------------- | ------------------- | ------------------------------------------------- |
| use watermark                                           | <mark style="color:purple;">**wat=1**</mark>                                                                      | **(required)** Activates the watermark function                                                                                |       |        |                           |                     |                                                   |
| watermark URL                                           | <mark style="color:purple;">**wat\_url=X**</mark>                                                                 | **(required)** The URL of the watermark image. Can be URL-encoded                                                              |       |        |                           |                     |                                                   |
| watermark gravity                                       | <p><mark style="color:purple;"><strong>wat\_gravity=X</strong></mark><br><code>X=\[north                          | south]\[east                                                                                                                   | west] | center | </code><br><code>absolute | relative</code></p> | Defines the position to "anchor" the watermark to |
| watermark scaling (relative to original watermark size) | <p><mark style="color:purple;"><strong>wat\_scale=X</strong></mark><br><code>X=0..100</code></p>                  | Watermark image scaling defined in in percent of the watermark dimensions                                                      |       |        |                           |                     |                                                   |
| watermark scaling (relative to output image size)       | <p><mark style="color:purple;"><strong>wat\_scale=Xp</strong></mark><br><code>X=0..100p</code></p>                | Watermark image scaling defined in in percent of the output image dimensions                                                   |       |        |                           |                     |                                                   |
| watermark padding                                       | <p><mark style="color:purple;"><strong>wat\_pad=X\[p]\[,Y\[p]]</strong></mark><br><code>X/Y=0..100\[p]</code></p> | Adds padding from the anchoring point in pixels (**X**) or in percent (**Xp**)                                                 |       |        |                           |                     |                                                   |
| watermark position                                      | <mark style="color:purple;">**wat\_pos=X\[,Y]**</mark>                                                            | <p>sets the position in percent from the resized image; works only with<br>wat\_gravity=absolute and wat\_gravity=relative</p> |       |        |                           |                     |                                                   |
| watermark opacity                                       | <p><mark style="color:purple;"><strong>wat\_opacity=X</strong></mark><br><code>X=0..1</code></p>                  | Defines watermark opacity                                                                                                      |       |        |                           |                     |                                                   |

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/cWTBOtuOAT3BPayZwAZn) | [/samples.scalefelx.com/voyage-louis-vuitton.jpg?<mark style="color:orange;">**w=600**</mark>&<mark style="color:purple;">**wat=1**</mark>&<mark style="color:purple;">**wat\_url=http://sample.li/louis-vuitton-logo-white.png**</mark>&<mark style="color:purple;">**wat\_scale=45**</mark>&<mark style="color:purple;">**wat\_gravity=southeast**</mark>&<mark style="color:purple;">**wat\_pad=15**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/voyage-louis-vuitton.jpg?w=600\&wat=1\&wat_url=http://sample.li/louis-vuitton-logo-white.png\&wat_scale=45\&wat_gravity=southeast\&wat_pad=15) |


# Text watermark

Apply text overlay

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

## Available parameters

| Parameter           | Syntax                                                                                                              | Description                                                                                                                    |       |        |                           |                         |                                                   |
| ------------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ----- | ------ | ------------------------- | ----------------------- | ------------------------------------------------- |
| use watermark       | <mark style="color:purple;">**wat=1**</mark>                                                                        | **(required)** Activates the watermark function                                                                                |       |        |                           |                         |                                                   |
| watermark text      | <mark style="color:purple;">**wat\_text=X**</mark>                                                                  | **(required)** The text to be overlayed. Can be URL-encoded                                                                    |       |        |                           |                         |                                                   |
| watermark gravity   | <p><mark style="color:purple;"><strong>wat\_gravity=X</strong></mark><br><code>X=\[north                            | south]\[east                                                                                                                   | west] | center | </code><br><code>absolute | relative</code><br></p> | Defines the position to "anchor" the watermark to |
| watermark padding   | <p><mark style="color:purple;"><strong>wat\_pad=X\[p]\[,Y\[p]]</strong></mark><br><code>X/Y=0..100\[p]</code></p>   | Adds padding from the anchoring point in pixels (**X**) or in percent (**Xp**)                                                 |       |        |                           |                         |                                                   |
| watermark position  | <mark style="color:purple;">**wat\_pos=X\[,Y]**</mark>                                                              | <p>sets the position in percent from the resized image; works only with<br>wat\_gravity=absolute and wat\_gravity=relative</p> |       |        |                           |                         |                                                   |
| watermark opacity   | <p><mark style="color:purple;"><strong>wat\_opacity=X</strong></mark><br><code>X=0..1</code></p>                    | Defines watermark opacity                                                                                                      |       |        |                           |                         |                                                   |
| watermark font      | <mark style="color:purple;">**wat\_font=X**</mark>                                                                  | Choose the font family for the overlay                                                                                         |       |        |                           |                         |                                                   |
| watermark color     | <mark style="color:purple;">**wat\_color=X**</mark> \| <mark style="color:purple;">**wat\_colour=X**</mark>         | Sets the text color                                                                                                            |       |        |                           |                         |                                                   |
| watermark font size | <mark style="color:purple;">**wat\_fontsize=X**</mark> \| <mark style="color:purple;">**wat\_fontsize=Xmax**</mark> | Sets the font size. If the Xmax syntax is used, the size is reduced if the text cannot fit in the image                        |       |        |                           |                         |                                                   |

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/rlHWbplq18DCrLNUh9FS) | [/samples.scaleflex.com/flat1.jpg?<mark style="color:orange;">**w=550**</mark>&<mark style="color:purple;">**wat=1**</mark>&<mark style="color:purple;">**wat\_gravity=northeast**</mark>&<mark style="color:purple;">**wat\_text=REF00189300B**</mark>&<mark style="color:purple;">**wat\_pad=10**</mark>&<mark style="color:purple;">**wat\_font=Arial-Black**</mark>&<mark style="color:purple;">**wat\_fontsize=18**</mark>&<mark style="color:purple;">**wat\_color=660000**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/flat1.jpg?w=550\&wat=1\&wat_gravity=northeast\&wat_text=REF00189300B\&wat_pad=10\&wat_font=Arial-Black\&wat_fontsize=18\&wat_color=660000)                                                                                                                                                                                                                                                                    |
| ![](/files/oLkbCr89BDppZ9U5u5be) | <p>Text too long for the image:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/flat1.jpg?w=400&#x26;wat=1&#x26;wat_gravity=north&#x26;wat_text=A%20VERY%20LONG%20TEXT%20WHICH%20WON%27T%20FIT&#x26;wat_pad=10&#x26;wat_font=Arial-Black&#x26;wat_fontsize=20&#x26;wat_color=000">/samples.scaleflex.com/flat1.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:purple;"><strong>wat=1</strong></mark>&<mark style="color:purple;"><strong>wat\_gravity=north</strong></mark>&<mark style="color:purple;"><strong>wat\_text=A%20VERY%20LONG%20TEXT%20WHICH%20WON%27T%20FIT</strong></mark>&<mark style="color:purple;"><strong>wat\_pad=10</strong></mark>&<mark style="color:purple;"><strong>wat\_font=Arial-Black</strong></mark>&<mark style="color:purple;"><strong>wat\_fontsize=20</strong></mark>&<mark style="color:purple;"><strong>wat\_color=000</strong></mark></a></p>                        |
| ![](/files/J8DSCs0U0AAw4gfmoBB3) | <p>Text size limit set with wat\_fontsize=20max:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/flat1.jpg?w=400&#x26;wat=1&#x26;wat_gravity=north&#x26;wat_text=A%20VERY%20LONG%20TEXT%20WHICH%20WON%27T%20FIT&#x26;wat_pad=10&#x26;wat_font=Arial-Black&#x26;wat_fontsize=20max&#x26;wat_color=000">/samples.scaleflex.com/flat1.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:purple;"><strong>wat=1</strong></mark>&<mark style="color:purple;"><strong>wat\_gravity=north</strong></mark>&<mark style="color:purple;"><strong>wat\_text=A%20VERY%20LONG%20TEXT%20WHICH%20WON%27T%20FIT</strong></mark>&<mark style="color:purple;"><strong>wat\_pad=10</strong></mark>&<mark style="color:purple;"><strong>wat\_font=Arial-Black</strong></mark>&<mark style="color:purple;"><strong>wat\_fontsize=20max</strong></mark>&<mark style="color:purple;"><strong>wat\_color=000</strong></mark></a></p> |


# Text watermark fonts

Fonts available to use for text watermarks

| Andale-Mono                      | LMMonoProp10-Oblique       | LMSans9-Regular                        |
| -------------------------------- | -------------------------- | -------------------------------------- |
| Arial                            | LMMonoProp10-Regular       | LMSansDemiCond10-Oblique               |
| Arial-Black                      | LMMonoPropLt10-Bold        | LMSansDemiCond10-Regular               |
| Arial-Bold                       | LMMonoPropLt10-BoldOblique | LMSansQuot8-Bold                       |
| Arial-Bold-Italic                | LMMonoPropLt10-Oblique     | LMSansQuot8-BoldOblique                |
| Arial-Italic                     | LMMonoPropLt10-Regular     | LMSansQuot8-Oblique                    |
| Century-Schoolbook-L-Bold        | LMMonoSlant10-Regular      | LMSansQuot8-Regular                    |
| Century-Schoolbook-L-Bold-Italic | LMRoman10-Bold             | Liberation-Mono                        |
| Century-Schoolbook-L-Italic      | LMRoman10-BoldItalic       | Liberation-Mono-Bold                   |
| Century-Schoolbook-L-Roman       | LMRoman10-Italic           | Liberation-Mono-Bold-Italic            |
| Comic-Sans-MS                    | LMRoman10-Regular          | Liberation-Mono-Italic                 |
| Comic-Sans-MS-Bold               | LMRoman12-Bold             | Liberation-Sans                        |
| Courier-New                      | LMRoman12-Italic           | Liberation-Sans-Bold                   |
| Courier-New-Bold                 | LMRoman12-Regular          | Liberation-Sans-Bold-Italic            |
| Courier-New-Bold-Italic          | LMRoman17-Regular          | Liberation-Sans-Italic                 |
| Courier-New-Italic               | LMRoman5-Bold              | Liberation-Sans-Narrow                 |
| DejaVu-Sans                      | LMRoman5-Regular           | Liberation-Sans-Narrow-Bold            |
| DejaVu-Sans-Bold                 | LMRoman6-Bold              | Liberation-Sans-Narrow-Bold-Italic     |
| DejaVu-Sans-Mono                 | LMRoman6-Regular           | Liberation-Sans-Narrow-Italic          |
| DejaVu-Sans-Mono-Bold            | LMRoman7-Bold              | Liberation-Serif                       |
| DejaVu-Serif                     | LMRoman7-Italic            | Liberation-Serif-Bold                  |
| DejaVu-Serif-Bold                | LMRoman7-Regular           | Liberation-Serif-Bold-Italic           |
| FreeMono                         | LMRoman8-Bold              | Liberation-Serif-Italic                |
| FreeMono-Bold                    | LMRoman8-Italic            | Nimbus-Mono-L                          |
| FreeMono-Bold-Oblique            | LMRoman8-Regular           | Nimbus-Mono-L-Bold                     |
| FreeMono-Oblique                 | LMRoman9-Bold              | Nimbus-Mono-L-Bold-Oblique             |
| FreeSans                         | LMRoman9-Italic            | Nimbus-Mono-L-Regular-Oblique          |
| FreeSans-Bold                    | LMRoman9-Regular           | Nimbus-Roman-No9-L                     |
| FreeSans-Bold-Oblique            | LMRomanCaps10-Oblique      | Nimbus-Roman-No9-L-Medium              |
| FreeSans-Oblique                 | LMRomanCaps10-Regular      | Nimbus-Roman-No9-L-Medium-Italic       |
| FreeSerif                        | LMRomanDemi10-Oblique      | Nimbus-Roman-No9-L-Regular-Italic      |
| FreeSerif-Bold                   | LMRomanDemi10-Regular      | Nimbus-Sans-L                          |
| FreeSerif-Bold-Italic            | LMRomanDunh10-Oblique      | Nimbus-Sans-L-Bold                     |
| FreeSerif-Italic                 | LMRomanDunh10-Regular      | Nimbus-Sans-L-Bold-Condensed           |
| Georgia                          | LMRomanSlant10-Bold        | Nimbus-Sans-L-Bold-Condensed-Italic    |
| Georgia-Bold                     | LMRomanSlant10-Regular     | Nimbus-Sans-L-Bold-Italic              |
| Georgia-Bold-Italic              | LMRomanSlant12-Regular     | Nimbus-Sans-L-Regular-Condensed        |
| Georgia-Italic                   | LMRomanSlant17-Regular     | Nimbus-Sans-L-Regular-Condensed-Italic |
| Impact                           | LMRomanSlant8-Regular      | Nimbus-Sans-L-Regular-Italic           |
| LMMono10-Italic                  | LMRomanSlant9-Regular      | Noto-Mono                              |
| LMMono10-Regular                 | LMRomanUnsl10-Regular      | Times-New-Roman                        |
| LMMono12-Regular                 | LMSans10-Bold              | Times-New-Roman-Bold                   |
| LMMono8-Regular                  | LMSans10-BoldOblique       | Times-New-Roman-Bold-Italic            |
| LMMono9-Regular                  | LMSans10-Oblique           | Times-New-Roman-Italic                 |
| LMMonoCaps10-Oblique             | LMSans10-Regular           | Trebuchet-MS                           |
| LMMonoCaps10-Regular             | LMSans12-Oblique           | Trebuchet-MS-Bold                      |
| LMMonoLt10-Bold                  | LMSans12-Regular           | Trebuchet-MS-Bold-Italic               |
| LMMonoLt10-BoldOblique           | LMSans17-Oblique           | Trebuchet-MS-Italic                    |
| LMMonoLt10-Oblique               | LMSans17-Regular           | URW-Bookman-L-Demi-Bold                |
| LMMonoLt10-Regular               | LMSans8-Oblique            | URW-Bookman-L-Demi-Bold-Italic         |
| LMMonoLtCond10-Oblique           | LMSans8-Regular            | URW-Bookman-L-Light                    |
| LMMonoLtCond10-Regular           | LMSans9-Oblique            | URW-Bookman-L-Light-Italic             |


# Image compression

You can change the compression (output format and quality) of your image by using compression filters. You can use the compression filters alongside [Image operations](/transformations/image-operations) and [Image filters](/transformations/image-filters).

{% hint style="info" %}
By default, Cloudimage delivers the images as WebP. If the format is not supported by the client browser, it falls back to JPEG or PNG. If you wish to keep the original format, you can use **force\_format=original**.
{% endhint %}

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

Most of the on-the-fly image transformations can be configured using the [Asset Variation Builder](/transformations/asset-variation-builder), an in-line URL  builder to preview each image transformation instantly.

| ![](/files/nQoY4kigruJi0WFQlJOG) | <p><a data-mention href="/pages/PsrvE3CXr2iV4qBHdohD#webp-format">/pages/PsrvE3CXr2iV4qBHdohD#webp-format</a><br>A modern format suitable for most images. Supports trasnparency and offers both lossy and lossless compression.</p>                            |
| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/veX8PK5P35JK9c13PCZE) | <p><a data-mention href="/pages/PsrvE3CXr2iV4qBHdohD#jpeg-compression">/pages/PsrvE3CXr2iV4qBHdohD#jpeg-compression</a><br>The most popular and widely-supported format. Used by digital cameras. Suitable for photographic images. Lossy compression only.</p> |
| ![](/files/M66rzqD6FmAwP8JGpgoS) | <p><a data-mention href="/pages/PsrvE3CXr2iV4qBHdohD#od_0a3cb543-1">/pages/PsrvE3CXr2iV4qBHdohD#od\_0a3cb543-1</a><br>Image format with transperency support suitable for raster logos, charts, infographs, etc. Lossless compresison only.</p>                 |


# Image formats

Supported output image formats

## JPEG compression

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

### Available parameters

<table data-header-hidden><thead><tr><th width="147.33333333333331"></th><th width="184"></th><th></th></tr></thead><tbody><tr><td>Set format</td><td><mark style="color:green;"><strong>force_format=jpg</strong></mark></td><td>forces using the JPEG image compression</td></tr><tr><td>Quality</td><td><mark style="color:green;"><strong>q=X</strong></mark><br><code>X=0..100</code></td><td>the smaller the value of q, the more your image will be compressed. Be careful - the quality of the image will decrease as well.</td></tr><tr><td>Optipress</td><td><mark style="color:green;"><strong>optipress=X</strong></mark><br><code>X=1..3</code></td><td>chooses the best compression approach maintaining visual quality via the Optipress algorithm</td></tr></tbody></table>

### Examples <a href="#od_0a3cb543" id="od_0a3cb543"></a>

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/4wDdOdMD3WlzxrUKEhej) | <p>q=85, filesize 204 kB:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/woman_dress.jpg?force_format=jpeg&#x26;q=85">/samples.scaleflex.com/woman\_dress.jpg?<mark style="color:green;"><strong>force\_format=jpeg</strong></mark>&<mark style="color:green;"><strong>q=85</strong></mark></a><br><br>q=75, filesize 129 kB:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/woman_dress.jpg?force_format=jpeg&#x26;q=75">/samples.scaleflex.com/woman\_dress.jpg?<mark style="color:green;"><strong>force\_format=jpeg</strong></mark>&<mark style="color:green;"><strong>q=75</strong></mark></a><br><br>q=65, filesize 102 kB:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/woman_dress.jpg?force_format=jpeg&#x26;q=65">/samples.scaleflex.com/woman\_dress.jpg?<mark style="color:green;"><strong>force\_format=jpeg</strong></mark>&<mark style="color:green;"><strong>q=65</strong></mark></a></p> |

## PNG format <a href="#od_0a3cb543" id="od_0a3cb543"></a>

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

### Available parameters

<table data-header-hidden><thead><tr><th width="147.33333333333331"></th><th width="184"></th><th></th></tr></thead><tbody><tr><td>Set format</td><td><mark style="color:green;"><strong>force_format=png</strong></mark></td><td>forces using the PNG image compression</td></tr></tbody></table>

### Lossy PNG compression

While the PNG format offers lossy compression only, Cloudimage 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 Admin Console (*Image Settings/Compression*):

<figure><img src="/files/QXGg8bBpeVuv4V0spL9E" alt=""><figcaption></figcaption></figure>

### Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                               |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/GEQIpXGQKl8xIsnF2vnK) | [/samples.scaleflex.com/Cloudimage-BY-SCALEFLEX.svg?<mark style="color:orange;">**w=400**</mark>&<mark style="color:green;">**force\_format=png**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/Cloudimage-BY-SCALEFLEX.svg?w=400\&force_format=png) |

## WebP format

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

{% hint style="info" %}
By default, automatic WebP transcoding is deactivated. If you choose to activate it, all images will be delivered as WebP. If the client's browser does not support this format, JPEG or PNG (if the image has an alpha channel) is used instead.
{% endhint %}

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

<table data-header-hidden><thead><tr><th width="138.33333333333331"></th><th width="189"></th><th></th></tr></thead><tbody><tr><td>Set format</td><td><mark style="color:green;"><strong>force_format=webp</strong></mark></td><td>forces using the WebP image compression</td></tr><tr><td>Quality</td><td><mark style="color:green;"><strong>q=X</strong></mark><br><code>X=0..100</code></td><td>the smaller the value of q, the more your image will be compressed. Be careful - the quality of the image will decrease as well.</td></tr><tr><td>Lossless</td><td><mark style="color:green;"><strong>lossless=1</strong></mark></td><td>use lossless webp compression</td></tr></tbody></table>

### Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                  |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/isVlysJLYdj1lYPHovoU) | [/samples.scaleflex.com/paris.jpg?<mark style="color:orange;">**w=400**</mark>&<mark style="color:green;">**force\_format=webp**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/paris.jpg?w=400\&force_format=webp)                                                                      |
| ![](/files/PNQX9vXdsfp4v6PgzXXx) | [/samples.scaleflex.com/perfcheck.png?<mark style="color:orange;">**w=400**</mark>&<mark style="color:green;">**force\_format=webp**</mark>&<mark style="color:green;">**lossless=1**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/perfcheck.png?w=400\&force_format=webp\&lossless=1) |

## Deliver images in their original format

By default, Cloudimage delivers the images in the format which will lead to the fastest delivery, while being supported by the requesting browser, as for exemple a WebP.

But sometimes WebP will be heavier than the original image (eg. a low resolution .JPG might be lighter than the same image .WEBP), so cloudimage will ignore the transformation process and provide the original format (when the original format is supported by the browser of course).&#x20;

If you would like to systematically activate this function and always keep the format of the original image, you can use **force\_format=original**


# Optipress

Machine learning based image compression

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 strategies 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 analyzing 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 out of the JPEG compression format.

{% hint style="info" %}
Optipress achieves the best results when re-compressing JPEG files and when the image quality is crucial.
{% endhint %}

## Usage

| <mark style="color:green;">**optipress=1**</mark> | most conservative setting; image quality is prioritised  |
| ------------------------------------------------- | -------------------------------------------------------- |
| <mark style="color:green;">**optipress=2**</mark> | balanced setting                                         |
| <mark style="color:green;">**optipress=3**</mark> | most aggressive setting; optimised for smaller file size |

{% hint style="info" %}
Images created by Optipress fully comply with baseline JPEG specifications and are compatible with all JPEG encoders.
{% endhint %}

## Examples

| Preview                          | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/PN8IMfOSgVlPo91cEB8b) | <p>q=85, 543 kB:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/paris.jpg?force_format=jpeg&#x26;q=85">/samples.scaleflex.com/paris.jpg?<mark style="color:green;"><strong>force\_format=jpeg</strong></mark>&<mark style="color:green;"><strong>q=85</strong></mark></a><br><br>optipress=3, 347 kB:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/paris.jpg?force_format=jpeg&#x26;optipress=3">/samples.scaleflex.com/paris.jpg?<mark style="color:green;"><strong>force\_format=jpeg</strong></mark>&<mark style="color:green;"><strong>optipress=3</strong></mark></a></p> |
| ![](/files/xlyaxzlhKptdxbvfFT4z) | <p>q=85, 246 kB:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/boat.jpg?force_format=jpeg&#x26;q=85">/samples.scaleflex.com/boat.jpg?<mark style="color:green;"><strong>force\_format=jpeg</strong></mark>&<mark style="color:green;"><strong>q=85</strong></mark></a><br><br>optipress=3, 150 kB:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/boat.jpg?force_format=jpeg&#x26;optipress=3">/samples.scaleflex.com/boat.jpg?<mark style="color:green;"><strong>force\_format=jpeg</strong></mark>&<mark style="color:green;"><strong>optipress=3</strong></mark></a></p>     |


# SVG compression

Optimize filesize of SVG images

Cloudimage offers automatic optimization of Scalable Vector Graphics (SVG) files which can reduce the file size by up to 80% without visual appearance deterioration. This is possible since most SVG editors include unnecessary information which can be omitted. Moreover, most shapes in SVG files can be simplified.

<figure><img src="/files/nXHuQggUNDV2UEv7Fs4j" alt=""><figcaption></figcaption></figure>

| Preview                          | Syntax                                                                                                                                                                                        |
| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/6t2V0UFN7hxv00ZcODp6) | <p>Original (1543 bytes):</p><p><a href="https://samples.scaleflex.com/5603.svg"><https://samples.scaleflex.com/5603.svg></a></p>                                                             |
| ![](/files/g2tq01IszqiF46yJVKqG) | <p>Compressed SVG (221 bytes):<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/5603.svg?force_format=svg"><https://samples.scaleflex.com/5603.svg?force_format=svg></a></p> |


# Color management

ICC profiles and sRGB compression

By default, if the origin image has an embedded ICC profile, the image is converted to the sRGB color space, and the ICC profile is removed from the compressed image.

If you prefer to retain the original ICC profile instead of converting the image to sRGB, you can activate the *Keep origin image ICC profile* option in the admin panel (*Image Settings -> Compression*).

When using this option, to avoid embedding very large ICC profiles, you can set the maximum permitted ICC profile size (in kilobytes) along with setting the *Convert ICC profile to sRGB if too large* option.

<figure><img src="/files/ky4DXuvl5gz8EXVspsXN" alt=""><figcaption></figcaption></figure>


# Static content

Static file acceleration

<mark style="color:orange;">**func=proxy**</mark>

Cloudimage offers you the option to deliver any file, including non-processable files - static content like JS or CSS files, via our Content Delivery Network.

By default, all URLs are regarded as images. To deliver a non-image file, you have to use the **func=proxy** option:

[/samples.scaleflex.com/bootstrap.css?<mark style="color:orange;">**func=proxy**</mark>](http://doc.cloudimg.io/https://samples.scaleflex.com/bootstrap.css?func=proxy&)

Cloudimage can automatically use the **proxy** function for all files that don't have an image file extension. This however will require all your images to have proper file extensions. If you prefer this behavior, you can switch it on in your Admin Console (*Image Settings / Compression / Enable static Content acceleration*):

<figure><img src="/files/NgT4914hyB9wrhyHxzmN" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Please note that PDF documents are always converted to images (for more info, please check the [PDF to image](/transformations/static-content/pdf-to-image) section). If you want to deliver PDF images as such, you need to use **func=proxy**: [/samples.scalflex.com/satie2.pdf?<mark style="color:orange;">**func=proxy**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/satie2.pdf?func=proxy&)
{% endhint %}


# PDF to image

Convert a specific page from a PDF document to an image

<mark style="color:orange;">**doc\_page=X**</mark>

When you provide a link to a PDF file, the first page is converted to an image and delivered via CDN. You can use all available [resizing operations](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/image-resizing), [image filters](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/image-filters), [watermarking capabilities](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/watermarking), and [image compression formats](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/image-compression). To convert a specific page of the PDF document, use the **doc\_page=X** option:

| Preview                          | Syntax                                                                                                                                                                                                                                                                         |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](/files/aPEkRmCaDQc7QX1LXZON) | [/samples.scaleflex.com/satie2.pdf?<mark style="color:orange;">**w=800**</mark>&<mark style="color:green;">**force\_format=png**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/satie2.pdf?w=800\&force_format=png)                                             |
| ![](/files/KBzMuXoAIwessfWRTWsB) | <p></p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/satie2.pdf?w=800&#x26;doc_page=2">/samples.scaleflex.com/satie2.pdf?<mark style="color:orange;"><strong>w=800</strong></mark>&<mark style="color:orange;"><strong>doc\_page=2</strong></mark></a></p> |


# JS/CSS optimization

Minification of JS and CSS files

<mark style="color:orange;">**process=minify-css**</mark>\ <mark style="color:orange;">**process=minify-js**</mark>

Cloudimage supports on-the-fly optimization of CSS and JS content to further facilitate faster loading of your website or web application.

## Examples

[/samples.scaleflex.com/bootstrap.css?<mark style="color:orange;">**func=proxy**</mark>&<mark style="color:orange;">**process=minify-css**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/bootstrap.css?func=proxy\&process=minify-css&) (152 kB minified vs. 192 kB original)

[/samples.scaleflex.com/jquery.js?<mark style="color:orange;">**func=proxy**</mark>&<mark style="color:orange;">**process=minify-js**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/jquery.js?func=proxy\&process=minify-js&) (111 kB minified vs. 219 kB original)


# Video operations

Short clip resizing and delivery for websites and web applications

{% hint style="info" %}
Video Optimisation is powered by Visual Operations Credits; full details on consumption rates can be found here: [Visual Operation Credits table](https://docs.cloudimage.io/account-management/usage#visual-operation-credits-table)
{% endhint %}

Cloudimage offers on-the-fly video processing with delivery via CDN using the Cloudimage URL for seamless integration. This feature is suited for short clips for websites and web applications such as hero videos or product videos.&#x20;

{% hint style="warning" %}
Input files are limited to 500 MB, 4k resolution and maximum 60 seconds length. \
For longer videos, only the first minute will be optimized and delivered, resulting in a trimmed video.
{% endhint %}

{% hint style="info" %}
The video files processed in the URLs need the proper extension (eg. *.mp4*, *.webm*).
{% endhint %}

## Available Parameters <a href="#od_4580a7ea" id="od_4580a7ea"></a>

//<mark style="color:blue;">**token**</mark>.cloudimg.io/<mark style="color:red;">**original\_image\_url.mp4**</mark>?<mark style="color:orange;">**w=600**</mark>&<mark style="color:orange;">**format=auto**</mark>

<table><thead><tr><th width="131.33333333333331">Parameter</th><th width="301">Allowed values</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:orange;"><strong>w</strong></mark></td><td><code>>100</code></td><td>Sets the target video width</td></tr><tr><td><mark style="color:orange;"><strong>h</strong></mark></td><td><code>>100</code></td><td>Sets the target video height</td></tr><tr><td><mark style="color:orange;"><strong>func</strong></mark></td><td><code>crop</code> (default) | <code>fit</code> | <code>cropfit</code> | <code>bound</code> | <code>boundmin</code> | <code>cover</code></td><td>Sets the resize function if both <strong>width</strong> and <strong>height</strong> parameters are provided</td></tr><tr><td><mark style="color:orange;"><strong>bg_color</strong></mark></td><td>hex color code / color name</td><td>Background (padding) color<br>(for use with <strong>func=fit</strong>)</td></tr><tr><td><mark style="color:orange;"><strong>bg_img_fit</strong></mark></td><td><code>1</code></td><td>Use blurred version of the video for background / padding<br>(for use with <strong>func=fit</strong>)</td></tr><tr><td><mark style="color:orange;"><strong>format</strong></mark></td><td><code>auto</code> (default) | <code>mp4</code> | <code>webm</code> | <code>h264.mp4</code> | <code>h265.mp4</code> | <code>vp9.webm</code></td><td>Defines the video format</td></tr><tr><td><mark style="color:orange;"><strong>bitrate</strong></mark></td><td><code>10k..20000k</code> | <code>1m..20m</code> (ex.<code>300k, 2m</code>)</td><td>Sets the compression bitrate (in kilobits or megabits per second)</td></tr></tbody></table>

{% hint style="info" %}
The automatic format delivery chooses the most efficient codec and format based on the viewer platform support - h265 (HEVC) mp4, vp9 WebM, or h264 (AVC) mp4.
{% endhint %}

## Examples

| Preview                                                             | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/cpG9qS9ZSrcTA0mnRDjB)                                    | <p>Simple resize:<br><a href="https://cymsecggja.cloudimg.io/https://samples.scaleflex.com/waterfall-hd.mp4?w=400">/samples.scaleflex.com/waterfall-hd.mp4?<mark style="color:orange;"><strong>w=400</strong></mark></a></p>                                                                                                                                                                                                                                                             |
| ![](/files/BZy5l3hGFcqNaYQmRLfx)                                    | <p>Crop function:<br><a href="https://cymsecggja.cloudimg.io/https://samples.scaleflex.com/waterfall-hd.mp4?w=400&#x26;h=300">/samples.scaleflex.com/waterfall-hd.mp4?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>h=300</strong></mark></a></p>                                                                                                                                                                                        |
| ![](/files/uR50yEEUvy1p69komA5h)                                    | <p>Fit function with blurred background:<br><a href="https://cymsecggja.cloudimg.io/https://samples.scaleflex.com/waterfall-hd.mp4?w=400&#x26;h=300&#x26;func=fit&#x26;bg_img_fit=1">/samples.scaleflex.com/waterfall-hd.mp4?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>h=300</strong></mark>&<mark style="color:orange;"><strong>func=fit</strong></mark>&<mark style="color:orange;"><strong>bg\_img\_fit=1</strong></mark></a></p> |
| <img src="/files/VxwRzuB4dbXJDN1PZwzk" alt="" data-size="original"> | <p>Sets the compression bitrate in kilobits or megabits per second.<br><a href="https://cymsecggja.cloudimg.io/https://samples.scaleflex.com/waterfall-hd.mp4?bitrate=1000k"><mark style="color:blue;"><strong>/samples.scaleflex.com/waterfall-hd.mp4?</strong><strong>bitrate=1000k</strong></mark></a></p>                                                                                                                                                                            |


# Video processing

Short clip optimization and transcoding for websites and web applications

{% hint style="info" %}
Video processing is powered by Visual Operations Credits; full details on consumption rates can be found here: [Visual Operation Credits table](https://docs.cloudimage.io/account-management/usage#visual-operation-credits-table)
{% endhint %}

Cloudimage helps you deliver videos faster and lighter by compressing high-resolution files and transcoding them for adaptive streaming. This feature is suited for short clips for websites and web applications such as hero videos or product videos.&#x20;

{% hint style="info" %}
For optimal video delivery, compression and transcoding are enabled by default. Disabling them may slow playback and increase CDN usage.
{% endhint %}

Reduce the weight of your videos automatically upon upload. To set it up, go to *Settings > Video Settings*.&#x20;

* **Automatic compression**: toggle on to enable. Once done, Cloudimage will generate lower-resolution versions (1080p, 720p, 360p) in MP4 format for all videos stored in the Cloudimage Asset Library.&#x20;
* **Target bitrate**: default 400 Kbps

{% hint style="info" %}
The automatic format delivery chooses the most efficient codec and format based on the viewer platform support - h265 (HEVC) mp4, vp9 WebM, or h264 (AVC) mp4.
{% endhint %}

<figure><img src="/files/d5OmYKbX3IZc5VHPb2UJ" alt=""><figcaption></figcaption></figure>

Cloudimage delivers compressed videos, ready to be played in any video player, including HTML5 native. This ensures faster load times, lower bandwidth usage, and smooth playback across devices.

#### Transcoding for adaptive streaming

For seamless viewing on any connection, Cloudimage can transcode your videos into **HLS (HTTP Live Streaming)** format. It automatically generates a manifest file compatible with players like [VideoJS](https://videojs.com/).

* **Automatic transcoding**: toggle on to enable. Once done, Cloudimage will transcode all videos after upload in the Cloudimage Asset Library.&#x20;

<figure><img src="/files/C9PsMTFHuIMQMGllZqP1" alt=""><figcaption></figcaption></figure>

This allows your audience to stream videos at the best quality their network can support, without buffering or manual adjustments.

{% hint style="info" %}
\*Video Compression and transcoding require Visual Operations Credits.&#x20;
{% endhint %}


# Setup

Configure your Cloudimage image acceleration and optimization engine


# Shortening URLs

Making URL more semantic and SEO-friendly


# Origin URL prefix

Using a single origin server for your files

To make your Cloudimage URLs shorter and improve SEO, you can configure an *origin prefix*. For example, if your images are stored at the URL `https://hello.s3.aws.com/`, you can set up prefix URL:

<figure><img src="/files/HxvTrlSVtsOsV8QZhTfB" alt=""><figcaption></figcaption></figure>

When you use:

//<mark style="color:blue;">**token**</mark>.cloudimg.io/<mark style="color:red;">**photos/paris.jpg**</mark>?<mark style="color:orange;">**width=800**</mark>

Cloudimage will search the origin image at the URL:

<mark style="color:red;">**//hello.s3.aws.com/photos/paris.jpg**</mark>

By using the origin prefix, you can avoid exposing the URL of your media to users.

The *Origin URL prefix* will apply to all Cloudimage transformations for your token. Make sure that all your origin images are served from the *Origin URL prefix* domain. Should you have multiple source domains, then please use [aliases](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/domains-urls/aliases) instead.

{% hint style="info" %}
The Origin prefix will interfere with your Cloudimage Library stored assets. In order to use this feature in conjunction with the Cloudimage Library, please contact our support.
{% endhint %}

{% hint style="info" %}
If your origin server needs authentication, please refer to the [Connecting storage bucket](/setup/connecting-storage-bucket) section.
{% endhint %}


# Aliases

Use short pre-defined aliases for different origin servers

Aliases are a very easy way to hide parts of your URLs: They can be useful if your images come from different image repositories (for example: `https://static.mycompany.com/bucket/img`) and you do not wish these repositories to be publicly shown in your code. If you use only one repository for all your images, you can alternatively use [Origin URL prefix](/setup/shortening-urls/origin-url-prefix).

With aliases, you can easily "mount" `src0` to `static.mycompany.com/bucket/img`*.*

## Step 1. Configure aliases <a href="#od_1e14582c" id="od_1e14582c"></a>

Log in to your Cloudimage admin console, navigate to *Image settings*, and scroll down to *Aliases*. Configure up to 10 aliases:

<figure><img src="/files/j2jftsP6OdNMN7jYDV08" alt=""><figcaption></figcaption></figure>

All aliases have to be prefixed *and* suffixed by underscores. Make sure there are *no* leading or trailing slashes. Please note that all aliases have to be unique for your account - aliases set in the alias section cannot be used in the Storage sections (see [Connecting storage bucket](/setup/connecting-storage-bucket)).

Due to the specific way aliases are matched, it is required to use only specific aliases that are *not* contained in part of other alias strings.

Example: If you define an alias `_demo_one_` then you should not have:

* `_demo_`
* `_demo_one_two_`
* `_my_demo_one_`

As those would all be matched according to the first overlap (in this example, `_demo_`). An easy way to overcome this is by both prefixing and suffixing aliases with double underscores.

## Step 2. Construct your  Cloudimage URLs <a href="#od_ea102014" id="od_ea102014"></a>

**Without Alias**

[//**doc**.cloudimg.io/<mark style="color:red;">**http://samples.scaleflex.com/boat.jpg**</mark>?<mark style="color:orange;">**width=800**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/boat.jpg?width=800&)

**With Aliases**

[//**doc**.cloudimg.io/<mark style="color:red;">**\_sample\_/boat.jpg**</mark>?<mark style="color:orange;">**width=800**</mark>](https://doc.cloudimg.io/_sample_/boat.jpg?width=800&)

{% hint style="info" %}
The Aliases will interfere with your Cloudimage Library stored assets. In order to use this feature in conjunction with the Cloudimage Library, please contact our support.
{% endhint %}


# Presets

Save combinations of commonly used image and video transformations in Presets

Cloudimage Presets are reusable templates of assets transformations that you can apply to any image or video for consistent results with a single click.

If you wish to apply the same transformations on many assets, you can define Presets (p) and apply transformations only using the Preset name (X).

<mark style="color:orange;">**p=X**</mark>

All [Image operations](/transformations/image-operations) and [Image filters](/transformations/image-filters) can be included in a Preset, as well as [Image watermarking](/transformations/image-watermarking) and [Image compression](/transformations/image-compression) parameters.

You can find all your Presets in the admin panel, *Settings / Image Settings* / *Presets*.

<figure><img src="/files/HpTi4zYGT9JRMR2Z436H" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/FINgCblZ1c7pS0jAsKSG" alt=""><figcaption></figcaption></figure>

### Defining new Presets&#x20;

#### ...using the Asset Variation Builder

Most of the on-the-fly image transformations can be configured using the [Asset Variation Builder](/transformations/asset-variation-builder), an in-line URL  builder to preview each image transformation instantly.

Imagine you’re preparing images for an e-commerce product page. With the Asset Variation Builder, you can:

1. **Open the image** from the *Preset Settings* page.
2. **Apply transformations**:
   * Crop to a square ratio (1:1) for consistency across product listings
   * Automatically center the crop on the model face
   * Define webp as the best forced format
3. **Preview in real time** how the image will look once delivered.
4. **Save as a Preset** called *“E-commerce Hero”*.

<figure><img src="/files/USAsUoyIhccBOpzSI7FV" alt=""><figcaption></figcaption></figure>

Now, every product photo uploaded to Cloudimage can instantly use this Preset, ensuring all visuals share the same style, quality, and format — without manual edits or developer input.

Presets can be previewed in the Cloudimage Asset Library in *Asset Details / Variations*

#### ...using the documentation <a href="#od_cf858787" id="od_cf858787"></a>

{% hint style="info" %}
Visit the **Transformations** section of our documentation to discover all the available transformations you can use in Presets.
{% endhint %}

| Preset name     | Operations and filters                                                                                                                                                                                                                                                                                                                                                                                                              | Syntax                                                                                                                                                                      | Preview                          |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| gallery\_thumb  | <mark style="color:orange;">**w=250**</mark>&<mark style="color:orange;">**h=250**</mark>&<mark style="color:green;">**gray=1**</mark>                                                                                                                                                                                                                                                                                              | [/samples.scaleflex.com/birds.jpg?<mark style="color:orange;">**p=gallery\_thumb**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/birds.jpg?p=gallery_thumb) | ![](/files/j1gnpMkR61j0JLen8zut) |
| gallery\_medium | <mark style="color:orange;">**w=450**</mark>&<mark style="color:orange;">**h=300**</mark>&<mark style="color:orange;">**radius=10**</mark>&<mark style="color:green;">**force\_format=jpeg**</mark>&<mark style="color:green;">**q=85**</mark>                                                                                                                                                                                      | [/samples.scaleflex.com/birds.jpg?<mark style="color:orange;">**p=gallery\_thumb**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/birds.jpg?p=gallery_thumb) | ![](/files/s9DhMac80HzEnfkoU6xy) |
| gallery\_large  | <mark style="color:orange;">**w=1200**</mark>&<mark style="color:green;">**force\_format=jpeg**</mark>&<mark style="color:green;">**optipress=2**</mark>&<mark style="color:purple;">**wat=1**</mark>&<mark style="color:purple;">**wat\_gravity=northwest**</mark>&<mark style="color:purple;">**wat\_scale=60**</mark>&<mark style="color:purple;">**wat\_pad=20**</mark>&<mark style="color:purple;">**wat\_opacity=0.4**</mark> | [/samples.scaleflex.com/birds.jpg?<mark style="color:orange;">**p=gallery\_large**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/birds.jpg?p=gallery_large) | ![](/files/r4NzeQiRX3lxEdN0BA3X) |

You can use additional operations together with a preset. Here is an example:

| Preset name      | Operations and filters                                                                                                                                                                                                                                                                                                                                                                                                                 | Syntax                                                                                                                                                                                                                                                  | Preview                          |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| red\_ref\_number | <mark style="color:orange;">**w=400**</mark>&<mark style="color:orange;">**h=200**</mark>&<mark style="color:purple;">**wat=1**</mark>&<mark style="color:purple;">**wat\_gravity=northeast**</mark>&<mark style="color:purple;">**wat\_pad=10**</mark>&<mark style="color:purple;">**wat\_font=Arial-Black**</mark>&<mark style="color:purple;">**wat\_fontsize=18**</mark>&<mark style="color:purple;">**wat\_colour=660000**</mark> | [/samples.scaleflex.com/flat1.jpg?<mark style="color:orange;">**p=red\_ref\_number**</mark>&<mark style="color:orange;">**wat\_text=label1**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/flat1.jpg?p=red_ref_number\&wat_text=label1) | ![](/files/iHODnYVddk9DZQ0X26NE) |

{% hint style="info" %}
Please note that an operation defined in any given preset cannot be overridden in the URL. For example, if a preset named **small\_img** contains **w=200**, using /**original\_image\_url**?**p=small\_img**&**w=400** will still yield a 200-pixel-wide image.
{% endhint %}

####


# Rules

Apply transformation rules based on url pattern

Cloudimage lets you define transformation rules based on image path and filename pattern matching.

All [Image operations](/transformations/image-operations) and [Image filters](/transformations/image-filters) can be included in a rule, as well as [Image watermarking](/transformations/image-watermarking) and [Image compression](/transformations/image-compression) parameters.

## Defining rules <a href="#od_f075733a" id="od_f075733a"></a>

You can define your presets in the admin panel, *Image Settings / Rules*.

<figure><img src="/files/Vsa9ukpPsa4252yzfnv3" alt=""><figcaption></figcaption></figure>

## Using Rules <a href="#od_cf858787" id="od_cf858787"></a>

### **Examples**

| Rule pattern | Operations and filters                                                                                                                                                                       |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| -avatar.jpg  | <mark style="color:orange;">**func=crop**</mark>&<mark style="color:orange;">**w=300**</mark>&<mark style="color:orange;">**h=300**</mark>&<mark style="color:orange;">**radius=max**</mark> |

Here is an image using the rules from above:

| Preview                          | Syntax                                                                                                                     |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/lhXDvy0Pii5olaL3mPXY) | [//samples.scaleflex.com/user-78745-avatar.jpg](https://samples.scaleflex.com/user-78745-avatar.jpg)                       |
| ![](/files/zqekVKaOHzVuXmZQVSrr) | [/samples.scaleflex.com/user-78745-avatar.jpg](http://doc.cloudimg.io/https://samples.scaleflex.com/user-78745-avatar.jpg) |

### Extending and overriding rules <a href="#od_4e707f6b" id="od_4e707f6b"></a>

You can add additional operations together with a preset. If an operation or a filter already exists, the value provided in the URL will take precedence over the one in the rule. Here is an example:

| Rule pattern | Operations and filters                                                                                                                                                                       |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| -avatar.jpg  | <mark style="color:orange;">**func=crop**</mark>&<mark style="color:orange;">**w=300**</mark>&<mark style="color:orange;">**h=300**</mark>&<mark style="color:orange;">**radius=max**</mark> |

Adding more parameters or overriding some of the parameters from above:

| Preview                          | Syntax                                                                                                                                                                                 |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/k3sQz8Hw4EPMzOFLQpm3) | [/samples.scaleflex.com/user-78745-avatar.jpg?<mark style="color:green;">**gray=1**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/user-78745-avatar.jpg?gray=1)        |
| ![](/files/18Pnjk1ASzAThYaQQPxJ) | [/samples.scaleflex.com/user-78745-avatar.jpg?<mark style="color:orange;">**radius=50**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/user-78745-avatar.jpg?radius=50) |


# Connecting storage bucket

Using third-party origin file storage

Cloudimage can download your origin images/files from any server or storage bucket over HTTP/HTTPS/FTP. Setting up an external storage is optional and you can use Cloudimage with your origin image URLs as shown in the introduction - [Welcome to Cloudimage](/).

If the images are not publicly available, you have to configure your storage containers and set authentication parameters. If you are filtering access to your image storage by IP addresses, [Contact us](https://admin.cloudimage.io/contact-us/) to get help with configuring [proxy](https://admin.cloudimage.io/project/settings/proxy) for Cloudimage to request origin images over the specified proxy and have all Cloudimage requests coming from the same IP address.&#x20;

You can set up external storage in the *Storage* section in the admin panel by using the *Connect External Storage* button.

<figure><img src="/files/fIGrpwcoprY4Z3BuXgLI" alt=""><figcaption></figcaption></figure>

You can set up an [Amazon S3](/setup/connecting-storage-bucket/amazon-s3), [Google Cloud Storage](/setup/connecting-storage-bucket/google-cloud-storage), [Microsoft Azure Blob](/setup/connecting-storage-bucket/microsoft-azure-blob) or any generic HTTP-based storage (see [Basic authentication HTTP](/setup/connecting-storage-bucket/basic-authentication-http).

<figure><img src="/files/uezRv7Sd1HJ0hu3t71DS" alt=""><figcaption></figcaption></figure>


# Amazon S3

Public or authenticated Amazon S3 bucket

If your images are stored at a bucket named **mysamplebucket** at the **eu-central-1** region and you can access **image.jpg** at the following URL:

//s3.**eu-central-1**.amazonaws.com/**mysamplebucket**/**image.jpg**

You should enter the data as follows:

<figure><img src="/files/LXLawXWWJ0saLKAsOHPU" alt=""><figcaption></figcaption></figure>

All aliases have to be prefixed *and* suffixed by underscores. Please note that all aliases have to be unique for your account - aliases set in the storage sections cannot be used in the [Aliases](/setup/shortening-urls/aliases) section.

Your storage container is now accessible by using the alias entered in the *Cloudimage Alias* field:

//your-token.cloudimg.io/**\_\_amazonaws\_\_**/**image.jpg**

If your S3 bucket requires authentication, you can enter your access key ID and secret access key:

<figure><img src="/files/7fzKMPmkkA5wmvOvM05Q" alt=""><figcaption></figcaption></figure>


# Google Cloud Storage

Public or authenticated GCP storage

If your images are stored in a bucket named **mysamplebucket** and you can access **image.jpg** at the following URL:

//[www.googleapis.com/upload/storage/v1/b/](http://www.googleapis.com/upload/storage/v1/b/)**mysamplebucket**/o/**image.jpg**

You should enter the data as follows:

<figure><img src="/files/dwkma6XEmGYUbikufoJ9" alt=""><figcaption></figcaption></figure>

All aliases have to be prefixed *and* suffixed by underscores. Please note that all aliases have to be unique for your account - aliases set in the storage sections cannot be used in the [alias](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/domains-urls/aliases) section.

Your storage bucket is now accessible by using the alias entered in the *Cloudimage Alias* field:

//your-token.cloudimg.io/**\_\_googlecloud\_\_**/**image.jpg**

If your Google Cloud bucket requires authentication:

* You need to generate an Authentication JSON file using the guide in the Google Cloud documentation - <https://cloud.google.com/docs/authentication/getting-started>
* You will be provided with a JSON file to be saved on your computer
* Copy the contents of this file and paste it into the field that appears after pressing "AUTH KEY" in the storage settings

<figure><img src="/files/0Yf0WyGuoiJMgfkBmvRw" alt=""><figcaption></figcaption></figure>


# Microsoft Azure Blob

Public or authenticated Microsoft Azure Blob

If your images are stored at a blob with account ***my\_blob*** in a container named ***my\_container*** and you can access **image.jpg** at the following URL:

//***my\_blob***.blob.core.windows.net/***my\_container***/**image.jpg**

You should enter the data as follows:

<figure><img src="/files/z54P3mVx8ndGi0NpiyT9" alt=""><figcaption></figcaption></figure>

All aliases have to be prefixed *and* suffixed by underscores. Please note that all aliases have to be unique for your account - aliases set in the storage sections cannot be used in the [alias](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/domains-urls/aliases) section.

Your storage container is now accessible by using the alias enter in the *Cloudimage Alias* field:

//your-token.cloudimg.io/**\_\_my-public-blob\_\_**/**image.jpg**

If your Azure Blob container requires authentication, you have to enter your SAS token (found in your Azure panel) in the respective field:

Please keep in mind that the SAS token has an expiration date and you have to generate a new one and update it before it expires. Otherwise, our servers will not be able to fetch your media from the storage.

<figure><img src="/files/xVnEolLuFzevG7TTkh73" alt=""><figcaption></figcaption></figure>


# Basic authentication HTTP

Public or authenticated generic HTTP storage

If your images are stored at URL `https://mystorage.example.com` and you can access **image.jpg** at the following URL:

//**mystorage.example.com**/**image.jpg**

You should enter the data as follows:

<figure><img src="/files/prTVMH9qApfImNihxMn9" alt=""><figcaption></figcaption></figure>

All aliases have to be prefixed *and* suffixed by underscores. Please note that all aliases have to be unique for your account - aliases set in the storage sections cannot be used in the [alias](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/domains-urls/aliases) section.

Your storage is now accessible by using the alias entered in the *Cloudimage Alias* field:

//your-token.cloudimg.io/**\_\_ownstorage\_\_**/**image.jpg**

If your storage requires authentication, you can enter your username and password:

<figure><img src="/files/hG1voFXkmTIwFnDkoTVk" alt=""><figcaption></figcaption></figure>


# Security

Securing your token, account and origin server


# Token security

Protect your Cloudimage token from abuse

| [Domain whitelisting](/setup/security/token-security/domain-whitelisting) | Specify which domains your Cloudimage token can download original images from. You can limit the list to a few domains that you own to make sure no one uses your token on his or her URLs. |
| ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [URL signature](/setup/security/token-security/url-signature)             | Sign your Cloudimage URLs with an SHA hash to prevent someone else from using your Cloudimage token.                                                                                        |
| [URL sealing](/setup/security/token-security/url-sealing)                 | With this feature, you can sign only part of the url which will allow you to add more parameters to the URL while protecting the sealed ones.                                               |


# Domain whitelisting

Allow fetching images only from a pre-defined list of origins

As a reminder, a Cloudimage URL looks like this:

//<mark style="color:blue;">**token**</mark>.cloudimg.io/<mark style="color:red;">**original\_image\_url**</mark>?<mark style="color:orange;">**operations**</mark>&<mark style="color:green;">**filters**</mark>

By default, images from any origin domains can be resized by Cloudimage. The storage and traffic used by these images will count toward your plan’s allowance. In the Cloudimage admin console, you can restrict the list of origin server URLs your token can transform images from.

If you are using [Aliases](/setup/shortening-urls/aliases) and you have Domain whitelisting enabled, you have to include all aliases in the whitelisted domain list.

## Step 1. Configure domain whitelist <a href="#od_f59a4885" id="od_f59a4885"></a>

Log in to your [Cloudimage admin console](https://admin.cloudimage.io/project/settings/domains) and navigate to *Image settings* / tab *Domains*. Scroll down to *Whitelisted domains.* Then configure your original image domains / S3 buckets.

<figure><img src="/files/FMG27l5ACE0zRhKKHyv8" alt=""><figcaption></figcaption></figure>

Please note that when you whitelist eg. `sample.li`, this will also whitelist all its subdomains `sub1.sample.li`, `www.sample.li`, along with any recursive (sub...)sub.domain from the listed one.

{% hint style="warning" %}
When adding a domain to the whitelist, do not include `http://` or `https://`.
{% endhint %}

### **Whitelist and static content**

By default, Cloudimage does not enforce the domain whitelist when delivering[Static content](/transformations/static-content). If you would like to restrict delivering static content to whitelisted domains only, you can enable the *Honor whitelist when delivering static content* option in the Admin console.

## Step 2. Try it out! <a href="#od_126d9ac7" id="od_126d9ac7"></a>

This Cloudimage URL works (the sample.li domain is whitelisted):

[//**doc**.cloudimg.io/<mark style="color:red;">**http://samples.scaleflex.com/boat.jpg**</mark>?<mark style="color:orange;">**width=500**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/boat.jpg?width=500&)

If the domain is not in your whitelisted domains list, the request will fail. In this example, `pbs.twimg.com` is not whitelisted, so the request is blocked.

[//**doc**.cloudimg.io/<mark style="color:red;">**pbs.twimg.com/profile\_images/839721704163155970/LI\_TRk1z\_400x400.jpg**</mark>?<mark style="color:orange;">**w=500**</mark>](https://doc.cloudimg.io/pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z_400x400.jpg?w=500&)


# URL signature

Protect your Cloudimage URLs from tampering

To prevent URL tampering and protect your token, every Cloudimage URL can be secured with an SHA-1 HMAC signature.

Please be aware that when the URL signature is activated for your token, all Cloudimage URLs which are not signed properly will cease to work.

The signature is calculated as follows:

```
Signature = sha1('Salt' + 'URI')
where URI = original_image_url?operations&filters
```

The syntax to process an image is:

//<mark style="color:blue;">**token**</mark>.cloudimg.io/original\_image\_url?<mark style="color:orange;">**operations**</mark>&<mark style="color:green;">**filters**</mark>**&**<mark style="color:orange;">**ci\_sign=Signature**</mark>

Because the **Salt** is a shared secret between you and Cloudimage, only you will be able to calculate the signature of your images.

## Activation <a href="#od_316500b3" id="od_316500b3"></a>

Before activating the URL signature, please make sure that all Cloudimage URLs contain the proper signature.

To activate this feature, you need to navigate to *Image Settings / Security* and activate *URL security* toggle.

<figure><img src="/files/0SslkHFvcMYFzkdu53kR" alt=""><figcaption></figcaption></figure>

In the *Add Security* modal, you need to choose *URL Signature* and place a string you will be using as salt when generating the URL signature.


# URL sealing

Secure part of your Cloudimage URLs against tampering

To prevent your customer from removing certain parameters, you can seal them. For example, if you don't want your users to get the image without a watermark or a certain filter, you can use the URL sealing feature. This system is similar to the [URL signature](/setup/security/token-security/url-signature) feature but it is only sealing the `ci_eqs` parameters and allows you to add more filters and operations to the URL without re-generating the signature. This method is compatible with the [Responsive images JS plugin](/implementation/responsive-images-js-plugin).

Please be aware that when URL sealing is activated for your token, all Cloudimage URLs that are not signed properly will cease to work.

The signature is calculated as follows:

**Signature** = sha1('**URI'** + '**ci\_eqs**' + '**Salt**') where **URI** = original\_image\_url and **ci\_eqs** = value of the content of `ci_eqs` query string

The syntax to process an image is:

//<mark style="color:blue;">**token**</mark>.cloudimg.io/original\_image\_url?<mark style="color:orange;">**ci\_eqs=Sealed\_parameters**</mark>&<mark style="color:orange;">**ci\_seal=Signature**</mark>

The **Salt** string is a shared secret between you and Cloudimage and only *you* will be able to calculate the signature of your images.

## Activation <a href="#od_316500b3" id="od_316500b3"></a>

Before activating URL sealing, please make sure that all Cloudimage URLs contain the proper signatures (see the [#od\_82705325](#od_82705325 "mention") section below).

To activate this feature, you need to navigate to *Image Settings / Security* and activate the *URL security* toggle.

<figure><img src="/files/h7CgxmNcyDVEPEoNeNCs" alt=""><figcaption></figcaption></figure>

In the *Add Security* modal, you need to choose *URL Sealing* and place a string you will be using as salt when generating the sealed parameter signature.

## Usage <a href="#od_82705325" id="od_82705325"></a>

### Step 1. Encode the query string <a href="#od_08a3a403" id="od_08a3a403"></a>

To watermark an image at the URL `samples.scaleflex.com/birds.jpg` with query string `wat=1&wat_url=http://samples.scaleflex.com/louis-vuitton-logo-white.png&wat_scale=45&wat_gravity=southwest&wat_pad=15`, you need to first *base64-encode* the query string:

```js
base64('wat=1&wat_url=http://samples.scaleflex.com/louis-vuitton-logo-white.png&wat_scale=45&wat_gravity=southwest&wat_pad=15')
```

becomes

`d2F0PTEmd2F0X3VybD1odHRwOi8vc2FtcGxlLmxpL2xvdWlzLXZ1aXR0b24tbG9nby13aGl0ZS5wbmcmd2F0X3NjYWxlPTQ1JndhdF9ncmF2aXR5PXNvdXRod2VzdCZ3YXRfcGFkPTE1`

### Step 2. Create the signature <a href="#od_4abe2b61" id="od_4abe2b61"></a>

The signature has to be created by sha1-hashing the string '**URI'** + '**ci\_eqs**' + '**Salt**':

```js
sha1('samples.scaleflex.com/birds.jpg' + 'd2F0PTEmd2F0X3VybD1odHRwOi8vc2FtcGxlLmxpL2xvdWlzLXZ1aXR0b24tbG9nby13aGl0ZS5wbmcmd2F0X3NjYWxlPTQ1JndhdF9ncmF2aXR5PXNvdXRod2VzdCZ3YXRfcGFkPTE1' + 'salt')
```

The final signature is:

`a355cce069fbfb18a4c39113067bf626ead2ebab`

### Step 3. Construct the URL <a href="#od_9a1c6acb" id="od_9a1c6acb"></a>

//<mark style="color:blue;">**token**</mark>.cloudimg.io/original\_image\_url?<mark style="color:orange;">**ci\_eqs=Sealed\_parameters**</mark>&<mark style="color:orange;">**ci\_seal=Signature**</mark>

The final URL becomes:

[https://**demoseal**.cloudimg.io/samples.scaleflex.com/birds.jpg?<mark style="color:orange;">**ci\_eqs=d2F0PTEmd2F0X3VybD1odHRwOi8vc2FtcGxlLmxpL2xvdWlzLXZ1aXR0b24tbG9nby13aGl0ZS5wbmcmd2F0X3NjYWxlPTQ1JndhdF9ncmF2aXR5PXNvdXRod2VzdCZ3YXRfcGFkPTE1**</mark>&<mark style="color:orange;">**ci\_seal=a355cce069fbfb18a4**</mark>](https://demoseal.cloudimg.io/https://samples.scaleflex.com/birds.jpg?ci_eqs=d2F0PTEmd2F0X3VybD1odHRwOi8vc2FtcGxlLmxpL2xvdWlzLXZ1aXR0b24tbG9nby13aGl0ZS5wbmcmd2F0X3NjYWxlPTQ1JndhdF9ncmF2aXR5PXNvdXRod2VzdCZ3YXRfcGFkPTE1\&ci_seal=a355cce069fbfb18a4&)

### Step 4. Use and extend the request <a href="#od_5a91de26" id="od_5a91de26"></a>

You can use the URL as is or append more parameters to the query string:

[https://**demoseal**.cloudimg.io/samples.scaleflex.com/birds.jpg?<mark style="color:orange;">**ci\_eqs=d2F0PTEmd2F0X3VybD1odHRwOi8vc2FtcGxlLmxpL2xvdWlzLXZ1aXR0b24tbG9nby13aGl0ZS5wbmcmd2F0X3NjYWxlPTQ1JndhdF9ncmF2aXR5PXNvdXRod2VzdCZ3YXRfcGFkPTE1**</mark>&<mark style="color:orange;">**ci\_seal=a355cce069fbfb18a4**</mark>&<mark style="color:orange;">**w=700**</mark>&<mark style="color:orange;">**h=700**</mark>](https://demoseal.cloudimg.io/https://samples.scaleflex.com/birds.jpg?ci_eqs=d2F0PTEmd2F0X3VybD1odHRwOi8vc2FtcGxlLmxpL2xvdWlzLXZ1aXR0b24tbG9nby13aGl0ZS5wbmcmd2F0X3NjYWxlPTQ1JndhdF9ncmF2aXR5PXNvdXRod2VzdCZ3YXRfcGFkPTE1\&ci_seal=a355cce069fbfb18a4\&w=700\&h=700&)

Any parameters that are included in the sealed portion cannot be overwritten in the URL. For example, if a watermark is activated with **wat=1** and sealed, appending **wat=0** in the URL will not remove the watermark:

[https://**demoseal**.cloudimg.io/samples.scaleflex.com/birds.jpg?<mark style="color:orange;">**ci\_eqs=d2F0PTEmd2F0X3VybD1odHRwOi8vc2FtcGxlLmxpL2xvdWlzLXZ1aXR0b24tbG9nby13aGl0ZS5wbmcmd2F0X3NjYWxlPTQ1JndhdF9ncmF2aXR5PXNvdXRod2VzdCZ3YXRfcGFkPTE1**</mark>&<mark style="color:orange;">**ci\_seal=a355cce069fbfb18a4**</mark>&<mark style="color:purple;">**wat=0**</mark>](https://demoseal.cloudimg.io/https://samples.scaleflex.com/birds.jpg?ci_eqs=d2F0PTEmd2F0X3VybD1odHRwOi8vc2FtcGxlLmxpL2xvdWlzLXZ1aXR0b24tbG9nby13aGl0ZS5wbmcmd2F0X3NjYWxlPTQ1JndhdF9ncmF2aXR5PXNvdXRod2VzdCZ3YXRfcGFkPTE1\&ci_seal=a355cce069fbfb18a4\&wat=0&)


# Account security

Multi-factor authentication to the Cloudimage Console

## Single Sign-On <a href="#od_1ff6972d" id="od_1ff6972d"></a>

The access to the Cloudimage administration Console supports SSO over SAMLv2. Cloudimage officially supports several Identity Providers (IDPs) and can integrate with any IDP that speaks SAML 2.0. You can integrate Cloudimage as a Service Provider (SP) with your IDP to allow your Cloudimage administrators to log in to the Console with a federated account and enjoy SSO.

{% hint style="info" %}
Please note that SSO is only available for accounts with company email domains on ENTERPRISE [plans](https://www.cloudimage.io/en/pricing). Gmail.com, yahoo.com, aol.com, etc. are not supported for SSO.
{% endhint %}

## Configure <a href="#od_c25d7d6f" id="od_c25d7d6f"></a>

### Step 1. Collect the Cloudimage Service Provider details <a href="#od_c25d7d6f" id="od_c25d7d6f"></a>

1. Copy the **ACS URL / Consumer URL** and **Entity ID / Audience ID** or download the Service Provider XML from the link provided. These values are needed for configuring Cloudimage as a Service Provider or Relying Party Trust (ADFS) in your IDP.
2. Within your Identity Provider, add a Service Provider (generic term, Ping Federate), Application (OKTA), or Relying Party Trust (ADFS) using the information gathered in the previous step.
3. Make sure the IDP is returning the user's email address as *NameID* in the SAML assertion with the format *emailAddress* (see note below for ADFS).
4. Go back to the Cloudimage Console to finish the configuration.

#### ADFS as IDP <a href="#od_eeea5b02" id="od_eeea5b02"></a>

If you are using ADFS as IDP, you will need to configure the following two Issuance Transform Rules for the Relying Party Trust:

<div><figure><img src="/files/gqYQWkmFMv7beHJMAtrj" alt=""><figcaption></figcaption></figure> <figure><img src="/files/SIartdkb4NvQTeBpJ4Uq" alt=""><figcaption></figcaption></figure> <figure><img src="/files/bLpPbIWnMshc2eCxu950" alt=""><figcaption></figcaption></figure></div>

### Step 2. Configure the Identity Provider details in the Cloudimage Console <a href="#od_1494cab5" id="od_1494cab5"></a>

Fill in the Identity Provider section:

* **Entity ID**: the entity ID from your IDP as per the IDP's metadata.xml.
* **SSO Target URL**: IDP single sign-on URL.
* **SAML Single Logout Service URL**: IDP single sign-out URL (usually the same as SSO Target URL).
* **Signing Certificate**: IDP's signing certificate is log inas per the IDP's metadata.xml. This certificate is used by Cloudimage to verify the SAML assertion's signature returned by the IDP.

### Step 3. Test Single Sign-On <a href="#od_f7b73d96" id="od_f7b73d96"></a>

Using your Cloudimage admin account's email from your company, try to [log in](https://www.cloudimage.io/en/login).

<figure><img src="/files/vxg4mOpxlRGFHUeFdm8n" alt=""><figcaption></figcaption></figure>

Enjoy SSO and additional security!


# Origin security

Protect your origin with custom request headers

### Identification headers

Cloudimage allows you to set up one or many ***global headers*** which are sent to the origin on every request.

You need to enter the `name` and `value` of the header(s) to send. All these headers will be automatically sent for each request made with your token which allows you to set up your origin to accept only requests containing these headers.

{% hint style="info" %}
In the value field, you could use the following variables:

* `{{header.host}}` will allow you to forward the `HOST` header to your origin;
* `{{req.ip}}` will allow you to forward the client's IP address.

If you have been a Cloudimage customer before 01/01/2023, please contact us to enable this feature.
{% endhint %}

<figure><img src="/files/i2ZPwe44ExQVlJo1mOI9" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Please be aware that this feature needs up to 5 minutes to be propagated to all our servers.
{% endhint %}


# Implementation

Configure your website or web application to use Cloudimage


# URL API implementation

Direct implementation using the Cloudimage URL API

If your Web application does not use a CMS (Wordpress, Drupal, ...), e-commerce platform (Prestashop, Magento, ...), or development framework (React, Angular, Django, ...), then you need to adapt your image URLs in your HTML `<img>` tags.

## Basic usage

For example, if your origin image is available at the following URL::

<mark style="color:red;">**<https://samples.scaleflex.com/flat.jpg>**</mark>

Then you need to adapt it to be:

//<mark style="color:blue;">**token**</mark>.cloudimg.io/<mark style="color:red;">**<https://samples.scaleflex.com/flat.jpg>**</mark>**?**<mark style="color:orange;">**operations**</mark>**&**<mark style="color:green;">**filters**</mark>**&**<mark style="color:purple;">**watermarks**</mark>

Where:

* **token**: your Cloudimage token you obtain after registering for a Cloudimage account;
* **operations**: the resizing operation(s) as listed under [Image operations](/transformations/image-operations);
* **filters**: the filter transformation(s) as listed under [Image filters](/transformations/image-filters);
* **watermarks**: any image or text overlay(s) as listed under [Image watermarking](/transformations/image-watermarking).

In your code, this URL can be used as a normal image in your `<img>` elements:

{% code overflow="wrap" %}

```html
<img src="https://token.cloudimg.io/https://samples.scaleflex.com/flat.jpg?operations&filters&watermarks" />
```

{% endcode %}

If you have implemented responsive design with the HTML `<picture>` and `<srcset>` elements, then you need to change every `<srcset>`:

```html
<picture>
  <source media="(min-width: 650px)" srcset="/samples.scaleflex.com/flat.jpg">
  <source media="(min-width: 465px)" srcset="/samples.scaleflex.com/flat.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
```

Becomes:

```html
<picture>
  <source media="(min-width: 650px)" srcset="token.cloudimg.io/samples.scaleflex.com/flat.jpg?operations1&filters">
  <source media="(min-width: 465px)" srcset="token.cloudimg.io/samples.scaleflex..com/flat.jpg?operations2&filters">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
```

You need to define the image size with `operations1` and `operations2` to deliver the lightest possible image. If you want Cloudimage to do the job for you and define the optimal size based on your container width, then look at our [JS lib](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/dev-implementation/javascript-lib), [React, ](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/dev-implementation/react-lib)and [Angular ](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/dev-implementation/angular-lib)plugins.

## Url-encoding resource URL <a href="#od_3b44635d" id="od_3b44635d"></a>

<mark style="color:orange;">**ci\_url\_encoded=1**</mark>

If a resource is versioned or dynamically generated using query strings, or the filename contains unsupported or reserved characters, you will need to url-encode the URL of the resource. In this case, you need to add the **ci\_url\_encoded=1** parameter to the Cloudimage URL.

For example, in the origin below, the **?w=22** query string is part of the static resource (origin image):

[//<mark style="color:red;">samples.scaleflex.com/gen.php?</mark><mark style="color:red;">**w=22**</mark>](https://samples.scaleflex.com/gen.php?w=22&)

To construct a Cloudimage URL from it, the resource is URL-encoded and the width operation can be now used correctly:

[//**doc**.cloudimg.io/<mark style="color:red;">**samples.scaleflex.com%2Fgen.php%3Fw%3D22**</mark>?<mark style="color:orange;">**w=400**</mark>&<mark style="color:orange;">**ci\_url\_encoded=1**</mark>](http://doc.cloudimg.io/https%3A%2F%2Fsamples.scaleflex.com%2Fgen.php%3Fw%3D22?w=400\&ci_url_encoded=1&)

### **Spaces in the filename**

When using **ci\_url\_encoded=1** to encode URLs with space in the filename, please consider the example: Image: `https://freeaccessdemo.blob.core.windows.net/myfiles/Image with space in the name.jpg`

Need to be encoded according to RFC-3986 (percent-encoding):

```none
nonehttps://freeaccessdemo.blob.core.windows.net/myfiles/Image%20with%20space%20in%20the%20name.jpg
```

And if for example, we have extra values added to the origin resource like v=13, the final Cloudimage URL will look like this:

```none
nonehttp://doc.cloudimg.io/https%3A%2F%2Ffreeaccessdemo.blob.core.windows.net%2Fmyfiles%2FImage%2520with%2520space%2520in%2520the%2520name.jpg%3Fv%3D13?w=600&ci_url_encoded=1
```

The following approach can be used in this case:

```javascript
encodeURIComponent( path ).replace( /%20/g, '%2520' )
```


# Responsive images JS plugin

Javascript implementation for pixel perfect design

Responsive images libraries adapt the image size according to the screen or container size of the end user, thereby allowing websites and mobile apps to load faster across various screen sizes.

For example, on an iPhone, Cloudimage will deliver smaller images than it would on a 24" desktop computer screen, thus accelerating the page loading time.

Managing a responsive site manually can be tedious, especially for a site with more than a handful of images needing to be displayed on the ever-growing number of different devices & various screen-sizes. Therefore, the Cloudimage team has developed a JS plugin to automate everything for you. Check it out [here](https://github.com/scaleflex/js-cloudimage-responsive) as well as a [demo](https://scaleflex.github.io/js-cloudimage-responsive/).

{% hint style="info" %}
For a good intro to Responsive Images, read through our blog article on [Responsive Images](https://medium.com/cloudimage/responsive-images-in-2019-now-easier-than-ever-b76e5a43c074).
{% endhint %}

The Cloudimage JS lib will adapt all your URLs automatically and offers built-in Responsive Design, Lazyloading, and many more features to make your website responsive and fast as well as add nice loading effects to your images

<table data-header-hidden><thead><tr><th width="374"></th><th></th></tr></thead><tbody><tr><td><div><figure><img src="/files/3UvYWvAMc5wR9w2t5ViF" alt="" width="135"><figcaption></figcaption></figure></div></td><td><p>Vanilla JS:<br><a href="https://scaleflex.github.io/js-cloudimage-responsive/">demo page</a></p><p><a href="https://github.com/scaleflex/js-cloudimage-responsive">github</a></p><p><a href="https://codesandbox.io/s/6jkovjvkxz">code sandbox</a></p></td></tr><tr><td><div><figure><img src="/files/pmvF7HQFsqzRYGpZt6yg" alt=""><figcaption></figcaption></figure></div></td><td><p>React:<br><a href="https://scaleflex.github.io/react-cloudimage-responsive/">demo page</a></p><p><a href="https://github.com/scaleflex/react-cloudimage-responsive">github</a></p><p><a href="https://codesandbox.io/s/1840nl707j">code sandbox</a></p></td></tr><tr><td><div><figure><img src="/files/dKveHlBPQcxwMV1Z7lc4" alt="" width="188"><figcaption></figcaption></figure></div><p></p></td><td><p>React Native:</p><p><a href="https://github.com/scaleflex/react-native-cloudimage-responsive">github</a></p><p>code sandbox (tba)</p></td></tr><tr><td><div><figure><img src="/files/LhRYB3s2sqclKjEp6TlK" alt="" width="135"><figcaption></figcaption></figure></div></td><td><p>Angular:<br><a href="https://scaleflex.github.io/ng-cloudimage-responsive/">demo page</a></p><p><a href="https://github.com/scaleflex/ng-cloudimage-responsive">github</a></p><p><a href="https://codesandbox.io/s/qr6zzr8rj?fontsize=14&#x26;module=%2Fsrc%2Fapp%2Fapp.module.ts&#x26;">code sandbox</a></p></td></tr><tr><td><div><figure><img src="/files/ri0xO6wSUk6ZdpkYwyYq" alt="" width="135"><figcaption></figcaption></figure></div></td><td>Vue.js:<br><a href="https://scaleflex.github.io/vue-cloudimage-responsive/">demo page</a><br><a href="https://github.com/scaleflex/vue-cloudimage-responsive">github</a><br><a href="https://codesandbox.io/s/vue-cloudimage-responsive-example-bqg7g">code sandbox</a></td></tr></tbody></table>

#### &#x20;<a href="#od_20318ce5" id="od_20318ce5"></a>


# CMS plugins

Plugin implementation for content management systems


# Adobe Commerce (Magento)

Magento plugin

Cloudimage can be implemented to accelerate Magento shops in 2 modes:

| Modes                                                                                  | Implementation                                                                                                                                                                                                                                                  | Benefits                                                      |
| -------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| [Basic implementation](/implementation/cms-plugins/magento/basic-implementation)       | Simple configuration change in Magento settings                                                                                                                                                                                                                 | <p>JPEG optimization<br>WebP delivery<br>CDN acceleration</p> |
| [Advanced implementation](/implementation/cms-plugins/magento/advanced-implementation) | Requires the installation and configuration of the [Cloudimage Content Transformation & Acceleration Magento](https://marketplace.magento.com/scaleflex-module-cloudimage.html) plugin or [Github](https://github.com/scaleflex/magento-cloudimage-responsive). | <p><strong>Basic</strong> +<br>Responsive images</p>          |

<figure><img src="/files/6zMAb1RMxCN7msg5MYCp" alt=""><figcaption></figcaption></figure>


# Basic implementation

Magento simple implementation

This simple and fast implementation in Magento 2 enables JPEG optimization, WebP compression and CDN delivery of your images.

## Prerequisites <a href="#od_d63bc98a" id="od_d63bc98a"></a>

To use the plugin, you need to have a Cloudimage account. You can create one on the [Cloudimage registration page](https://www.cloudimage.io/registration).\ <br>

<figure><img src="/files/CDirQ1yZt5sITHn7hAKf" alt=""><figcaption></figcaption></figure>

## Step 1. Login to Magento <a href="#od_6b1db122" id="od_6b1db122"></a>

First, you need to log in to your Magento 2 website admin

<figure><img src="/files/yltjkya80Qg4Hhlo4wia" alt=""><figcaption></figcaption></figure>

## Step 2. Configure the plugin <a href="#od_410d6e5f" id="od_410d6e5f"></a>

On the *Admin* sidebar, go to *Stores* > *Settings* > *Configuration*.

<figure><img src="/files/k8z9csPYJ9ZxNhSAJ7dk" alt=""><figcaption></figcaption></figure>

Navigate to the settings page - from the left panel, in the *General* group, choose *Web*.

<figure><img src="/files/zixu2PUmcleEZm8OkQQL" alt=""><figcaption></figcaption></figure>

Then, you need to set up the Base URLs.

It is important to set this prefix in both - *Base URL for User Media Files* and *Secure Base URL for User Media Files*.

In Base URL for *User Media Files* in *Base URLs* and *Base URLs (Secure)* add the following value, replacing your token: `https://<token>.cloudimg.io/{{secure_base_url}}pub/media/`

<figure><img src="/files/UltldwcZamYrM8dIojTM" alt=""><figcaption></figcaption></figure>

For example, if your website is `https://sfxmagento.site`, and your token is `demo`, the final URL address should be: `https://demo.cloudimg.io/https://sfxmagento.site/pub/media/`

You can also use your own domain instead of {token}.cloudmg.io via CNAME records. Please [contact us](https://www.cloudimage.io/contact-us) and an engineer will help setting it up.

When complete, do not forget to click *Save Config*.

## Step 3. Flush the cache of Magento <a href="#od_2dab3d6f" id="od_2dab3d6f"></a>

On the Admin sidebar, go to System > Tools > Cache Management and Flush the cache of Magento.

<figure><img src="/files/cGDxC3FkHqPxTz6DOwi3" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Wcl4vgLvG4SUqWVqYcmR" alt=""><figcaption></figcaption></figure>

Magento’s cache management system is an easy way to improve the performance of your site. Whenever a cache needs to be refreshed, a notice appears at the top of the workspace to guide you through the process. Find additional information and tips in this [Magento tutorial for cache management](https://docs.magento.com/m2/ce/user_guide/system/cache-management.html).

## Verify your HTML page source <a href="#od_5e70eebd" id="od_5e70eebd"></a>

Please ensure that you are properly delivering static content via the CDN.

<figure><img src="/files/CvvsfME2FDqYAR0VazTJ" alt=""><figcaption></figcaption></figure>

You can now modify your template to resize your images with us.


# Advanced implementation

Cloudimage Content Transformation & Acceleration in Magento

## Prerequisites <a href="#od_d63bc98a" id="od_d63bc98a"></a>

To use the plugin, you need to have a Cloudimage account. You can create one on the [Cloudimage registration page](https://www.cloudimage.io/registration).\ <br>

<figure><img src="/files/anm2S9dkkB28qN9bDofj" alt=""><figcaption></figcaption></figure>

## Step 1. Install the Cloudimage module <a href="#od_664e879b" id="od_664e879b"></a>

To be able to install the module by Composer, you need to get a copy of the module on the Magento Marketplace, or directly from Github.

```none
composer config repositories.cloudimage vcs https://github.com/scaleflex/magento-cloudimage-responsive
composer require cloudimage/module-responsive-plugin --sort-packages
```

Enable and install module in Magento:

```none
php bin/magento module:enable Cloudimage_Responsive
php bin/magento setup:upgrade
```

## Step 2. Activate the Cloudimage module <a href="#od_bf057e76" id="od_bf057e76"></a>

Activate the module and enter your Cloudimage token in the module configuration in Magento admin interface: `Stores / Configuration / Cloudimage by Scaleflex / Cloudimage Responsive`:

<figure><img src="/files/4cf2CiNJMbe7toySxAvl" alt=""><figcaption></figcaption></figure>

## Step 3. Configure the module <a href="#od_2c1e93b0" id="od_2c1e93b0"></a>

| option                      | description                                                                                                                                                                                                                                                                         |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Use origin URL**          | If enabled, the module will only add query parameters to the image source URL without prefixing it with {token}.cloudimg.io. This is required if you use a dedicated subdomain for delivering your images (media) in Magento. You will need to enable a custom CNAME in Cloudimage. |
| **Ignore Image Size Node**  | Useful for improving compatibility with some themes.                                                                                                                                                                                                                                |
| **Ignore Image Size Style** | Useful for improving compatibility with some themes.                                                                                                                                                                                                                                |
| **Lazy Loading**            | If enabled, images will be lazy-loaded for better loading times and user experience.                                                                                                                                                                                                |

### Advanced settings (optional) <a href="#od_870ebf0c" id="od_870ebf0c"></a>

This setting is for advanced users only and allows to inject a custom JS function into the Magento templates in order to support some specific Magento templates. Feel free to [contact us](https://www.cloudimage.io/en/contact-us) in order to get the custom JS function to address issues with your specific template.

| option                        | description                                                                                            |
| ----------------------------- | ------------------------------------------------------------------------------------------------------ |
| **Inject Custom JS function** | If enabled, you will be able to customize the JS function used to get the DOM information dynamically. |
| **Custom JS function**        | The JS function to customize Cloudimage library.                                                       |

## Custom themes (optional) <a href="#od_4b61b656" id="od_4b61b656"></a>

Once activated, the Cloudimage Responsive module will replace your template's classic image tag elements on-the-fly. This functionality is 100% compatible with the Magento Luma theme.

In the case of a personalized template, please consult the [Manual integration in Magento templates](https://github.com/scaleflex/magento-cloudimage-responsive#3-manual-integration-in-magento-templates-magento-server-access-required) section in the Cloudimage plugin Github page.


# Akeneo

Scaleflex VXP Akeneo App

## **How does it work?**

Once installed and connected, **Cloudimage by Scaleflex** seamlessly enhances your Akeneo product images through real-time image optimization and CDN delivery.

Here’s how it works:

1. **Image Fetching:** Cloudimage fetches your original product images directly from Akeneo via secure URLs. You can choose between public or authenticated (Basic Auth) endpoints for accessing media.
2. **Image Optimization on the Fly:** Each image is processed in real-time via the Cloudimage CDN. Optimization includes automatic WebP/AVIF conversion, resizing, cropping, quality tuning, and lazy loading – all based on your configuration or URL parameters.
3. **Delivery through a Global CDN:** Optimized images are delivered via Cloudimage’s ultra-fast global CDN. This ensures instant load times, performance gains, and bandwidth savings for your PIM users, storefronts, or connected systems.
4. **Smart Caching & Transformation Control:** All transformations are cached at edge locations, and you remain in full control of presets, filters, and security (token-based protection, signed URLs, etc.).
5. **Compatible with Headless & Omnichannel Setups:** Whether you are delivering images to a traditional storefront or a headless frontend (React, Vue, etc.), Cloudimage ensures every product image is delivered in the right format, size, and quality – instantly.

## Limitation

Once the application is activated, the **access token is displayed only once** for security reasons.\
If you leave or refresh the page **without copying the token**, it will no longer be accessible.

In such a case, you will need to **re-activate the app** in order to generate a new access token.

We recommend copying and storing the token securely **immediately after activation** to avoid any disruption.

## Introduction

**Scaleflex DMO**, integrated with Akeneo, enables seamless management, optimization, and distribution of images, videos, and digital assets across all channels. Assets are automatically standardized, compressed, enriched with metadata, and delivered via CDN — enhancing visual performance and accelerating time-to-market.

## Installation & Activation

### Prerequisites <a href="#od_117c69a2" id="od_117c69a2"></a>

* You need an active DMO account. [Register for a demo](https://www.scaleflex.com/en/request-a-demo) if you don't already have one.

### Activation

* Log in to your Akeneo instance
* Go to **Connect - App store**, search by name: **"Scaleflex"**, App name: **"Cloudimage by Scaleflex"**
* Click ***Connect***: You will grant all permissions for the Akeneo App
* When activation is done, you will be redirected to the **"Scaleflex DMO Success Connected"** page to get the Access Token

### Configurations

In the "Scaleflex DMO Success Connected", follow the steps in the guide:

<figure><img src="/files/9AyElZ55xagTuUMVOPvf" alt=""><figcaption></figcaption></figure>

* **Step 1:** Copy the Access Token
* **Step 2:** Open the Cloudimage Admin

  * Click on the button **"Open Cloudimage Admin Config"**
  * Go to the "Headers" block and fill in the value. Name: **Authorization** | Value: **Access\_Token**

  <figure><img src="/files/G9GejQyWSQJFk9tPjzDb" alt=""><figcaption></figcaption></figure>
* **Step 3:** Go back to the "Scaleflex DMO Success Connected" browser tab, enter your Cloudimage Token, and click on the button **"Check The Result"**.

When all the configuration is correct, the result will be like this.

<figure><img src="/files/JboSwxtgQ1EKCbc9JZWi" alt=""><figcaption></figcaption></figure>

## How to use Cloudimage in Akeneo

To use Cloudimage when all are connected, you need to get the product media download link

<figure><img src="/files/uuAUpoc22brzTdEljDwQ" alt=""><figcaption></figcaption></figure>

**Use in HTML:**

```
<img src="https://{token}.cloudimg.io/{akeneo_product_media_download_link}">
```


# Commercetools tutorial

Commercetools implementation

The [**react-cloudimage-responsive**](https://www.npmjs.com/package/react-cloudimage-responsive) library is a React component that allows you to easily add responsive images to your web application using the Cloudimage service. With this package, you can load and display optimized images that are automatically resized based on the device screen size and pixel density.

It is a simple and easy-to-use package that can help you improve the performance and user experience of your web application by optimizing it.

## Installation <a href="#od_07964cec" id="od_07964cec"></a>

### Prerequisites

You can create an account on the [Cloudimage registration page](https://www.cloudimage.io/registration).

### Install the component

You can install [**react-cloudimage-responsive**](https://www.npmjs.com/package/react-cloudimage-responsive) using npm or yarn:

```sh
npm install react-cloudimage-responsive
```

or

```sh
yarn add react-cloudimage-responsive
```

## Usage <a href="#od_7bff7d36" id="od_7bff7d36"></a>

To use  [**react-cloudimage-responsive**](https://www.npmjs.com/package/react-cloudimage-responsive), you need to provide it with a Cloudimage URL and some additional parameters. Here's an example:

```js
import React from 'react';
import CloudimageResponsive from 'react-cloudimage-responsive';

const MyComponent = () => {
  const cloudimageConfig = {
    token: 'your-token',
    baseURL: 'https://your-subdomain.cloudimg.io/v7/',
    params: {
      resize: {
        width: 500,
        height: 500,
        type: 'fit',
      },
      quality: 90,
      format: 'webp',
    },
  };

  return (
    <CloudimageResponsive
      alt="My Image"
      image="https://example.com/my-image.jpg"
      cloudimageConfig={cloudimageConfig}
    />
  );
};
```

In this example, we're passing three props to the **"CloudimageResponsive"** component:

* alt: The alternate text to display for the image. This is required for accessibility reasons.
* image: The URL of the original image to be optimized and resized by Cloudimage.
* cloudimageConfig: An object that contains the Cloudimage configuration parameters. This includes your Cloudimage API token, the base URL of your Cloudimage service, and the resizing, quality, and format parameters for the image.

## Configuration options <a href="#od_42bd6124" id="od_42bd6124"></a>

Here are the configuration parameters you can use in the **"cloudimageConfig"** object:

**token**

Type: String | Default: "demo" | required

Your Cloudimage customer token. [Subscribe](https://www.cloudimage.io/en/registration) for a Cloudimage account to get one. The subscription takes less than a minute and is totally free.

**customDomain**

Type: String | Default: "cloudimage.io" | optional

If you use a custom CNAME for your cloudimage integration, you can set it here.

**baseURL**

Type: String | Default: "/" | optional

Your image folder on server, this alows to shorten your origin image URLs.

**apiVersion**

Type: String |Default: 'v7' | optional

Allow to use a specific version of API.

* set a specific version of API

```js
const cloudimageConfig = {
  token: 'demo',
  baseURL: 'https://cdn.scaleflex.it/demo/',
  apiVersion: 'v7' // optional
};
```

* disable API version

```js
const cloudimageConfig = {
  token: 'demo',
  baseURL: 'https://cdn.scaleflex.it/demo/',
  apiVersion: null // optional
};
```

Note: this will disregard your token above as this should be built into the CNAME entry.

**doNotReplaceURL**

Type: bool | Default: false

If set to true the plugin will only add query params to the given source of image.

**lazyLoading**

Type: Bool | Default: true | optional

Only images close to the client's viewport will be loaded, hence accelerating the page loading time. The plugin uses [react-lazyload](https://github.com/twobin/react-lazyload) library to achieve it.

**lazyLoadOffset**

Type: Number/Array(Number) | Default: 100

Say if you want to preload a component even if it's 100px below the viewport (user have to scroll 100px more to see this component), you can set offset props to 100. On the other hand, if you want to delay loading a component even if it's top edge has already appeared at viewport, set offset to negative number.

Library supports horizontal lazy load out of the box. So when you provide this prop with number like 100 it will automatically set left edge offset to 100 and top edge to 100;

If you provide this prop with array like \[100, 200], it will set left edge offset to 100 and top offset to 200.

**params**

Type: String | Default: 'org\_if\_sml=1' | optional

Applies default Cloudimage operations/ filters to your image, e.g. brightness, contrast, rotation... Multiple params can be applied, separated by "&" e.g. wat\_scale=35\&wat\_gravity=northeast\&wat\_pad=10\&grey=1

```js
params: 'org_if_sml=1'
```

**alternative syntax: type: Object**

```js
params: {
    org_if_sml: 1,
    grey: 1,
    ...
}
```

**placeholderBackground**

Type: String | Default: '#f4f4f4' | optional

Placeholder coloured background while the image is loading or use it to set your custom placeholder image or gif

For example:

```
placeholderBackground: "url('https:/
https://cdn.scaleflex.it/filerobot/red-loader.gif
') 50% 50% no-repeat"
```

**lowQualityPreview**

Type: Object

lowQualityPreview\.minImgWidth number (default: 400) - minimum width of an image to load a low-quality preview image

```js
lowQualityPreview: {
  minImgWidth = 400
}
```

**presets**

Type: Object

Default:

```js
const cloudimageConfig = {
  token: 'demo',
  baseUrl: 'https://cdn.scaleflex.it/demo/',
  ...
  presets: {
      xs: '(max-width: 575px)', // up to 575    PHONE
      sm: '(min-width: 576px)', // 576 - 767    PHABLET
      md: '(min-width: 768px)', // 768 - 991    TABLET
      lg: '(min-width: 992px)', // 992 - 1199   SMALL_LAPTOP_SCREEN
      xl: '(min-width: 1200px)' // from 1200    USUALSCREEN
  }
};
```

Breakpoints shortcuts to use in image size property, can be overridden.

**limitFactor**

Type: Number | Default: 100 | optional

Rounds up the size of an image to the nearest limitFactor value.

For example:

* For an image with width 358px and limitFactor equal to 100, the plugin will round up to 400px.
* For an image with width 358px and limitFactor equal to 5, the plugin will round up to 360px.

**devicePixelRatioList**

Type: \[Number,...] | Default: \[1, 1.5, 2] | optional

List of supported device pixel ratios. If there is no need to support retina devices, you should set an empty array devicePixelRatioList: \[].

**delay**

Type: Number | optional

Delay for processing an image after rendering component.

**NOTE:** Normally, the parameter is not needed but in some cases with integrating third-party libraries, it can fix wrong calculation of image container.

**ImageSizeAttributes**

Type: String | possible values: 'use', 'ignore', 'take-ratio' | Default: 'use'

If width and height attributes are set:

**use** - width & height attributes values will be used to calculate image size (according to user's DPR) and ratio.

**take-ratio** - width & height attributes values will be used only to calculate ratio.

**ignore** - width & height attributes will be ignored.

If width and height attributes are NOT set, image container size will be detected to calculate result image size (according to user's DPR)

**Note:** If only width or height attributes is set, ratio is going to be taken from ci-ratio image attribute

### Properties <a href="#od_8e7d51d1" id="od_8e7d51d1"></a>

Here are the properties you can use with the **"CloudimageResponsive"** component:

* alt: The alternate text to display for the image. This is required for accessibility reasons.
* image: The URL of the original image to be optimized and resized by Cloudimage.
* cloudimageConfig: An object that contains the Cloudimage configuration parameters.
* className: An optional class name to apply to the image container.
* style: An optional object that contains CSS styles to apply to the image container.


# Contentful

Cloudimage Contentful plugin

## Installation <a href="#od_4941c597" id="od_4941c597"></a>

### Prerequisites <a href="#od_4941c597" id="od_4941c597"></a>

You need to have a Contentful account. Contentful is 100% Cloud Native, so you have to sign up for a hosted CMS at [https://be.contentful.com](https://be.contentful.com/)

You’ll get :

```
https://app.contentful.com/spaces/{Your Space ID}/home
```

### Step 1. Install from Contentful Marketplace <a href="#od_e13c6c61" id="od_e13c6c61"></a>

Find it here <https://www.contentful.com/marketplace/> and install it.

Or click "Install now" on <https://www.contentful.com/marketplace/app/scaleflex-cloudimage/>

<figure><img src="/files/zkctZSWySs10aofIhFd9" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/fDz88oUZ0MZ3A38jfLJV" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/TE8umELhCjjgeawiNQ2L" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/bpCrZa4v91FHTYxRozVm" alt=""><figcaption></figcaption></figure>

### Step 2. Configure App <a href="#od_b9b03603" id="od_b9b03603"></a>

<figure><img src="/files/BuF31j3vbzkX1wMc9Dmv" alt=""><figcaption></figcaption></figure>

Then save and install.

### Step 3. Create Content Type <a href="#od_7908ee08" id="od_7908ee08"></a>

<figure><img src="/files/XmJrgv0TaNbuUIGDmP97" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/lk18N02x8owMizqu13nt" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/WxCGB0ExKSmbKKWg0FlT" alt=""><figcaption></figcaption></figure>

**Absolutely important: The Field ID must be "cloudimage".**

<figure><img src="/files/w72iYWiXrVtYXynzCkYj" alt=""><figcaption></figcaption></figure>

By doing the above, you will associate the Cloudimage field (the field that you named Cloudimage) to the Cloudimage App. Recall the warning message you saw during the app configuration stage "There are no content types with ..."? By doing the above, that will no longer be an issue.

## Usage <a href="#od_7908ee08" id="od_7908ee08"></a>

Now you can create a content item of Cloudimage type.

You can add and remove images.

<figure><img src="/files/2Si1di6Zs3fL7Cgg9hHO" alt=""><figcaption></figcaption></figure>

Cloudimage will optimize those images in the background. (If you inspect in developer console, you will see the call to its infrastructure)

<figure><img src="/files/LNaqsqxHDXvh4OhnQST9" alt=""><figcaption></figcaption></figure>


# Drupal

Cloudimage Drupal module

## Installation

You can install the Cloudimage module from Github or by using Packagist.

### Download from Github <a href="#od_6fe6b2c7" id="od_6fe6b2c7"></a>

* Step 1: Download the latest version [Download Latest release of the Module](https://git.drupalcode.org/project/cloudimage_by_scaleflex)
* Step 2: Extract the zip file at location "**/modules**"
* Step 3: In Admin go to Extend -> find Cloudimage by Scaleflex -> Install

### Installation with Packagist <a href="#od_9985bedc" id="od_9985bedc"></a>

* Step 1: Run "**composer require 'drupal/cloudimage\_by\_scaleflex:^1.0'**"
* Step 2: In Admin go to Extend -> find Cloudimage by Scaleflex -> Install

<figure><img src="/files/FpbZV7EF0IBQ0z3x5Rc3" alt=""><figcaption></figcaption></figure>

## Configuration <a href="#od_ebdb8e0c" id="od_ebdb8e0c"></a>

<figure><img src="/files/QSiqrtqdbVE5WY5x1V7H" alt=""><figcaption></figcaption></figure>

* **Activation**: Enable/Disable the module
* **Standard Mode:** Replace image URLs not using any Javascript or Javascript library.
* **Token or CNAME**: Please enter your cloudimage token here (eg: abcdefgh), or your complete CNAME (eg. media.company.com) if the configuration is already validated in your Cloudimage Admin.
* **Use origin URL**: If enabled, the module will only add query parameters to the image source URL without prefixing it with `{token}.cloudimg.io`.
* **Lazy Load**: If enabled, only images close to the current viewpoint will be loaded.
* **Ignore SVG Size**: If enabled, the module will ignore the image size node in the SVG file.
* **Image Size Attributes:** Used to calculate width and height of images
* **Prevent Image Upsize**: If you set Maximum "Pixel ratio" equal to 2, but some of your assets does not have min retina size(at least 2560x960), please enable this to prevent image resized. By default, yes.
* **Image Quality**: The smaller the value, the more your image will be compressed. Careful — the quality of the image will decrease as well. By default, 90.
* **Maximum Pixel Ratio**: The maximum pixel ratio of the image. By default, 2.
* **Remove V7**: If enabled, the module will remove the "/v7" part in URL format. Activate for token created after October 20th 2021.

#### **Advanced User's options**

* **Custom JS Function**: The valid js function starting with { and finishing with }
* **Custom Library Options**: Modifies the library URL (to add transformations)


# Kontent.ai

Cloudimage Kontent.ai connector

## Installation <a href="#od_6e6d0ed5" id="od_6e6d0ed5"></a>

### Prerequisites

You need to have a Kontent CMS setup. <https://kontent.ai/>

### Step 1. Add custom element

Content model (left hand side) > Create new > Custom element (right hand side). You will then have the below view.

<figure><img src="/files/R24kfojHIi6HYZgB5Skd" alt=""><figcaption></figcaption></figure>

**Hosted code URL:** [https://scaleflex.cloudimg.io/v7/plugins/cloudimage-kontent/cloudimage.html?func=proxy](https://scaleflex.cloudimg.io/v7/plugins/cloudimage-kontent/cloudimage.html?vh=117d40\&func=proxy&)

**Parameters** are the information that Kontent-Cloudimage needs to accelerate your images. See below:

```json
json{
    "token": "your_token",
    "baseURL": "your_base URL",
    "lazyLoading": true/false,
    "mgmtApiKey": "your Management API key",
}
```

*note: "mgmtApiKey" is obtained from:*

<figure><img src="/files/lTtmSZUAprwsQsI5Fw7v" alt=""><figcaption></figcaption></figure>

### Step 2. Create new content with this Kontent-Cloudimage Custom Element

Content & asset (left hand side) > Create new > Chose type: Cloudimage. Chose add/remove some images, publish. You will then have the below view.

<figure><img src="/files/oHnJ0kvcJpb8ai5jaKDO" alt=""><figcaption></figcaption></figure>

After publishing, it will look like below. The URLs are Cloudimage accelerated.

<figure><img src="/files/phpiRklrzeBUhBzeIKvE" alt=""><figcaption></figcaption></figure>

### Step 3. Set up a preview <a href="#od_7791d727" id="od_7791d727"></a>

Here, you can find a tutorial on how to set up a preview: <https://kontent.ai/learn/tutorials/develop-apps/build-strong-foundation/set-up-preview/>

Go to **Settings > API Keys**. For this, you will definitely need your **Project ID**. You may also need your **API Key** (depends on what you want to do, but for simple things Project ID is enough).

<figure><img src="/files/nAfZygupfs2OB1zHsSHI" alt=""><figcaption></figcaption></figure>

Write a **client app** that utilizes the **Delivery API**

Recall that Kontent have 3 set of APIs that you can interact with

<figure><img src="/files/kObvO1ixK2Y3ohu7s27e" alt=""><figcaption></figcaption></figure>

Delivery APIs in plain HTTPS form can be taken from <https://kontent.ai/learn/tutorials/develop-apps/get-started/postman-collection/> , imported into POSTMAN

<figure><img src="/files/22DrNsNwXUuIFHK2m6RS" alt=""><figcaption></figcaption></figure>

For the 3 content items that comes out of the box, Kontent already have an **example client app**, which we can **imitate**.

* This example app was made by using React JS <https://github.com/Kentico/kontent-sample-app-react>
* Hosted on Github Pages: `https://kentico.github.io/kontent-sample-app-preview-react/{restof the URL}`

<figure><img src="/files/yURSiY2MQcHZWKwPseVP" alt=""><figcaption></figcaption></figure>

After writing and hosting your client app, go to **Settings > Preview URLs** and **define your Preview URL formats**.

See how Kontent defined their preview URLS for their example app

<figure><img src="/files/Jqz7G89fRnQo0ysQGrvE" alt=""><figcaption></figcaption></figure>

`Codename`, `URLSlug` & `ItemId` are obtained as follows:

<figure><img src="/files/mkkhi0cWrcunS2CkCX5C" alt=""><figcaption></figcaption></figure>

Once you done all the above, you can preview by clicking **Preview**

<figure><img src="/files/wb0vo9wzTjs0AGY8NDqr" alt=""><figcaption></figcaption></figure>

## Support <a href="#od_dd36effa" id="od_dd36effa"></a>

* <https://kontent.ai/community/> or <https://kontent.ai/discord>
* <https://scaleflex.zendesk.com/hc/en-gb/requests/new> or <hello@scaleflex.com>


# Opencart

Cloudimage Opencart plugin

The Cloudimage Opencart Plugin will automatically adapt the image URLs in your Opencart site to deliver your images rocket fast over the Cloudimage multi-CDN infrastructure. You only need to register with Cloudimage and install the plugin in your Opencart Admin.

## Installation <a href="#od_6dc6f7bb" id="od_6dc6f7bb"></a>

### Prerequisites <a href="#od_d63bc98a" id="od_d63bc98a"></a>

To use the plugin, you need to have a Cloudimage account. You can create one on the [Cloudimage registration page](https://www.cloudimage.io/registration).\ <br>

<figure><img src="/files/w6zoGfxDiHG74ANKMAEp" alt=""><figcaption></figcaption></figure>

### Step 1. Download the plugin <a href="#od_27374794" id="od_27374794"></a>

To get the plugin, you need to open [Opencart Extension Marketplace](https://www.opencart.com/index.php?filter_license=0\&route=marketplace/extension&).

Then, search for "Cloudimage" in the search bar.

<figure><img src="/files/z95BYr0ycUk7Jzjdi0Kr" alt=""><figcaption></figcaption></figure>

Select the *Cloudimage by Scaleflex* plugin and click on *Download*. The *Download* button will be available on the right side. This will download the .*zip* file.

### Step 2. Install the plugin in Opencart <a href="#od_a86d9a27" id="od_a86d9a27"></a>

First, you need to log in to your Opencart Admin:

<figure><img src="/files/YOaYYjaz4e2HVwkpPoDO" alt=""><figcaption></figcaption></figure>

Then, navigate to *Extension->Installer*.

<figure><img src="/files/QicfjvynONY8UBUyWsNE" alt=""><figcaption></figcaption></figure>

Click on "Upload" and upload the .zip file that you downloaded in the previous step:

<figure><img src="/files/hWiMmKO6rrwTLl2sTjl7" alt=""><figcaption></figcaption></figure>

### Step 3. Activate the module <a href="#od_9b255244" id="od_9b255244"></a>

Navigate to *Extensions*->*Modifications* and select *refresh* in the Modification panel. Refresh button will be available on the top right corner as shown below:

<figure><img src="/files/579UgEG2K1W8LFcmqNmm" alt=""><figcaption></figcaption></figure>

Navigate to *Extensions*->*Extensions*->*Modules*.

<figure><img src="/files/hi94JkCNUz0rTTe7rSXr" alt=""><figcaption></figcaption></figure>

Select *Cloudimage* from the list of modules and click on *Edit*.

<figure><img src="/files/qoZ5bUIabkeZGCb76hMz" alt=""><figcaption></figcaption></figure>

Enable the plugin and enter Cloudimage Token or CNAME

You need to enter your Cloudimage account token which you have received upon account creation (step 1).If you need a CNAME please contact our [sales team](https://www.cloudimage.io/en/contact-us).

<figure><img src="/files/TvqigbjMuBD7psO4qs7e" alt=""><figcaption></figcaption></figure>

After you enter your token and save the changes, the plugin will start to deliver your images via Cloudimage.

### Configure <a href="#od_d0435609" id="od_d0435609"></a>

| Options                         | Descriptions                                                                                                                                                                              |
| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Remove v7 from URL              | If your token/CNAME was created after 20th October 2021 you need to tick this option.This option will remove the "v7" part from image URLs.                                               |
| Enable debug image overlays     | <p>For troubleshooting purposes to view details about resizing and compression.<br>Note:This will print information over your images.</p>                                                 |
| Cloudimage image output quality | To increase or decrease the quality of images delivered by cloudimage.Slide to the right to increase quality.                                                                             |
| Javascript Mode                 | To turn on responsive images,this option makes use of [Cloudimage javascrpt libarary](https://github.com/scaleflex/js-cloudimage-responsive). All img tags "src" is changed to "ci-src" . |

*When Javascript Mode is active, make sure that no other module is overwriting the plugin's delivery with "ci-src" image source.*


# Prestashop

Cloudimage Prestashop module

The Cloudimage Prestashop Module will automatically adapt the image URLs in your Prestashop Theme to deliver your images rocket fast over the Cloudimage multi-CDN infrastructure. You only need to register with Cloudimage and install the plugin in your Prestashop Admin.

## Installation <a href="#od_33c1ab57" id="od_33c1ab57"></a>

### Prerequisites <a href="#od_d63bc98a" id="od_d63bc98a"></a>

First, you need to have a Cloudimage account. You can create one on the [Cloudimage registration page](https://www.cloudimage.io/registration).

### Step 1. Install the module <a href="#od_5f68abea" id="od_5f68abea"></a>

#### **Manual installation - download and unzip the module**

* Download the latest version [Download Latest release of Module](https://github.com/scaleflex/prestashop-cloudimage-plugin/releases)
* Unzip the file and change the folder name to "cloudimage"
* Zip the file with the name "cloudimage.zip"
* In Admin go to Modules/Module Manager -> Upload the Zipped file

#### **Automated installation - find the module in the marketplace**

* In Admin go to Modules/Module Catalog search for "Clouldimage by Scaleflex"
* Click "Install"

### Step 2. Configure the module <a href="#od_51476cd2" id="od_51476cd2"></a>

* Go to Modules/Module Manager -> Other Section -> Click on Configure on "Cloudimage by Scaleflex"

<figure><img src="/files/LWl5fJYb7wtvtJxc32oG" alt=""><figcaption></figcaption></figure>

* Update configuration and activate the Module, then your site is ready to go. (Please clear the Cache)

<figure><img src="/files/pdcjHSGG3y91aB2BSB7y" alt=""><figcaption></figcaption></figure>

### Configuration

* **Activation**: Enable/Disable the module
* **Cloudimage API Key**: Your Cloudimage Token
* **Prerender**: If enabled, the plugin will disable JS Responsive and Change URL to {token}.cloudimg.io/{origin\_url}
* **Auto Base URL Image**: If enabled, Production with SSL only, The Plugin auto add base url to some missing Base URL Images
* **Use origin URL**: If enabled, the plugin will only add query parameters to the image source URL, avoiding double CDNization in some cases, like if you have aliases configured.
* **Lazy Load**: If enabled, only images close to the current viewpoint will be loaded.
* **Ignore SVG Size**: If enabled, the module will ignore the image size node in the SVG file.
* **Prevent Image Resize**: If you set Maximum "Pixel ratio" equal to 2, but some of your assets does not have min retina size(at least 2560x960), please enable this to prevent image resized. By default, yes.
* **Image Quality**: The smaller the value, the more your image will be compressed. Careful — the quality of the image will decrease as well. By default, 90.
* **Maximum Pixel Ratio**: The maximum pixel ratio of the image. By default, 2.
* **Remove V7**: If enabled, the module will remove the "/v7" part in URL format. Activate for token created after October 20th 2021.

**Advanced User**

* **Custom JS Function**: The valid js function starting with { and finishing with }
* **Custom Library Options**: Modifies the library URL and must begin with the symbol &. Please read document before use.

*Please note: if you are using an earlier version of Prestashop (v1.6.x or less) and / or this plugins is not compatible with some of your add-ons, it is always possible to make a manual integration of the Cloudimage acceleration, following the* [Prestashop tutorial](/implementation/cms-plugins/prestashop/prestashop-tutorial)*.*


# Prestashop tutorial

Implement Cloudimage on Prestashop 1.6+

This simple and fast implementation in Prestashop leverages JPEG optimisation, WebP compression and CDN delivery of your images. [Contact us](https://www.cloudimage.io/en/contact-us) if you want to use Cloudimage at its full extend and also resize, watermark, transform and leverage responsive images on your Prestashop store.

Please note that to use your Cloudimage account with Prestashop, you need to use the [Origin URL prefix](/setup/shortening-urls/origin-url-prefix) function. This means that you will be able to use your Cloudimage token for delivering images *only* from your Prestashop site.

## Installation

### Prerequisites <a href="#od_d63bc98a" id="od_d63bc98a"></a>

To use the plugin, you need to have a Cloudimage account. You can create one on the [Cloudimage registration page](https://www.cloudimage.io/registration).<br>

<figure><img src="/files/1KSB2Dy2EHaaaX7vq2jZ" alt=""><figcaption></figcaption></figure>

### Step 2. Configure the Cloudimage for use with Prestashop <a href="#od_1043eb9e" id="od_1043eb9e"></a>

There are two basic configuration steps:

1. First, you need to contact us at <hello@cloudimage.io> and let us know that you would like to use your Cloudimage token with Prestashop. We will lock your account to the v7 API of Cloudimage. *Note: This step is required only for tokens created before November 1, 2021.*
2. Then, you need to set up the Origin URL prefix in your Cloudimage admin to your Prestashop domain. By doing this, your token will fetch images only from your Prestashop site.

### Step 3. Log in to your Prestashop website admin <a href="#od_21630f39" id="od_21630f39"></a>

### Step 4. On the Admin sidebar, go to Advanced Parameters > Performance. <a href="#od_410d6e5f" id="od_410d6e5f"></a>

<figure><img src="/files/ht7zbbbKJNvEJCypQ9YO" alt=""><figcaption></figcaption></figure>

Add in Media Server #1, the Cloudimage domain and click to Save.

### Step 5. Clear the cache. <a href="#od_e1703e21" id="od_e1703e21"></a>

<figure><img src="/files/UqQ3tlQg2USmzObYcHbv" alt=""><figcaption></figcaption></figure>

### Verify your HTML page source <a href="#od_8a44de35" id="od_8a44de35"></a>

Please ensure that you are properly delivering static content via the CDN.

### You can modify your template to resize your images with us <a href="#od_18c083ac" id="od_18c083ac"></a>

This simple and fast implementation in Prestashop leverages JPEG optimisation, WebP compression and CDN delivery of your images. Contact us if you want to use Cloudimage at its full extent and also resize, watermark, transform and leverage responsive images on your Prestashop store.


# Ruby wrapper

The Ruby wrapper allows you to seamlessly interface with the Cloudimage API.

| ![](/files/jjQtnGf40d2mup0982F5) | <p><em>Supported with Ruby 2.4+, JRuby, and TruffleRuby</em><br><a href="https://github.com/scaleflex/cloudimage-rb"><em>github</em></a></p> |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |

## Installation <a href="#od_cf36afd9" id="od_cf36afd9"></a>

Add this line to your application's Gemfile:

```sh
gem 'cloudimage'
```

And then execute:

```sh
$ bundle install
```

Or install it yourself as:

```sh
$ gem install cloudimage
```

## Usage <a href="#od_66a8476d" id="od_66a8476d"></a>

The only requirement to get started is your customer token. You can find it within your Admin interface.

In order to interact with Cloudimage, we'll first initialize a client service object:

```ruby
client = Cloudimage::Client.new(token: 'mysecrettoken')
```

The Cloudimage client accepts the following options:

<table><thead><tr><th width="218.33333333333331">Option</th><th width="119">Type</th><th>Additional info</th></tr></thead><tbody><tr><td><code>token</code></td><td>string</td><td>Required if <code>cname</code> is missing.</td></tr><tr><td><code>cname</code></td><td>string</td><td>Required if <code>token</code> is missing. See CNAME.</td></tr><tr><td><code>salt</code></td><td>string</td><td>Optional. See Security. Needed if you are using URL sealing or URL signatures.</td></tr><tr><td><code>signature_length</code></td><td>integer</td><td>Optional. Integer value in the range <code>6..40</code>. Defaults to 18.</td></tr><tr><td><code>sign_urls</code></td><td>boolean</td><td>Optional. Defaults to true. See Security.</td></tr><tr><td><code>aliases</code></td><td>hash</td><td>Optional. See URL aliases.</td></tr></tbody></table>

The calling path on the client object returns an instance of Cloudimage::URI. It accepts the path to the image as a string and we we will use it to build Cloudimage URLs.

```ruby
uri = client.path('/assets/image.png')
```

Here are some common approaches for constructing Cloudimage URLs using this gem:

**Hash of params**

Pass a hash to `to_url`. Every key becomes a param in the final Cloudimage URL so this gives you the freedom to pass arbitrary params if need be.

```ruby
uri.to_url(w: 200, h: 400, sharp: 1, gravity: 'west', ci_info: 1)
# => "https://mysecrettoken.cloudimg.io/assets/image.png?ci_info=1&gravity=west&h=400&sharp=1&w=200"
```

**Chainable helpers**

Every param supported by Cloudimage can be used as a helper method.

```ruby
uri.w(200).h(400).gravity('west').to_url
# => "https://mysecrettoken.cloudimg.io/assets/image.png?gravity=west&h=400&w=200"
```

While every key passed into the `to_url` method gets appended to the URL, chainable helper methods will throw a `NoMethodError` when using an unsupported method.

```none
uri.height(200).to_url
# NoMethodError (undefined method `height' for #<Cloudimage::URI:0x00007fae461c42a0>)
```

This is useful for catching typos and identifying deprecated methods in case Cloudimage's API changes.

**Method aliases**

The gem comes with a handful of useful aliases. Consult the Cloudimage::Params module for their full list.

```ruby
uri.debug.prevent_enlargement.to_url
# => "https://mysecrettoken.cloudimg.io/assets/image.png?ci_info=1&org_if_sml=1"
```

From the example above you can see that parameters that only serve as a flag don't need to accept arguments and will be translated into `param=1` within the final URL.

{% hint style="info" %}
For the full set of parameters and detailed implementation instructions, please consult the [github page](https://github.com/scaleflex/cloudimage-rb).
{% endhint %}


# Shopware

Cloudimage Shopware module

## Installation <a href="#od_1e92263f" id="od_1e92263f"></a>

### Prerequisites <a href="#od_d63bc98a" id="od_d63bc98a"></a>

To use the plugin, you need to have a Cloudimage account. You can create one on the [Cloudimage registration page](https://www.cloudimage.io/registration).\ <br>

<figure><img src="/files/B4f9svzdqAXQvcAtTt8U" alt=""><figcaption></figcaption></figure>

### Step 1. Download and install the module <a href="#od_1e92263f" id="od_1e92263f"></a>

#### Installation from Github <a href="#od_6fe6b2c7" id="od_6fe6b2c7"></a>

* Step 1: Download the latest version [Download Latest release of Module](https://github.com/scaleflex/shopware-cloudimage-plugin/releases)
* Step 2: Zip the file with the name "cloudimage.zip"
* Step 3: In Admin go to Extensions -> My extensions -> Upload extension

<figure><img src="/files/qbTxzZ93lAwDFefIKE0v" alt=""><figcaption></figcaption></figure>

#### Or Installation from Store <a href="#od_9985bedc" id="od_9985bedc"></a>

* Step 1: In Admin go to Extensions -> Store -> Catalog and search for "Cloudimage by Scaleflex"

<figure><img src="/files/CLsbHx3NxSqzZ6w6IEDD" alt=""><figcaption></figcaption></figure>

* Step 2: Click on extension and after that "Add extension"

<figure><img src="/files/0TVmDc3GYTv4jXAgERya" alt=""><figcaption></figcaption></figure>

* Step 3: Go to Extensions -> My extensions -> Cloudimage by Scaleflex -> Click on Configuration

<figure><img src="/files/NHtROYAZPRlCm0lfTspA" alt=""><figcaption></figcaption></figure>

* Step 4: Update configuration and activate the Module, then your site is ready to go.

<figure><img src="/files/JRdwO4QaKfF4v4ftu3wZ" alt=""><figcaption></figcaption></figure>

### Step 2. Configure the module <a href="#od_ebdb8e0c" id="od_ebdb8e0c"></a>

* **Activation**: Enable/Disable the module
* **Standard Mode:** Replace image URLs not using any Javascript or Javascript library.
* **Token or CNAME**: Please enter your cloudimage token here (eg: abcdefgh), or your complete CNAME (eg. media.company.com) if the configuration is already validated in your Cloudimage Admin.
* **Use origin URL**: If enabled, the module will only add query parameters to the image source URL without prefixing it with `{token}.cloudimg.io`.
* **Lazy Load**: If enabled, only images close to the current viewpoint will be loaded.
* **Ignore SVG Size**: If enabled, the module will ignore the image size node in the SVG file.
* **Prevent Image Upsize**: If you set Maximum "Pixel ratio" equal to 2, but some of your assets does not have min retina size(at least 2560x960), please enable this to prevent image resized. By default, yes.
* **Image Quality**: The smaller the value, the more your image will be compressed. Careful — the quality of the image will decrease as well. By default, 90.
* **Maximum Pixel Ratio**: The maximum pixel ratio of the image. By default, 2.
* **Remove V7**: If enabled, the module will remove the "/v7" part in URL format. Activate for token created after October 20th 2021.

**Advanced User's options**

* **Custom JS Function**: The valid js function starting with { and finishing with }
* **Custom Library Options**: Modifies the library URL (to add transformations)


# Spryker

#### Installation

Start up the Spryker shop and run:

```
composer require scaleflex/spryker-cloudimage
```

#### Configuration in the shop

To get the package running, register the "Scaleflex" namespace into the config\_default.php in the KernelConstants::CORE\_NAMESPACES

```
$config[KernelConstants::CORE_NAMESPACES] = [
    'Scaleflex',
    ...
];
```

Set these constants in the config, where it is needed. the BaseUrl and the ignoredUrlPaths need to be set according to the use case.

```
use Scaleflex\Shared\Cloudimage\CloudimageConstants;

$config[CloudimageConstants::TOKEN] = '{{YOUR_TOKEN}}';
$config[CloudimageConstants::BASE_URL] = 'http://yves.de.spryker.local';
$config[CloudimageConstants::IGNORED_URL_PATHS] = ['http://yves.de.spryker.local'];
```

#### Integration into the code

Register the Twig plugin in the Pyz\Yves\Twig\TwigDependencyProvider.php

```
/**
 * @return \Spryker\Shared\TwigExtension\Dependency\Plugin\TwigPluginInterface[]
 */
protected function getTwigPlugins(): array
{
    return [
        ...
        new CloudimageTwigPlugin(),
    ];
]
```

**Example**

Use the TwigFilter for the images. Here is an example of how to extend the Pyz\Yves\ShopUi\Theme\default\components\molecules\lazy-image.twig. Everywhere this molecule will use Cloudimage and apply a grey filter.

```
{% block body %}
    {% set data = data | merge({'imageSrc': data.imageSrc | cloudimage({}, {grey: 1}) }) %}
    ...
{% endblock %}
```

**How to use the plugin**

```
cloudimage({YOUR_OPERATIONS}, {YOUR_FILTERS})
```

Cloudimage documentation for the operations: <https://docs.cloudimage.io/transformations/image-operations>

Cloudimage documentation for the filters: <https://docs.cloudimage.io/transformations/image-filters>


# Sylius

Cloudimage Sylius Plugin

The Cloudimage Sylius Plugin will automatically adapt the image URLs in your Sylius site to deliver your images rocket fast over the Cloudimage multi-CDN infrastructure. You only need to register with Cloudimage and install the plugin in your Sylius Admin.

## Installation <a href="#od_6dc6f7bb" id="od_6dc6f7bb"></a>

### Prerequisites <a href="#od_d63bc98a" id="od_d63bc98a"></a>

To use the plugin, you need to have a Cloudimage account. You can create one on the [Cloudimage registration page](https://www.cloudimage.io/registration).\ <br>

<figure><img src="/files/tsV4VV0NMs70vYJwdXOY" alt=""><figcaption></figcaption></figure>

### Step 1. Install and setup the plugin <a href="#od_9c6ab473" id="od_9c6ab473"></a>

Open a command console on your Sylius hosting server, enter your project directory and execute the following command to download the latest stable version of this bundle:

```none
composer require scaleflex/sylius-cloudimage-plugin
```

Then, enable the plugin by adding it to the list of registered plugins/bundles in config/bundles.php file of your project

```php
<?php
# config/bundles.php
return [
    // ...
    Scaleflex\SyliusCloudimagePlugin\ScaleflexSyliusCloudimagePlugin::class => ['all' => true],
];
```

**Update Channel Model**\
Your Entity Channel has to implement **\Scaleflex\SyliusCloudimagePlugin\Model\ExtendedChannelInterface**

You can use Trait **\Scaleflex\SyliusCloudimagePlugin\Model\ExtendedChannelTrait**

Update Database Schema

```none
nonebin/console doctrine:migration:diff
bin/console doctrine:migration:migrate
```

Include&#x20;

{% code overflow="wrap" %}

```twig
{{ include('@ScaleflexSyliusCloudimagePlugin/Admin/Channel/extendedChannelForm.html.twig') }} 
```

{% endcode %}

in your **templates/bundles/SyliusAdminBundle\Channel\_form.html.twig** form.

Then you can start to personalize the configuration (token, options) in Admin / Channel -> Choose one Channel

<figure><img src="/files/B9eW5P6CUD6NJ7iDl9SS" alt=""><figcaption></figcaption></figure>

#### **Add script to Shop by Event**

```markup
# config/packages/sylius_ui.yaml
sylius_ui:
  events:
    sylius.shop.layout.head:
      blocks:
        cloudimage_script: '@ScaleflexSyliusCloudimagePlugin\Shop\cloudimageScript.html.twig'
    sylius.shop.layout.after_body:
      blocks:
        cloudimage_process: '@ScaleflexSyliusCloudimagePlugin\Shop\cloudimageProcess.html.twig'
```

#### **Development**

To process your image through Cloudimage you have two ways to implement

* Option 1: Use the `ci_src(path)` Twig Function

```php
#templates/bundles/SyliusShopBundle/Product/_mainImage.html.twig
{% if product.imagesByType('thumbnail') is not empty %}
  {% set path = product.imagesByType('thumbnail').first.path|imagine_filter(filter|default('sylius_shop_product_thumbnail')) %}
  {% elseif product.images.first %}
  {% set path = product.images.first.path|imagine_filter(filter|default('sylius_shop_product_thumbnail')) %}
  {% else %}
  {% set path = '//placehold.it/200x200' %}
  {% endif %}
  <img {{ ci_src(path) }} {{ sylius_test_html_attribute('main-image') }} alt="{{ product.name }}" class="ui bordered image" />
```

* Option 2: Define your own
  * Update the image `src` to `ci-src="{path}?q={sylius.channel.cloudimageImageQuality}"`
  * Add the script

```php
{% if sylius.channel.cloudimageStatus and sylius.channel.cloudimageToken %}
      <script>
          window.ciResponsive.process();
      </script>
  {% endif %}
```

### Step 2. Configure the module <a href="#od_d0435609" id="od_d0435609"></a>

Here are the available configuration options:

| Option                  | descriptions                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Activation              | Enable/Disable the plugin                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| Token                   | Token from Cloudimage (found in your admin panel)                                                                                                                                                                                                                                                                                                                                                                                                              |
| Use origin URL          | If enabled, the module will only add query parameters to the image source URL without prefixing it with {token}.cloudimg.io : might be useful to avoid double CDNization, for exemple if you have aliases configured                                                                                                                                                                                                                                           |
| Ignore Image Size Node  | Useful for improving compatibility with some themes.                                                                                                                                                                                                                                                                                                                                                                                                           |
| Ignore Image Size Style | Useful for improving compatibility with some themes.                                                                                                                                                                                                                                                                                                                                                                                                           |
| Lazy Loading            | <p>If enabled, images will be lazy-loaded for better initial loading times and user experience.<br>⚠️ lazy loading can have variable results on some websites as for the first rows of images loaded, therefore it is recommended to make use of an integrated new class provided: “lazy-off”. You can specify the "lazy-off" class either in the page builder through the back-office, or in the templates directly (eg. category page and product page).</p> |
| Custom js function      | 🚨 Any js function to customize the behavior of the Cloudimage library. Attention, adding js should only be done by *advanced administrators* as it can break the js or have unintended effects if not thoroughly tested and validated.                                                                                                                                                                                                                        |
| Image Quality           | Customizes image quality, therefore compression -influences the size of image-.applied by default. Warning, a setting under 80 might have a potentially visible impact.                                                                                                                                                                                                                                                                                        |
| Ignore SVG images       | If enabled, all SVG images will be skipped from acceleration as anyway vector images will not be compressed.                                                                                                                                                                                                                                                                                                                                                   |
| Maximum "Pixel ratio"   | List of supported device pixel ratios, default is 2, eg: 2 for Retina devices                                                                                                                                                                                                                                                                                                                                                                                  |
| Custom Library Options  | <p>🚨 Those optional parameters will be added to the request for each URL going through the Cloudimage acceleration infrastructure. It can allow you to force image formats, apply automatic transformations or watermarking, and might be used for troubleshooting purposes.<br>For advanced users only, please refer to the Cloudimage documentation <a href="https://docs.cloudimage.io/">here</a> for the list of possible parameters.</p>                 |

*When Javascript Mode is active, make sure that no other module is overwriting the plugin's delivery with "ci-src" image source.*


# Shopify tutorial

Step-by-step instructions how to set up Cloudimage with Shopify


# Shopify integration

Shopify integration

Cloudimage will accelerate your Shopify shop by compressing images and delivering them over CDN.

## Step 1. Configure an origin HTTP-Storage in Cloudimage <a href="#od_34f9d7f4" id="od_34f9d7f4"></a>

After finding out your Shopify URL as shown below (i.e. `https://cdn.shopify.com`, `https://cdn2.shopify.com` or `https://cdn.shopifycloud.com`), you can create a HTTP-Storage in Cloudimage.

<figure><img src="/files/uwQhHKitnCIBDaF2STY2" alt=""><figcaption></figcaption></figure>

Create the Storage record in the Cloudimage admin as follows:

<figure><img src="/files/jWE2CJseCslqtQrs5CMu" alt=""><figcaption></figcaption></figure>

## Step 2. Verify alias <a href="#od_395625dc" id="od_395625dc"></a>

Adding an HTTP-based Storage will make you create a Cloudimage Alias. After saving the storage in Step 1 above, verify that images are delivered correctly over your Cloudimage URL with the Alias:

Origin image URL on Shopify:

<https://cdn.shopify.com/shopifycloud/brochure/assets/home/hero-stock-small-72c1242fc5bbf6cfe135968110e9c52435af1e389c0fd4fe68208d21427e21e0.jpg>

Cloudimage URL with Alias:

`https://{token}.cloudimg.io/_myshopify_/shopifycloud/brochure/assets/home/hero-stock-small-72c1242fc5bbf6cfe135968110e9c52435af1e389c0fd4fe68208d21427e21e0.jpg`

Replace `{token}` with your Cloudimage token.

Unable to delivery images over your Cloudimage URL? Contact <hello@cloudimage.io> if you are not able to fetch the image as explained above. In such a situation, do not move to step 3 as this could break your website images.

## Step 3. Create settings\_schema.json <a href="#od_bb1f2167" id="od_bb1f2167"></a>

Proceed with making the changes in our Shopify settings and theme files to switch the image delivery to Cloudimage.

From your Shopify admin, click **Online Store > Themes**. Find the theme you want to edit, click the **Actions** button and then **Edit code**.

Under Config, click `settings_schema.json` and append the code below after the last section of this file:

```json
{
  "name": "Cloudimage",
  "settings": [
    {
      "type": "paragraph",
      "content": "Check out Cloudimage's [Cloudimage and Shopify integration](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/dev-implementation/shopify-tutorial) to learn more about this."
    },
    {
      "type": "checkbox",
      "id": "enableCloudimage",
      "label": "Enable Cloudimage"
    },
    {
      "type": "text",
      "id": "cloudImageToken",
      "label": "Cloudimage Token",
      "info": "The token of Cloudimage"
    },
    {
      "type": "text",
      "id": "cloudImageUrl",
      "label": "Cloudimage url endpoint",
      "info": "The url endpoint you set within Cloudimage. Example: //token.cloudimg.io/v7/_myshopify_"
    },
    {
      "type": "text",
      "id": "cloudimageShopifyCdnUrl",
      "label": "Shopify CDN domain",
      "default": "//cdn.shopify.com",
      "info": "Do not change this unless you have a proxy in place. Not sure? Leave it as is."
    }
  ]
}
```

## Step 4. Create cloudimage.liquid and cloudimage-video-tag.liquid file <a href="#od_21f2b6a5" id="od_21f2b6a5"></a>

Create new files `cloudimage.liquid` and `cloudimage-video-tag.liquid` under the **Snippets** directory. Copy the code below into that file, and save it:

* cloudimage.liquid

```php
{% capture CLOUDIMAGE %}
 {% if settings.enableCloudimage%}
   {% for i in (1..1) %}
     {% unless src or settings.cloudImageUrl != blank %}
       {{ src }}
       {% break %}
     {% endunless %}
     {% assign cdnUrls = settings.cloudimageShopifyCdnUrl | split: ',' %}
   {% if cdnUrls.size  == 0 %}
   {{ src }}
       {% break %}
   {% endif %}
     {% assign cdnUrl = cdnUrls[0] %}
     {% for temp in cdnUrls %}
       {% if src contains temp %}
         {% assign cdnUrl = temp %}
         {% break %}
       {% endif %}
     {% endfor %}
   {% assign cdnUrl = cdnUrl | strip %}
   {% unless src contains cdnUrl %}
       {{ src }}
       {% break %}
     {% endunless %}
   {% assign cloudImageUrl = settings.cloudImageUrl | strip %}
     {% assign tempCloudImageUrl = cloudImageUrl %}
     {% assign lastChar = cloudImageUrl | slice:-1 %}
     {% assign cloudImageUrlLength = cloudImageUrl | size %}
     {% assign newCloudImageUrl = cloudImageUrlLength | minus:1 %}
     {% if lastChar == "/" %}
       {% assign tempCloudImageUrl = cloudImageUrl | slice:0,newCloudImageUrl %}
     {% endif %}
   {% assign newSrc = src | strip | replace:cdnUrl,tempCloudImageUrl %}
   {{ newSrc | default:src }}
   {% endfor %}
 {% else %}
   {{ src }}
 {% endif %}
{% endcapture %}{{ CLOUDIMAGE | strip | replace:'  ' | strip_newlines }}
```

* cloudimage-video-tag.liquid

```php
{% comment %}
    Renders video tag

    Accepts:
    - image_size: {String} Size of media
    - autoplay: {Boolean} Video autoplay
    - loop: {String} Video loop
    - controls: {Boolean} Video controls
    - url: {String} Video url
    - muted: {Boolean} Video muted

    Usage:
    {% render 'cloudimage-video-tag',
      image_size: image_size,
      autoplay: autoplay,
      loop: loop,
      controls: controls,
      url: url,
      muted: muted
    %}
{% endcomment %}

{% if settings.enableCloudimage%}
 {% for i in (1..1) %}
   {% unless url or settings.cloudImageUrl != blank %}
     {% assign newSrc = url %}
     {% break %}
   {% endunless %}
   {% assign cdnUrls = settings.cloudimageShopifyCdnUrl | split: ',' %}
   {% if cdnUrls.size  == 0 %}
     {% assign newSrc = url %}
     {% break %}
   {% endif %}
   {% assign cdnUrl = cdnUrls[0] %}
   {% for temp in cdnUrls %}
     {% if url contains temp %}
       {% assign cdnUrl = temp %}
       {% break %}
     {% endif %}
   {% endfor %}
 {% assign cdnUrl = cdnUrl | strip %}
 {% unless url contains cdnUrl %}
     {% assign newSrc = url %}
     {% break %}
   {% endunless %}
   {% assign cloudImageUrl = settings.cloudImageUrl | strip %}
   {% assign tempCloudImageUrl = cloudImageUrl %}
   {% assign lastChar = cloudImageUrl | slice:-1 %}
   {% assign cloudImageUrlLength = cloudImageUrl | size %}
   {% assign newCloudImageUrl = cloudImageUrlLength | minus:1 %}
   {% if lastChar == "/" %}
     {% assign tempCloudImageUrl = cloudImageUrl | slice:0,newCloudImageUrl %}
   {% endif %}
 {% assign newSrc = url | strip | replace:cdnUrl,tempCloudImageUrl | append: '&func=proxy' %}
 {% endfor %}
{% else %}
  {% assign newSrc = url %}
{% endif %}

{%- if controls -%}
  {% assign videoControls = 'controls="controls"' %}
{%- else -%}
  {% assign videoControls = "" %}
{%- endif -%}

{%- if autoplay -%}
  {% assign videoAutoplay = 'autoplay="autoplay"' %}
{%- else -%}
  {% assign videoAutoplay = "" %}
{%- endif -%}

{%- if muted -%}
  {% assign videoMuted = 'muted="muted"' %}
{%- else -%}
  {% assign videoMuted = "" %}
{%- endif -%}

<video playsinline="playsinline" {{ videoControls }} {{ videoAutoplay }} {{ videoMuted }}>
  <source src="{{ newSrc }}" type="video/mp4">
</video>
```

## Step 5. Enable Cloudimage <a href="#od_62a9caec" id="od_62a9caec"></a>

Navigate to **Online store > Themes > Customize theme**. In the sidebar, under **Theme Settings** open **Cloudimage** and enable it. Fill out the below two fields:

* **Cloudimage Token** - It should be your Cloudimage Token
* **Default URL endpoint** - It should be `//{token}.cloudimg.io/`*`myshopify`* (where `token` is your Cloudimage token)
* **Shopify CDN domain** - Its value should be `//cdn2.shopify.com`, `//cdn.shopify.com`
* Hit the "Save" button.

<div><figure><img src="/files/0a8eQwpYAlVY0JMTfe1e" alt=""><figcaption></figcaption></figure> <figure><img src="/files/zbTRrwh3srRvkDGgZM3S" alt=""><figcaption></figcaption></figure></div>

## Step 6. Edit your theme files <a href="#od_8d36b33c" id="od_8d36b33c"></a>

The final step of this tutorial is to adapt your theme files to start delivering your images over Cloudimage.

{% hint style="info" %}
**Backup your theme files.** Before making changes in these files, it is recommended that you download and save them securely to be able to restore them later in case of error.
{% endhint %}

For more information, please see the [Theme files](/implementation/cms-plugins/shopify-tutorial/theme-files) and [FAQ](/implementation/cms-plugins/shopify-tutorial/faq) sections.


# Theme files

Shopify integration - theme files

You need to adapt your individual theme files for the image URLs to be changed to Cloudimage URLs. Identify first which theme files are used by your shop and edit them one by one as detailled below.

{% hint style="info" %}
**Backup your theme files.** Before making changes in these files, it is recommended that you download and save them securely to be able to restore them later in case of error.
{% endhint %}

Here are a couple of examples indicating the change that needs to be made in the theme files. You can follow similar steps to change all of your theme files.\
List of some files that need to be changed (files may vary between themes):

* featured-product.liquid
* product-template.liquid
* collection-grid-item.liquid
* Product-grid-item.liquid
* header.liquid
* video.liquid

As general what you need to do is:

* assign new variable inheriting the original theme image url
* replace the old image invocation with inclusion of cloudimage

## Example 1  <a href="#od_12118c90" id="od_12118c90"></a>

You can make the changes inside `product-template.liquid`.

#### Before:

```js
<img id="{{ img_id }}"
                class="product-single__photo lazyload{% unless featured_image == image %} lazypreload{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} lightbox{% endif %}"
                {% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024' }}"{% endif %}
                src="{{ image | img_url: '200x200' }}"
                data-src="{{ img_url }}"
                data-widths="[180, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
                data-aspectratio="{{ image.aspect_ratio }}"
                data-sizes="auto"
                alt="{{ image.alt | escape }}">
```

#### After:

```none
Explained changes:
We assign new variables for every URL usage from the original theme file (visible above)
using 
{% assign meaningfull_name = the_entire_value_used_in_the_original_request %}

For example: src="{{ image | img_url: '200x200' }}"
we create new variable that equals the old src "image | img_url: '200x200'" 
{% assign old_img_src = image | img_url: '200x200' %}

Now we replace the src="{{ image | img_url: '200x200' }}" with src="{% include 'cloudimage' src:old_img_src %}"
Where wi replace the old value with {% include 'cloudimage' src:the_meaningful_name_we_assign_before_that %}-

This way we get the chance to switch between the original image path and the optimised one by using the implemented Cloudimage enable/disable option
Now we need to perform this change in all files that deliver image URLs being src, data-src, background-image, zoom-image
```

```js
{% assign old_img_src = image | img_url: '200x200' %}
{% assign old_img_data_src = img_url %}
{% assign old_img_data_zoom = image | img_url: '1024x1024' %}

        <img id="{{ img_id }}"
             class="product-single__photo lazyload{% unless featured_image == image %} lazypreload{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} lightbox{% endif %}"
             {% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{% include 'cloudimage' src:old_img_data_zoom %}"{% endif %}
             src="{% include 'cloudimage' src:old_img_src %}"
             data-src="{% include 'cloudimage' src:old_img_data_src %}"
             data-widths="[180, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
             data-aspectratio="{{ image.aspect_ratio }}"
             data-sizes="auto"
             alt="{{ image.alt | escape }}">
```

## Example 2 <a href="#od_0bff7abb" id="od_0bff7abb"></a>

#### Before:

```js
<noscript>
 <img src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}">
</noscript>
```

#### After:

```js
<noscript>
 {% assign old_img_url = featured_image | img_url: 'grande' %}
 <img src="{% include 'cloudimage' src:old_img_url %}" alt="{{ featured_image.alt | escape }}">
</noscript>
```

## Example 3 <a href="#od_fd39ffd7" id="od_fd39ffd7"></a>

#### Before:

```js
<li class="grid__item {{ thumbnail_width }}">
 <a href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail" data-image-id="{{ image.id }}">
   <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
 </a>
</li>
```

#### After:

```js
<li class="grid__item {{ thumbnail_width }}">
 {% assign old_img_grande = image.src | img_url: 'grande' %}
 {% assign old_img_compact = image.src | img_url: 'compact' %}
 <a href="{% include 'cloudimage' src:old_img_grande %}" class="product-single__thumbnail" data-image-id="{{ image.id }}">
   <img src="{% include 'cloudimage' src:old_img_compact %}" alt="{{ image.alt | escape }}">
 </a>
</li>
```

## Example 4 <a href="#od_b7ddf435" id="od_b7ddf435"></a>

#### Before:

```js
{% if section.settings.product_image_zoom_type == 'lightbox' %}
 <ul class="gallery hidden">
   {% for image in product.images %}
     <li data-image-id="{{ image.id }}" class="gallery__item" data-mfp-src="{{ image | img_url: '2048x2048' }}"></li>
   {% endfor %}
 </ul>
```

#### After:

```js
{% if section.settings.product_image_zoom_type == 'lightbox' %}
  <ul class="gallery hidden">
    {% for image in product.images %}

    {% assign old_data-mfp-src = image | img_url: '2048x2048' %}
      <li data-image-id="{{ image.id }}" class="gallery__item" data-mfp-src="{% include 'cloudimage' src:old_data-mfp-src %}"></li>
    {% endfor %}
  </ul>
```

## Example 5 - with capture <a href="#od_eecd147c" id="od_eecd147c"></a>

If there is a tag inside image URL and you cannot simply assign it, use [capture](https://shopify.dev/docs/themes/liquid/reference/tags/variable-tags#capture)

#### Before:

```js
<img width="{{ image.width }}" height="{{ image.height }}" src="{{ image | img_url: '50x50' }}" class="lazyload attachment-shop_single size-shop_single sp-post-image" alt="{{image.alt}}" title="{{product.title}}"
data-src="{{ img_url }}"
data-large_image="{%-include 'gl_image_format',cache:true, src: image.src, size: product_image_photowipe -%}" data-large_image_width="{{ image.width }}" data-large_image_height="{{ image.height }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ image.aspect_ratio }}" data-sizes="auto">
```

#### After:

```js
{% assign old_img_src = image | img_url: '50x50' %}
{% assign old_img_data_src = img_url %}
{% capture old_img_data_large_image %}
{%-include 'gl_image_format',cache:true, src: image.src, size: product_image_photowipe -%}
{% endcapture %}
<img width="{{ image.width }}" height="{{ image.height }}" src="{% include 'cloudimage' src:old_img_src %}" class="lazyload attachment-shop_single size-shop_single sp-post-image" alt="{{image.alt}}" title="{{product.title}}"
data-src="{% include 'cloudimage' src:old_img_data_src %}"
data-large_image="{% include 'cloudimage' src:old_img_data_large_image %}" data-large_image_width="{{ image.width }}" data-large_image_height="{{ image.height }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ image.aspect_ratio }}" data-sizes="auto">
```

## Example 6 - Video <a href="#od_b7ddf435" id="od_b7ddf435"></a>

#### Before:

```js
{{ section.settings.video
  | video_tag:
    image_size: "1100x",
    autoplay: true,
    loop: section.settings.enable_video_looping,
    controls: true,
    muted: false
}}
```

#### After:

```js
{% assign old_video_url = section.settings.video.sources.first.url %}
{% render 'cloudimage-video-tag', image_size: "1100x", autoplay: true, loop: loop, controls: true, url: old_video_url, muted: false %}
```

You can also take a look at the [FAQ](/implementation/cms-plugins/shopify-tutorial/faq) section.


# FAQ

Shopify integration - frequently asked questions

**Can I disable Cloudimage with a single click?**

Yes you can enable and disable Cloudimage on your Shopify store with a single click. Navigate to **Online store > Themes > Customize theme**. In the sidebar, under general settings open Cloudimage.io and enable/disable it.

<div><figure><img src="/files/YO1JVONZ3eAyIF54XKS2" alt=""><figcaption></figcaption></figure> <figure><img src="/files/60MogDPLEE9N6FjcK24H" alt=""><figcaption></figcaption></figure></div>

**Can Cloudimage automatically detect the right image dimension and load it?**

No Cloudimage only changes the base URL of your images because there is no way the server would have knowledge of your website layout. However, just by loading images through Cloudimage URL-endpoint, your images are automatically optimised for format and quality.

**How do I make sure my integration is working?**

Once you are done editing these files, save these files. Now refresh the webpage for your Shopify store and check the image URLs. They should now load from URLs beginning with `https://{token}.cloudimg.io/v7`. You can use the Chrome Developer Tools to check that all the images are being loaded via Cloudimage.io and that all images are loading correctly. If you find that images on a particular page or section are still being served from Shopify, then find out the responsible theme file and edit it as well.


# Wordpress

All-in-One Digital Asset Management and Cloudimage Media Optimization Plugin for WordPress

### Overview

**Scaleflex VXP** is a powerful WordPress plugin designed to help businesses efficiently manage and optimize their digital assets.\
Integrating two key features - **Scaleflex Digital Asset Management (DAM)** and **Cloudimage Digital Media Optimization (DMO)** - **Scaleflex VXP** enables you to store, organize, deliver, and optimize images, videos, and other digital resources directly within WordPress.

* **DAM (Digital Asset Management):** Seamlessly organize, search, and control all your digital assets, ensuring brand consistency and boosting team collaboration.
* **Cloudimage (Digital Media Optimization):** Automatically optimize images and videos for size and loading speed, enhancing user experience and improving website performance.

With the **Scaleflex VXP plugin for WordPress**, you don’t just store, you take full control of your assets.\
Experience a streamlined, modern, and scalable digital content management workflow today!

Install the plugin from your WordPress admin or from the [WP Marketplace](https://wordpress.org/plugins/scaleflex-vxp-dam-dmo/).

### Prerequisites  <a href="#od_6dc6f7bb" id="od_6dc6f7bb"></a>

Create an account if you have not registered already. You can create an account on the [Cloudimage registration page](https://www.cloudimage.io/registration).

### Installation

* Log in to your WordPress admin panel.
* On the Admin sidebar, navigate to Plugins > Add New.
* Enter "Scaleflex VXP" in the search field and then install the plugin.
* Once installed, click Activate.
* Navigate to the settings page.
* Select **"Cloudimage - Digital Media Optimization (DMO)"**.

<figure><img src="/files/vv519OUN4tYw0SBtVAcb" alt=""><figcaption></figcaption></figure>

* Fill in the plugin settings page with the required authentication details

<figure><img src="/files/sBFonZEUfi57Ia7Kwm3c" alt=""><figcaption></figcaption></figure>

### Configure the plugin <a href="#od_cec0c591" id="od_cec0c591"></a>

You need to enter your Cloudimage account token, which you have received upon account creation.

<figure><img src="/files/KadzEkNgTqds6jwEVOGE" alt=""><figcaption></figcaption></figure>

With **Cloudimage**, we will have two modes when using:

* **JavaScript Mode:** Replace image URLs with JavaScript
* **Standard Mode:** Replace image URLs not using any JavaScript

#### Configuration options <a href="#od_5c9f6cf1" id="od_5c9f6cf1"></a>

* **Remove V7**
  * Some tokens are associated with a v7 URL, while others are not.
  * But not to worry, this plugin automatically checks and sets it for you, all within a few seconds.
  * Eg: If you enter a v7 token into the text input field, then a few seconds later, the v7 dial will automatically turn itself on.
  * Please be patient and wait for the “The v7 checking process …” message to disappear before pressing the “SAVE ALL CHANGES“ button.

<figure><img src="/files/br297wOKkxmPyXnWZU3Q" alt=""><figcaption></figcaption></figure>

* **Prevent Image Upsize:** If you set Maximum "Pixel ratio" equal to 2, but some of your assets do not have min retina size (at least 2560x960), please enable this to prevent image resized. By default, yes.
* **Image Quality:** The smaller the value, the more your image will be compressed. Careful - the quality of the image will decrease as well. By default, 90.
* **Ignore SVG Image:** Ignore converting the SVG file to a CDN URL.
* **Skip classes:** HTML tags with the specified classes would be skipped. Separated by a comma (,)
* **Skip files:** Files with these extensions would be skipped. Separated by a comma (,)

### **Use Mode** <a href="#od_c02c2f97" id="od_c02c2f97"></a>

#### Without Cloudimage <a href="#od_01461c7d" id="od_01461c7d"></a>

Your image URL will be like this:

```html
<img 
  class="alignnone size-medium wp-image-437" 
  src="http://wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats-201x300.jpeg" 
  alt="" 
  width="201" 
  height="300" 
  srcset="https://wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats-201x300.jpeg 201w, 
          https://wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats-600x894.jpeg 600w, 
          https://wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg 644w" 
  sizes="(max-width: 201px) 100vw, 201px"
>
```

#### With Cloudimage <a href="#od_99fc08ce" id="od_99fc08ce"></a>

```html
<img 
  class="alignnone size-medium wp-image-440" 
  src="https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?func=bound&amp;w=300&amp;h=300" 
  alt="" 
  width="300" 
  height="300" 
  srcset="https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=150 150w, 
          https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=450 450w, 
          https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=100 100w
  sizes="(max-width: 300px) 100vw, 300px"
>
```

Notice that the URLs have been appended  `https://token.cloudimg.io/` to ensure CDN delivery and optimization of images.

#### With Cloudimage and Use Mode as "JavaScript Mode" <a href="#od_a9b4bc88" id="od_a9b4bc88"></a>

```html
<img 
  class="alignnone size-medium wp-image-440 ci-image ci-image-loaded lazyloaded" 
  ci-src="https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?func=bound&amp;w=300&amp;h=300" 
  alt="" 
  data-srcset="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&amp;org_if_sml=1&amp;func=bound 1x, 
               https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=450&amp;org_if_sml=1&amp;func=bound 1.5x, 
               https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=600&amp;org_if_sml=1&amp;func=bound 2x" 
  data-src="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&amp;org_if_sml=1&amp;func=bound" 
  srcset="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&amp;org_if_sml=1&amp;func=bound 1x, 
          https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=450&amp;org_if_sml=1&amp;func=bound 1.5x, 
          https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=600&amp;org_if_sml=1&amp;func=bound 2x" 
  src="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&amp;org_if_sml=1&amp;func=bound"
>
```

**Cloudimage** will:

* The `ci-src`(<https://github.com/scaleflex/js-cloudimage-responsive#step-3-implement-in-an-img-tag-or-use-it-as-a-background-image>) attribute will be added to the`img`element, which will
  * generate `data-srcset`
  * set resize
  * lazy loading <https://github.com/scaleflex/js-cloudimage-responsive#lazyloading>

#### With Cloudimage and Use Mode is "Standard Mode" <a href="#od_a9b4bc88" id="od_a9b4bc88"></a>

<figure><img src="/files/6mPRimeFpuSFVAcjjT5r" alt=""><figcaption></figcaption></figure>

Cloudimage will change the attribute "src" in the img tag without JavaScript&#x20;

#### When to use JavaScript Mode and when it’s better not to use <a href="#od_36853a95" id="od_36853a95"></a>

<figure><img src="/files/IS05izDZbSTURtM77c2s" alt=""><figcaption></figcaption></figure>

### Localhost <a href="#od_a5ebc4d2" id="od_a5ebc4d2"></a>

Please note that **Scaleflex VXP - Cloudimage** will not take effect on localhost

### Advanced Configuration <a href="#od_5e983168" id="od_5e983168"></a>

#### Standard Mode <a href="#od_5e983168" id="od_5e983168"></a>

* **URL Signature:** To prevent URL tampering and protect your token, every Cloudimage URL can be secured with an SHA-1 HMAC signature. Read more [here](https://docs.cloudimage.io/setup/security/token-security/url-signature).
* **Enable srcset adding:** Adding srcset for the img tag. By default, this mode will remove the srcset
* **Srcset widths (px):** The widths in pixels that would be generated for the srcset tag if the srcset adding option is enabled. Separated by a comma (,)

#### JavaScript mode <a href="#od_ae33934a" id="od_ae33934a"></a>

* **Local JavaScript libraries:**&#x20;
  * ON: Use Cloudimage JS files from CDN
  * OFF: Use Cloudimage JS files from the plugin locally
* **Use Origin URL:** If enabled, the plugin will only add query parameters to the image source URL, avoiding double CDN in some cases, like if you have aliases configured.
* **Lazy Loading:** If enabled, only images close to the current viewpoint will be loaded.
* **Maximum "Pixel Ratio":** List of supported device pixel ratios, eg 2 for Retina devices.
* **Image Size Attributes:** Used to calculate the width and height of images.
* **Custom JavaScript function:** A valid JavaScript function starting with { and finishing with }.
* **Custom library options:** Automatically adds Cloudimage parameters for all images, e.g. watermark=1 to put a watermark on all images. The list of all available parameters can be found on [docs.cloudimage.io](http://docs.cloudimage.io/)


# Wordpress

Cloudimage Wordpress Plugin

The [Cloudimage Wordpress plugin](https://wordpress.org/plugins/cloudimage/) will automatically adapt the image URLs in your Wordpress site to deliver your images rocket fast over Cloudimage. You only need to register with Cloudimage and install the plugin in your Wordpress site.

If you need to adjust the behaviour of the plugin, please see the [#od\_5e983168](#od_5e983168 "mention") settings.

## Installation <a href="#od_6dc6f7bb" id="od_6dc6f7bb"></a>

### Prerequisites  <a href="#od_6dc6f7bb" id="od_6dc6f7bb"></a>

Create an account if you have not registered already. You can create an account on the [Cloudimage registration page](https://www.cloudimage.io/registration).\ <br>

<figure><img src="/files/sjtFHStNjLmnYjWgvvAt" alt=""><figcaption></figcaption></figure>

### Step 1. Install the plugin <a href="#od_dc248770" id="od_dc248770"></a>

#### Log in to your Wordpress admin panel <a href="#od_dc248770" id="od_dc248770"></a>

<figure><img src="/files/vcecrRF4dwFVP0ZZTisO" alt=""><figcaption></figcaption></figure>

#### In the Admin sidebar, navigate to *Plugins / Add New* <a href="#od_89cff714" id="od_89cff714"></a>

<figure><img src="/files/Xmynb1XT0M7cDBLVJTMh" alt=""><figcaption></figcaption></figure>

#### Search for "Cloudimage" in the search field and then install our plugin <a href="#od_576cb33c" id="od_576cb33c"></a>

<figure><img src="/files/DL2eD8FAE0Avz9tB6gpd" alt=""><figcaption></figcaption></figure>

### Step 2. Activate the installed plugin <a href="#od_8bbe90c1" id="od_8bbe90c1"></a>

<figure><img src="/files/eH9JYMb2YdaP7GA8QRRA" alt=""><figcaption></figcaption></figure>

### Configure the plugin <a href="#od_cec0c591" id="od_cec0c591"></a>

#### Navigate to the Cloudimage admin page <a href="#od_cec0c591" id="od_cec0c591"></a>

<figure><img src="/files/zAWWPhTTrgAOYDyumTMR" alt=""><figcaption></figcaption></figure>

You need to enter your Cloudimage account token which you have received upon account creation (step 1).\ <br>

<figure><img src="/files/2Tn2QZskZxV3qsAuq0Jy" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/exqGTUgdOPy5FYrhNrfQ" alt=""><figcaption></figcaption></figure>

#### Configration options <a href="#od_5c9f6cf1" id="od_5c9f6cf1"></a>

The v7 option\ <br>

<figure><img src="/files/UiOG2RYhkilYbDm1NVw1" alt=""><figcaption></figcaption></figure>

* Some tokens are associated with a v7 URL, while others are not.
* But not to worry, this plugin automatically checks and sets it for you, all within a few seconds.
* Eg: If you enter a v7 token into the text input field, then a few seconds later, the v7 dial will automatically turn itself on.
* Please be patient and wait for the “The v7 checking process …” message to disappear, before pressing the “SAVE ALL CHANGES“ button.

### The JS Mode option <a href="#od_c02c2f97" id="od_c02c2f97"></a>

#### Without Cloudimage <a href="#od_01461c7d" id="od_01461c7d"></a>

Your image URL will be like this:

```html
<img 
  class="alignnone size-medium wp-image-437" 
  src="http://wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats-201x300.jpeg" 
  alt="" 
  width="201" 
  height="300" 
  srcset="https://wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats-201x300.jpeg 201w, 
          https://wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats-600x894.jpeg 600w, 
          https://wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg 644w" 
  sizes="(max-width: 201px) 100vw, 201px"
>
```

#### With Cloudimage <a href="#od_99fc08ce" id="od_99fc08ce"></a>

```html
<img 
  class="alignnone size-medium wp-image-440" 
  src="https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?func=bound&amp;w=300&amp;h=300" 
  alt="" 
  width="300" 
  height="300" 
  srcset="https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=150 150w, 
          https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=450 450w, 
          https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=100 100w
  sizes="(max-width: 300px) 100vw, 300px"
>
```

* Notice that the URLs has been appended with `https://token.cloudimg.io/` to ensure CDN delivery and optimization of images.

#### With Cloudimage and its JavaScript Mode turned on <a href="#od_a9b4bc88" id="od_a9b4bc88"></a>

<figure><img src="/files/la0ZjURnIT8AUuGVOVJk" alt=""><figcaption></figcaption></figure>

```html
<img 
  class="alignnone size-medium wp-image-440 ci-image ci-image-loaded lazyloaded" 
  ci-src="https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?func=bound&amp;w=300&amp;h=300" 
  alt="" 
  data-srcset="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&amp;org_if_sml=1&amp;func=bound 1x, 
               https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=450&amp;org_if_sml=1&amp;func=bound 1.5x, 
               https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=600&amp;org_if_sml=1&amp;func=bound 2x" 
  data-src="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&amp;org_if_sml=1&amp;func=bound" 
  srcset="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&amp;org_if_sml=1&amp;func=bound 1x, 
          https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=450&amp;org_if_sml=1&amp;func=bound 1.5x, 
          https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=600&amp;org_if_sml=1&amp;func=bound 2x" 
  src="https://token.cloudimg.io/https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=300&amp;org_if_sml=1&amp;func=bound"
>
```

With JS Mode turned on, Cloudimage will:

* the `ci-src`(<https://github.com/scaleflex/js-cloudimage-responsive#step-3-implement-in-an-img-tag-or-use-it-as-a-background-image>) attribute will be added into the`img`element, which will
  * generate `data-srcset`
  * set resize
  * lazy loading <https://github.com/scaleflex/js-cloudimage-responsive#lazyloading>

#### With JS Mode off and these `srcset`standard settings <a href="#od_0dd55484" id="od_0dd55484"></a>

<figure><img src="/files/QDzNY4h4ljb1Nrbcn40w" alt=""><figcaption></figcaption></figure>

```




theme-light<img 
  class="alignnone size-medium wp-image-440" 
  src="https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?func=bound&amp;w=300&amp;h=300" 
  alt="" 
  width="300" 
  height="300" 
  srcset="https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=150 150w, 
          https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=450 450w, 
          https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=100 100w, 
          https://token.cloudimg.io/wp.sandbox.sfxconnector.com/wp-content/uploads/catswillbecats.jpeg?w=666 666w"
  sizes="(max-width: 300px) 100vw, 300px"
>
```

* Notice the 666 in the `srcset`

#### When to use JS Mode and when it’s better not used <a href="#od_36853a95" id="od_36853a95"></a>

<figure><img src="/files/IS05izDZbSTURtM77c2s" alt=""><figcaption></figcaption></figure>

### The login option <a href="#od_1c90d423" id="od_1c90d423"></a>

With this turned on, Cloudimage will only take effect when the user is logged in

### Localhost <a href="#od_a5ebc4d2" id="od_a5ebc4d2"></a>

Please note that Cloudimage will not take effect on localhosts

### Advanced Configuration <a href="#od_5e983168" id="od_5e983168"></a>

#### Global <a href="#od_5e983168" id="od_5e983168"></a>

**Disable image downsize filter**

ON: disable WordPress’s default image-cropping functionality

#### Standard Mode <a href="#od_5e983168" id="od_5e983168"></a>

**Enable `srcset` adding**

If this is turned off, then “Srcset widths“ will have no effect.

#### `srcset` widths (px) <a href="#od_5e983168" id="od_5e983168"></a>

Add more sizes to `srcset`

#### Replaceable text <a href="#od_5e983168" id="od_5e983168"></a>

**For example**\
Cloudimage URL: `token.cloudimg.io/mywebsite/wp-uploads/2020/image.png` Replaceable text: `wp-uploads/2020` Replacement text: `upload`

**Then** from frontend users will see the image URL as: `token.cloudimg.io/mywebsite/upload/image.png`

**But** we need to configure [Aliases](/setup/shortening-urls/aliases) in Cloudimage admin and set up the alias `upload` with value `wp-uploads/2020`

#### Replacement text <a href="#od_8ee4bc36" id="od_8ee4bc36"></a>

(See above)

### JavaScript mode <a href="#od_ae33934a" id="od_ae33934a"></a>

#### Skip classes <a href="#od_45d4ca2e" id="od_45d4ca2e"></a>

Exclude Cloudimage processing by class name

#### Skip files <a href="#od_42230342" id="od_42230342"></a>

Exclude Cloudimage processing by file type, eg “.gif“

#### Use WordPress filter method <a href="#od_66b4fb31" id="od_66b4fb31"></a>

OFF: use `ob_buffer` PHP function

ON: use `the_content` filter from WordPress.

#### Local JavaScript libraries <a href="#od_f6649e7a" id="od_f6649e7a"></a>

ON: use Cloudimage JS files from CDN

OFF: use Cloudimage JS files from plugin locally

#### Ignore image node size <a href="#od_f63583d4" id="od_f63583d4"></a>

Can become helpful to turn on when using non-standard WordPress themes. Especially for badly-made themes, to compensate for some adverse impact on images.

#### Save image node ratio <a href="#od_fba2e1dd" id="od_fba2e1dd"></a>

Enable **Save Image Node Ratio** to preserve the aspect ratio.

Turn on **Ignore Image Node Size** to bypass the incorrect `width` and `height` attributes.

#### Destroy node image size <a href="#od_4a7b96e7" id="od_4a7b96e7"></a>

Optionally, use **Destroy Node Image Size** if you want to completely remove size attributes from the image tags.

#### Detect image node css <a href="#od_4de6bfff" id="od_4de6bfff"></a>

Use **Detect Image Node CSS** if the theme's CSS is involved in setting these incorrect sizes.

#### Process only width <a href="#od_7ad438e9" id="od_7ad438e9"></a>

This setting ensures that only the width is considered for image processing, and the height is adjusted proportionally to maintain the aspect ratio.

#### Disable `setTimeout` checks <a href="#od_902b76e3" id="od_902b76e3"></a>

Better to turn this on when there are AJAX loaded images, so that the late-loaded images don’t miss out on Cloudimage processing


# Migrating from another image CDN

Migrating from another Image CDN

If your are transferring your image optimisation and CDN service from another provider, Cloudimage provides an easy way to migrate your images without code changes.

By migrating to Cloudimage, your images will need to be downloaded from their origin and cached by Cloudimage. Make sure your origin is able to process the initial load or [contact us](https://www.cloudimage.io/en/contact-us) to perform a warm-up.

<figure><img src="/files/BDwSZRIpQmqkoPCjF65L" alt=""><figcaption></figcaption></figure>

## Case 1: not using a custom CNAME <a href="#od_7ae4151e" id="od_7ae4151e"></a>

### **Example 1**

If your image is currently delivered via:

```js
<img src="https://yourdomain.provider.com/{image_url_or_path}?operations&filters" />
```

Then you need to replace the FQDN from `yourdomain.provider.com` to `token.cloudimg.io/` for the `<img src>` to become:

```js
<img src="https://token.cloudimg.io/{image_url_or_path}?operations&filters" />
```

### **Example 2**

If your image is currently available at [http://token.provider/operations/sample.li/flat.jpg](http://sample.li/flat.jpg) and referenced in your code as:

```js
<src="http://img.provider.com/{token}/{operations}|{filters}/{path_fo_folder}/flat.jpg" />
```

Then you need to adapt it to be:

```js
<src="https://token.cloudimg.io/v7m/{operations}|{filters}/{path_fo_folder}/flat.jpg" />
```

Where:

* **token**: your Cloudimage token you obtain after registering for a Cloudimage account
* **operations**: the resizing operation(s) as listed under [Image operations](/transformations/image-operations)
* **filters**: the filter transformation(s) as listed under [Image filters](/transformations/image-filters)

## Case 2: using a custom CNAME <a href="#od_944d4986" id="od_944d4986"></a>

### **Example 1**

If your image is currently delivered via:

```js
<img src="https://img.domain.com/{image_url_or_path}?operations&filters" />
```

### **Example 2**

If your image is currently delivered via:

```js
<src="http://img.domain.com/{token}/{operations}|{filters}/{path_fo_folder}/flat.jpg" />
```

In both scenarios, migrating to Cloudimage only requires the change of your CNAME record for img.domain.com on your DNS provider.

Where:

* **token**: your Cloudimage token you obtain after registering for a Cloudimage account
* **operations**: the resizing operation(s) as listed under [Image operations](/transformations/image-operations)
* **filters**: the filter transformation(s) as listed under [Image filters](/transformations/image-filters)

Cloudimage supports multiple image transformations format, [contact us](https://www.cloudimage.io/en/contact-us) to discuss your migration project.


# CDN basics

Cloudimage caching and invalidation

Cloudimage leverages Content Delivery Networks to accelerate the delivery of your images worldwide. We work with multiple CDN providers to optimise the delivery of your images and provide superb reliability.

In addition to accelerating your images, the CDN provides DDoS (Distributed Denial of Service) protection, which will act as a shield to your servers and avoid any downtime.

CDNs cache images for faster delivery. They usually keep assets cached as long as it is stated in [the caching directive](/caching-and-acceleration/caching-interval#od_1979b79e).\
When the original image changes, the CDN won’t automatically detect that, so you need to either change the image URL or invalidate the cached version.

## Invalidation <a href="#od_7ca0ab90" id="od_7ca0ab90"></a>

To refresh your images, you can either update the Cloudimage URL or invalidate them to flush them from the resizing servers and the CDN.

### Option 1: add version parameter to the origin URL to force the CDN to download the new image <a href="#od_7f43aaf9" id="od_7f43aaf9"></a>

Old image:

//<mark style="color:blue;">**doc**</mark>.cloudimg.io/<mark style="color:red;">**sample.li/flat.jpg**</mark>?<mark style="color:orange;">**w=500**</mark>

New image:

//<mark style="color:blue;">**doc**</mark>.cloudimg.io/<mark style="color:red;">**sample.li/flat.jpg**</mark>?<mark style="color:orange;">**w=500**</mark>&**vh=xx**  (where **'xx'** represent random numbers)

{% hint style="info" %}
The `vh` parameter with any random value makes the URL unique and forces a cache refresh.
{% endhint %}

### Option 2: invalidate images from the Admin panel <a href="#od_9ed1870b" id="od_9ed1870b"></a>

If you cannot change the image URLs when changing the origin image, you can still invalidate (flush) the image from the Cloudimage admin console. Log in to the console and navigate to *Invalidation,* or go to this page - <https://admin.cloudimage.io/project/invalidation>&#x20;

First, you need to select the scope of the Invalidation:

* ***Original*** -> targets specific image URLs. Enter up to 10 URLs, separated by commas or line breaks.
* ***All*** -> this option will erase the entire cache generated for your token. Please use it with caution, because after invalidation, the cache needs to be rebuilt, and your first requests would take more time for execution.&#x20;

Do not use the full path of your image but only the **origin\_image\_url** part as invalidation path. \
For example, to invalidate `doc.cloudimg.io/sample.li/flat1.jpg?w=500`, you need to input `/sample.li/flat1.jpg`.

:green\_circle: Correct format for invalidation:  `/sample.li/flat1.jpg`\
:red\_circle: Incorrect formats for invalidation:\
`/sample.li/flat1.jpg?w=500`\
`doc.cloudimg.io/sample.li/flat1.jpg`\
`doc.cloudimg.io/sample.li/flat1.jpg?w=500`

<figure><img src="/files/FeCUSRtJHoeesYzqhdm5" alt=""><figcaption></figcaption></figure>

This will remove the image(s) from all CDN nodes and Cloudimage resizing servers.

When the Invalidation request is submitted, it appears in the Invalidation log. Both manual and [automatic invalidations](/caching-and-acceleration/invalidation-api) are logged there.

#### Details of the Invalidation Log

Every request has the following parameters:

* Status - the status of the request:
  * **Received** - request received successfully
  * **Preparing** - the Invalidation server prepares the request for execution
  * **Flushing Scaleflex servers** - deleting the cache in the resizing servers
  * **Flushing CDN servers** - deleting the cache of the CDN servers
  * **Done** - the invalidation finished successfully
  * **ERROR\_CDN\_NODE** - error in the CDN invalidation step
  * **ERROR** - general error in some of the invalidation steps

{% hint style="info" %}
If you encounter ERROR or ERROR\_CDN\_NODE, click **Retry** or [contact support](https://scaleflex.zendesk.com/hc/en-gb/requests/new). Please include the **Invalidation ID** in your message.
{% endhint %}

* Scope - the scope of the request (original / all)
* Date - the datetime when the request has been submitted for execution. The value is in the local time zone.
* Invalidation ID - the unique identifier of the request.&#x20;
* Invalidation path - if you click on "See links", you can inspect which URLs have been requested for invalidation (applicable for the invalidations with scope "original")
* Retry - resend the invalidation request if it failed.

Click the **Refresh** button to reload the invalidation log and view the latest updates.

### Option 3: use the Invalidation REST API <a href="#od_e63cfd84" id="od_e63cfd84"></a>

You can also automate invalidations by calling the [Invalidation API](/caching-and-acceleration/invalidation-api). This is useful for developers managing large-scale projects or CI/CD workflows.


# Caching interval

Token and image caching

## Token caching settings <a href="#od_1979b79e" id="od_1979b79e"></a>

CDN caching accelerates the loading times of images as it allows to host them as close as possible to your end users. By using CDN caching, your ensure maximum performance of your website. You can define the `max-age` and `s-maxage` attributes in the Cache-Control HTTP Header of images delivered by Cloudimage to control the caching behavior.

When this cache expired, the image will be requested from the origin and the new image delivered to the client. Reduce the default values if you have rotating images but static image URLs without versioning.

We recommend using [CDN basics](/caching-and-acceleration/cdn-basics#od_7ca0ab90) if you need to refresh your images as it will not impact your CDN cache-hit ratio.

| Directive  | Description                                                                                                                                                                                                                                                                 |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `max-age`  | <p>The time in seconds that the image is allowed to be re-used.<br>For instance, <code>max-age=36000</code> indicates that an image remains in the browser cache for the next 36 000 seconds (10 hours).</p>                                                                |
| `s-maxage` | <p>This directive applies only to the caching in CDN. To maximise performance,<br>we recommend you set a high value here and perform <a data-mention href="/pages/fs2uP3zPdZGa8Nl0BEOq#od_7ca0ab90">/pages/fs2uP3zPdZGa8Nl0BEOq#od\_7ca0ab90</a> on images when needed.</p> |

If you have rotating origin images but do not change the name, you need to follow the chart:

<figure><img src="/files/NBg6mgbKrX125yJBgHRz" alt=""><figcaption></figcaption></figure>

### Setting default cache <a href="#od_fc6b7d38" id="od_fc6b7d38"></a>

You can see the values in your admin console, under *Image Settings* -> *Caching*.

<figure><img src="/files/ksnvwGEUOLxYKTkyhgSg" alt=""><figcaption></figcaption></figure>

## Image caching settings <a href="#od_af320880" id="od_af320880"></a>

We can define the caching interval of a specific image by setting the **ci\_cache=X** URL parameter of the image where **X** is the interval in seconds.

[/sample.li/now.php?**ci\_cache=10**](https://doc.cloudimg.io/sample.li/now.php?ci_cache=10&)

This will override the `max-age` and `s-maxage` attributes only for this image.

{% hint style="info" %}
In order to change those settings, please contact our support.
{% endhint %}

### **Automatic origin image refresh**

<figure><img src="/files/lsZoobBLtnFZA1nKRinD" alt=""><figcaption></figcaption></figure>

If you need to use a very small caching interval for a specific image (for example, snapshots from a live webcam or a specific chart with dynamically changing contents), you need to change the *Automatic origin image refresh* setting in your Admin console. This tells our resizing servers to update all origin images after this interval has expired.




---

[Next Page](/llms-full.txt/1)