Documentation

Help & Knowledgebase

Operations

You can find the common resize operations below : width to resize with a specific width, height to resize with a specific height, crop to crop the image at the center, fit to resize the image in a box and keeping the proportions of the source image, and cover to resize the image in a box without keeping the proportions of the source image.

Remember, the format of any Cloudimage URL is:

http(s)://company.cloudimg.io/operation/size/optional_parameters/original_image_url
  • operation: cdn, width, height, crop, cropx, cover, fit, bound
  • size: only required for width, height and crop. For other operations, use a random placeholder like n
  • optional_parameters: as their name states, they are optional. More information in the Parameters section. If you do not use them, place a random placeholder like n

In practise, it is supereasy to use:

operationExample 1Example 2Example 3
original
image
No resize, just CDN delivery

cdn/n/n/
Resize to width 100px

width/100/n/
Resize to height 100px

height/100/n/
crop centrally to 150x150px

crop/150x150/n/
Positionable crop
crop_px
see below for more doc

crop_px/900,300,2000,1300-150/n/
cover
150x150

cover/150x150/n/
fit
150x150px with #3498db background

fit/150x150/c3498db/
bound
fits in a 150x150px container without padding

bound/150x150/n/

Operation Matrix

Here is the summary of all operations with their respective impacts on the image's proportions.

required dimensions result image has same ratio as original result image has no distortion result image has all data which part is kept? padding is added
cdn 0 same ratio no distortion yes all
width 1 same ratio no distortion yes all
height 1 same ratio no distortion yes all
crop 2 not same ratio no distortion no center
crop_px 2 not same ratio no distortion no configurable
fit 2 not same ratio no distortion yes all yes
bound 2 same ratio no distortion yes all no
cover 2 not same ratio distortion yes all

Some more examples

Crop vs Fit

You can crop your images with 3 different operations: crop, fit. When you use the fit function, you can add a background to cover the white space in the resulting canvas, see examples below.

Some more examples with FIT

When you use the fit operation, a background can appear if the resulting canvas has not the same proportion as the source image. You can specify in the options the background color with a color code such as cFF99CC, or you can choose transparency with ctrans. Without option, the default background is white.

Positionable crop

Cloudimage's positionable crop feature allows you to define the crop zone and to 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-final_size.

The first part (x1,y1,x2,y2) represent the rectangle to crop in the source image. The second part final_size can be either WIDTH, xHEIGHT or WIDTHxHEIGHT.

You'll understand better by looking at the example below :) :

Need more operations?

If you need a transformation that is not listed here, feel free to contact us and we will be happy to add it (quickly) !