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:

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

func=crop

Examples

Gravity

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

gravity=X

Available gravity values

Examples

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

org_if_sml=1

Examples

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

width | w

height | h

Examples

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

tl_px=X1,Y1

br_px=X2,Y2 X=X1 Y=Y1

Examples

Origin image: /docs/kids.jpg

Combining positionable crop with resize modes

Positionable crop can be combined with all available resize functions - Width and height, Crop, Fit, Bound and Cover. This operation is performed after the positionable crop.

Examples

Images slow down your website and mobile apps? Don't want to spend hours Photoshopping images for the web? Don't want to write complex image resizing automation scripts? Looking for Responsive images JS plugin? You've come to the right place.

We have documented the most common resizing functions here. Cloudimage supports many more, please contact us if you don't find your luck!

Let's start with an example

Cloudimage supports the chaining of various transformations and filters to edit and deliver your images. You can also overlay watermarks and optimize the compression controlling the image format and quality while taking into account the user browser's supported formats. This helps you achieve the best loading speed for your website or web application.

Cloudimage URL format

Cloudimage's resizing servers, located in three data centers worldwide (Canada, France, and Singapore) will download your original image from an origin_image_url, transform it based on 50+ on-the-fly Image operations and Image filters parameters, and finally, display it on your website or mobile app through a rocket fast CDN.

Uploading images and videos

Cloudimage is not a media storage service but rather acts as a media proxy downloading the origin (pristine) images and videos from your server or any storage container (S3, Google Cloud Storage, Azure Blob, ...) and optimizing them on-the-fly.

This page documents Cloudimage's image and video transformations APIs. If you are looking for a solution to upload and manage your media assets in one single source-of-truth, checkout Scaleflex's Digital Asset Management (DAM) solution. Its documentation is available here.

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

func=face

Examples

Face margin

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

face_margin=X|W,H

Examples

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

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

func=facehide

Examples

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

aspect_ratio=AR | ar=AR

aspect_ratio=AR1,AR2 | ar=AR1,AR2

Crop and resize

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

Examples

Crop without resize

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

Examples

Aspect ratio range

You can 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

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 allow to modify the image itself.

Available operations

Resize functions

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

Cloudimage supports the following resize function (operation func):

Crop

Keeps image proportions, cutting the image to fit the defined width and height; see Crop

Fit

Resizes the image, keeping proportions and adding padding to satisfy the desired dimensions; see Fit

Cropfit

Performs either Cropor Fit based on image dimensions and transformation parameters; see Cropfit

Bound

Fits image in a box of defined size without adding padding; see Bound

Cover

Resizes the image to the given width and height, ignoring original image proportions, thus distorting the image; see Cover

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

gravity=smart

gravity=auto

gravity=face

Smart gravity

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

Examples

Automatic gravity (legacy)

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

Examples

Face gravity

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

Examples

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

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

gravity=X,Y

gravity=Xp,Yp|xc,yc

Examples

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

func=fit

The padding can be customized using the following additional operations:

Gravity

Examples

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

func=boundmin

Examples

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

func=bound

Examples

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.

dpr=X

Examples

Performs either Crop or 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.

func=cropfit

Examples

Using cropfit with trim

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

Examples

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

func=cover

Examples

Mirrors the image horizontally and/or vertically.

flip=h | flip=v | flip=hv

Examples

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

radius=X

Examples

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

bright=X

Examples

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

r=X

Examples

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

The parameter does not specify the amount of border or frame to trim but rather how aggressive the trim algorithm should be. A bigger value of the parameter (e.g. 25) 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.

trim=X

Examples

bg_remove=1

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.

Examples

Feel free to try the background removal algorithm with your own images on our AI demo page.

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

Available filters

Combining filters

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

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

contrast=X

Examples

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

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

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

saturate=X

Examples

Desaturate

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

Examples

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, default1).

duotone=C1,C2[,Y]

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

gray=1 | grey=1

Examples

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

sepia=1

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

blur_faces=1[,R[,S]]

Examples

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.

sharp=X

Examples

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

invert=1

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

blur=X

Examples

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

pixelate=X | pixellate=X

Examples

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.

Multiple watermarks

Basic syntax

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

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

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

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

Multiple watermark types

Combining multiple watermark types is also possible.

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

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

Example

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

Examples

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

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

Step 1. Upload your watermark

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

Step 2. Start watermarking!

Available parameters

Use watermark

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

Watermark gravity

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

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

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

Examples

PNG format

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

Available parameters

Lossy PNG compression

While the PNG format offers lossy compression only, 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):

Examples

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.

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

Examples

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

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

process=minify-css process=minify-js

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

Examples

/sample.li/bootstrap.css?func=proxy&process=minify-css (152 kB minified vs. 192 kB original)

/sample.li/jquery.js?func=proxy&process=minify-js (111 kB minified vs. 219 kB original)

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

Available parameters

Examples

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.

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.

func=proxy

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:

/sample.li/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):

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.

Usage

Examples

doc_page=X

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, image filters, watermarking capabilities, and image compression formats. To convert a specific page of the PDF document, use the doc_page=X option:

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:

When you use:

//token.cloudimg.io/photos/paris.jpg?width=800

Cloudimage will search the origin image at the URL:

//hello.s3.aws.com/photos/paris.jpg

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

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

Step 1. Configure aliases

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