Cloudinary is a cloud-based service that provides solutions for image and video management. These include server or client-side upload, on-the-fly image and video manipulations, fast CDN delivery, and a variety of asset management options.
The Cloudinary Object-Aware Cropping add-on helps to ensure that your image crops keep the specific objects that matter to you, even when you significantly modify the aspect ratio. Cloudinary accomplishes this by applying advanced AI-based object detection algorithms on-the-fly during the crop process. You can either use it in conjunction with auto-gravity to give higher priority to the objects you care about, or directly specify that the crop should be exactly based on the detected coordinates of the specified objects.
Watch this demo to see how the same image is cropped according to the parameters specified in the URL:
Before you can use the Cloudinary Object-Aware Cropping add-on:
You must have a Cloudinary account. If you don't already have one, you can sign up for a free account.
Register for the add-on: make sure you're logged in to your account and then go to the Add-ons page. For more information about add-on registrations, see Registering for add-ons.
Keep in mind that many of the examples on this page use our SDKs. For SDK installation and configuration details, see the relevant SDK guide.
If you are new to Cloudinary, you may want to take a look at How to integrate Cloudinary in your app for a walk through on the basics of creating and setting up your account, working with SDKs, and then uploading, transforming and delivering assets.
After registering for the Cloudinary Object-Aware Cropping add-on, you can apply it in one of two ways:
Automatic gravity with a high weighting towards a specified object This variant of auto-gravity cropping enables you to indicate specific objects or object categories that should be given priority when parts of a photo are cropped out. This is done by specifying an object or an object category as the focal_gravity attribute for the auto gravity parameter (g_auto in URLs) together with a cropping option.
Object-specific gravity By specifying an object or object category as the gravity parameter (for example, g_cat in URLs) together with a cropping option, you can accurately crop around objects without needing to specify dimensions or aspect ratio.
For example, consider the original image of a kitchen below:
Using auto-gravity, you can deliver a square thumbnail crop that prioritizes the detected coordinates of the sink, microwave, or refrigerator. To do this, specify the relevant object option for the g_auto gravity definition in conjunction with the thumb cropping option:
Using object-specific gravity, you can choose not to give dimensions or aspect ratio, and deliver an image that is tightly cropped to the object. To do this, specify the relevant object option for the gravity definition in conjunction with the crop cropping option:
You can also specify an aspect ratio together with the crop cropping option, without including specific dimensions. This keeps the object but may show more of the image to fit the aspect ratio.
When using the Object-Aware Cropping add-on, you can specify either individual objects or more general object categories.
When you specify a category, the algorithm gives priority to any objects that are detected from that category.
The regular auto-gravity behavior also impacts the cropping decision. But if requested objects are detected, they get significantly higher priority than the subjects or salient areas that the regular auto-gravity algorithm selects.
If you specify the generic object category with auto-gravity (g_auto:object), then any detected objects from any category get priority.
If there are multiple objects of the same type in the image, object-specific gravity selects the most prominent of the objects, and bases its crop around only that object, whereas auto-gravity may choose to keep more than one of the objects in the crop.
The categories and objects also work in their plural forms when using object-specific gravity. So, for example, c_crop,g_birds keeps all birds in the crop, whereas c_crop,g_bird keeps only the most prominent bird.
any object in any subcategory (only supported with auto-gravity)
OID detects 600 classes of objects. When referencing these classes, replace any spaces with underscores.
Where categories or objects are detected by both models, the COCO object detection takes precedence. For example, baseball_glove is detected by both models, so g_auto:baseball_glove or g_baseball_glove invokes only the COCO model.
To apply only the classic or only the subjectauto-gravity algorithm, which in some cases may have some impact on the exact coordinates of the crop, even if other specified objects or focal gravity options are detected. Note that the default algorithm, which combines both of these algorithms, is recommended in the majority of cases.
For example, your auto-gravity URL parameter might be: g_auto:cat:sofa:faces:adv_eyes
This would instruct the cropping mechanism to give top priority to any cats, sofas, faces, or eyes detected in the photo.
For a complete list of all focal_gravity options, see the g_<special_position> section of the Transformation URL API Reference.
Important
The focal gravity options can be specified in any order. The order does not impact the result.
When multiple items are detected that match the requested focal options, larger, more central, and more in-focus (less blurry) objects will get higher priority. In special cases, it's possible to fine-tune this default prioritization further. For details, contact support.
If a particular image has custom coordinates defined, those coordinates always override all other focal gravity options, unless you use the custom_no_override option in conjunction with the other options.
When using object-specific gravity to determine the area to keep in a crop, you can specify multiple focal_gravity options, but unlike auto-gravity, the order in which they are specified has an impact on the delivered image.
For example, consider this photo of a cat and dog:
By setting the gravity parameter to cat:dog the cat gets precedence:
Notice that if auto-gravity is not specified, the object-specific algorithm chooses the most prominent bird out of the three and only keeps this bird in the crop:
In addition to specifying objects to keep in an image, you can specify objects that you would rather not see. To minimize the likelihood of including a particular object in the cropped image, use auto-gravity with the avoid option for the relevant object or category.
For example, in photos like the one below, you may prefer not to include people because the purpose of the photo is to show an interesting store front, and the people are a distraction.
Using g_auto by itself makes the people the focal point, but if we use g_auto:person_avoid, the other side of the photo is shown, without the people.
When you specify an object, either specifically or in your auto-gravity parameter, the Object-Aware Cropping AI algorithm detects the coordinates of the object and those coordinates are used by the cropping mode.
When using thumb cropping (c_thumb), the image is cropped as closely as possible to the detected coordinates of the object given the requested aspect ratio, and then scaled to the requested pixel size. Note that if the requested pixel size is greater than the crop, the image is not scaled up, but filled with further pixels from the image.
When using crop mode (c_crop), the detected coordinates are prioritized as the area to keep when determining how much to cut from each edge of the photo in order to achieve the requested pixel size. If using auto-gravity and the requested pixel size is larger than the coordinates of the detected object, other elements of the image that receive priority from g_auto may impact what else is included in the photo and where in your resulting image the detected object may be located, meaning that the detected object will not necessarily be the center of the photo.
When using any of the fill-based modes (c_fill, c_lfill, c_fill_pad), the coordinates of the detected object should be retained if any cropping is required after scaling. If using auto-gravity, other elements of the image that receive priority from g_auto may impact what else is included in the photo and where in your resulting image the detected object may be located, meaning that the detected object will not necessarily be the center of the photo.
The following examples show how different your cropping results may be for the same requested object in the gravity, but with different cropping modes. In this case, we take the original photo below and apply g_auto:bottle and g_bottle with fill, crop, and thumb cropping modes. In all cases, the same width and aspect ratio are requested.
You can take advantage of object-aware cropping with various cropping modes to assist in responsive art direction. This means that when you deliver different sized images to different devices, you don't just scale the same image, but rather crop images differently for different sizes, so that the important objects are always highly visible.
For example, you may:
deliver a full-size image to large HD screens
use g_auto:[your_important_object], or g_[your_important_object] with fill cropping for medium sized screens
use g_auto:[your_important_object], or g_[your_important_object] with thumb cropping for very small screens.
For more details on delivering responsive images, see the Responsive images guide.
Cloudinary's dynamic image manipulation URLs are powerful tools. However, due to the potential costs of your customers experimenting with dynamic URLs that apply the object-aware cropping algorithm, image manipulation add-on URLs are required (by default) to be signed using Cloudinary's authenticated API. Alternatively, you can eagerly generate the requested derived images using Cloudinary's authenticated API.
To create a signed delivery URL, set the sign_url parameter to true when building a URL or creating an image tag.
The following code example applies object-aware cropping to the skater image, including a signed Cloudinary URL:
The generated Cloudinary URL shown below includes a signature component (/s--acvfjq2y--/). Only URLs with a valid signature that matches the requested image manipulation will be approved for on-the-fly image manipulation and delivery.
You can optionally remove the signed URL default requirement for a particular add-on by selecting that add-on in the Allow unsigned add-on transformations section of the Security account settings in the Cloudinary console.
✔️ Feedback sent!
✖️
Error
Unfortunately there's been an error sending your feedback.
g_auto:sink
g_auto:microwave
g_auto:refrigerator
g_sink
g_microwave
g_refrigerator
g_sink
g_microwave
g_refrigerator
g_auto
g_auto:person_avoid
Original
c_fill
c_crop
c_thumb
c_fill
c_crop
c_thumb
