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!
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.
- size: specifies the size of the target image. If you use an operation not requiring a size, then use a placeholder like
- filter: parameters like
rotationto 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.
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.
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
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:
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 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.
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?||Can we use filter?|
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.