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!
Everything starts with the basic URL format of a Cloudimage 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.
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
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
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:
Crop and resize to 200px width:
Crop and resize to 350px height: /crop_px/2000,0,2500,800-x350/n/sample.li/girls.jpg
Crop and cover in 200x300px box: /crop_px/1500,400,2000,1300-200x300/n/sample.li/girls.jpg
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.
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 size||same proportion |
as origin image?
|resulting image |
is the full image?
|padding is added?|
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.