Operations

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

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 As A Service? You've come to the right place.

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 out!

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,cdno, 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, rotation to apply filters on your image
  • origin_image_url: that's an easy one :)

Cloudimage's resizing servers, located in three data centers worldwide (Canada, France, and Singapore) will download your original 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 original 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 originals.

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 basics

cdn/cdno: delivers the image via CDN without any filter or resizing


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 a given size, crops centrally, and delivers the resulting image via CDN


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


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


bound: resizes to a given width x height box and 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 without necessarily using the center of the image as the center of the crop zone. It is extremely useful when you want to crop a specific part of the image, like 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 and 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 don't hesitate to reach out.

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?Can we use filter?
cdn0yesyesnono
cdno0yesyesnoyes
width1yesyesnoyes
height1yesyesnoyes
crop2nononoyes
cover2noyesnoyes
fit2yesyesyesyes
bound2yesyesnoyes
crop_px2not necessarynonoyes

Our experience with customers shows 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, feel free to contact our support team.

Need to transform your image into greyscale or trim it? Check out the next section about filters.