Operations

Cloudimage will solve your challenges with image resizing, transformation and acceleration in the Cloud.

You don't want to spend hours Photoshopping images for the web? Images slow down your website and mobile apps? You don't want to write complex image resizing automation scripts? You are looking for Responsive Images As A Service? This is the right place for you:

We have documented the most common resizing functions here. Cloudimage supports many more, but we want to focus on what is really necessary for you to get started. If you have any request for undocumented features, contact us and we will help you!

The basics

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

//token.cloudimg.io/operation/size/filter/original_image_url

  • token: your Cloudimage customer token. Subscribe for a free trial to get one. You can also ask us for a custom token.
  • operation: cdn, width, height, crop, cover, fit, bound, crop_px
  • size: specifies the size of the target image. If you use an operation not requiring a size, then use a placeholder like none or n
  • filter: parameters like fcontrast, fpixelate, fgaussian, backtransparent to apply filters on your image
  • origin_image_url: that's an easy one :)

Cloudimage's resizing servers, located in 3 data centers worldwide (Canada, France and Singapore) will download your origin image from origin_image_url, transform it based on the operation, size and filter parameters and finally display it on your website or mobile app through a rocket fast CDN.

An example with an origin image hosted on your web server, Amazon S3 bucket or any other storage accessible over HTTP.

If you host your images on a Web Server, Image Repository or Storage Bucket sitting behind a Firewall, make sure your images are accessible over HTTP or HTTPS. Otherwise, Cloudimage servers will not be able to download the origins.

Examples

Origin Image URL: //sample.li/paris.jpg

Greyscale thumbnail: //demo.cloudimg.io/width/300/fgrey/sample.li/paris.jpg

Cropped image without greyscale: //demo.cloudimg.io/crop/500x300/n/sample.li/paris.jpg

Watermarked image: //demo.cloudimg.io/width/500/fwk.wpossoutheast.wscale40.wpad10.frey/sample.li/paris.jpg

All these images are delivered by default over the 200 Points of Presence (PoPs) of our CDN and will load rocket fast worldwide. The purpose of this documentation is to explain all available parameters.

Let's start with the operation and size attributes

cdn: delivers the image via CDN without any resize or filter


width: resizes the image to 200px width, keeps proportions and delivers the resulting image via CDN


height: resizes the image to 150px height, keep proportions and delivers the resulting image via CDN


crop: generates an image with given size, crops centrally and delivers the resulting image via CDN


cover: resizes the image to specified width x height without keeping proportions and delvers the resulting image via CDN


fit: resizes the image to fit into specified width x height box, adds coloured padding to keep proportions and delivers the resulting image via CDN


bound: resizes to a given width x height box, keeps proportions. Similar to fit but without padding. Delivers the resulting image via CDN

Positionable crop

The crop_px operation allows you to define the crop zone and not necessary use the center of the image as center of the crop zone. It is extremely useful when you want to crop a specific part of the image, like for example a face for a profile picture. The size parameter is composed of 2 parts: x1, y1, x2, y2 and -final_size.

The first part x1, y1, x2, y2 are the top-left and bottom-right coordinates of crop rectangle. For example (0, 0, 500, 500) will crop the top-left 500 x 500px square. The second part -final_size specifies the size (width x height) of the resulting cropped image. Basically, after cropping the image according to (0, 0, 500, 500), Cloudimage will resize it to final_size px width and keep proportions. If you fit the cropped image into a box of width x height, similar to the cover operation, you can use width x height, for example: -200x300.

A great example with our Korean friends below:

alt text

Smart cropping

We support additional cropping functions like automatic face or number plate detection and cropping. Contact us to set it up with the help of one of our technical support engineers as our experience shows that these functions require fine tuning. Our help comes for free, so do not shy away to ask for it.

Operations matrix

The following table summarizes each operation . Note that the cover operation does not keep the image's proportions and both crop and crop_px remove parts of the image.

dimensions required in sizesame proportion
as origin image?
resulting image
is the full image?
padding is added?
cdn1yesyesno
width1yesyesno
height1yesyesno
crop2nonono
cover2noyesno
fit2yesyesyes
bound2yesyesno
crop_px2not necessarynono

Our experience with customers showed us that these operations are enough to cover more than 95% of image resizing and optimization use cases. If you believe you need any other operations, don't run away and contact our support team to ask for them.

Need to transform your image into greyscale or trim it? The next section about filters is the next step for you.