# Image 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](https://docs.cloudimage.io/transformations/image-filters "mention") allow to modify the image itself. 

Most of the on-the-fly image transformations can be configured using the [Asset Variation Builder](https://docs.cloudimage.io/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="image-operations/width-and-height">width-and-height</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="image-operations/width-and-height">width-and-height</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="image-operations/prevent-enlargement">prevent-enlargement</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="image-operations/crop">crop</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="image-operations/crop/positionable-crop">positionable-crop</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="image-operations/crop/face-crop">face-crop</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="image-operations/fit">fit</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="image-operations/cropfit">cropfit</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="image-operations/bound">bound</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="image-operations/boundmin">boundmin</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="image-operations/cover">cover</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="image-operations/flip">flip</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="image-operations/rotate">rotate</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="image-operations/trim">trim</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="image-operations/rounded-corners">rounded-corners</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="image-operations/background-removal">background-removal</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](https://docs.cloudimage.io/transformations/image-operations/crop "mention")

{% 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                                                                                                                                              |
| -------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/0h7dWuUgowInwOapWkjR/image.png) | [/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](https://docs.cloudimage.io/transformations/image-operations/fit "mention")

| Preview                                                                                            | Syntax                                                                                                                                                                                                                                                                                                                                  |
| -------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/yNHheSLfLeKVDuVwtqH0/image.png) | [/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](https://docs.cloudimage.io/transformations/image-operations/cropfit "mention")

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

| Preview                                                                                            | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/UpY1Tx8ReMnuOBdbNbeC/image.png) | <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>                                                                                                                                                                                                                         |
| ![](https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/TMR3pD9lfLKPalnP0CRJ/image.png) | <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](https://docs.cloudimage.io/transformations/image-operations/bound "mention")

| Preview                                                                                            | Syntax                                                                                                                                                                                                                                                                   |
| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/r71L0F0qUc5UVaL4f72t/image.png) | [/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](https://docs.cloudimage.io/transformations/image-operations/boundmin "mention")
{% endhint %}

### Cover

Resizes the image to the given **width** and **height**, ignoring original image proportions, thus distorting the image; see [cover](https://docs.cloudimage.io/transformations/image-operations/cover "mention")

| Preview                                                                                            | Syntax                                                                                                                                                                                                                                                                   |
| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/vaXLBsJoKBvpSTEVjdRh/image.png) | [/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 %}