How to Apply Gravity-Based Crops on Images with Cloudinary

This tutorial provides a high-level overview of Cloudinary's gravity-based cropping transformations for images. We recommend reviewing our official documentation, if you want to review all of the service's image transformation options.

Tutorial Sections:

• Watch a Video
• What is Gravity-Specific Cropping?
• Compass-Direction Cropping
• Content Aware Cropping - Facial Detection
• Automatically Crop to the Most Interesting Area - g_auto
• Using g_auto:subject on Images
• Cropping to Specific Objects in an Image with g_auto:object
• Additional Notes

Watch a Video

Go back to the top of the tutorial.

What is Gravity-Specific Cropping?

Manually cropping individual images with graphic editing tools to maintain the focal point can be time-intensive!

However, Cloudinary offers its machine-learning and AI-powered content-aware cropping as a solution to this problem. We can transform images on-the-fly, while also allowing you to tell Cloudinary which parts of the image to keep. By applying the gravity transformation parameter for an image URL, you can instruct Cloudinary to automatically detect which part of the original image to retain, no matter what cropping, scaling or padding options are applied.

The best part of this transformation is that it is fast and easy for any developer to apply. Let’s show you how to use the many variants available with gravity-focused crops. In this tutorial, we’ll introduce you to the different gravity options, including hard-coded directional types, and a variety of automatic detection options.

Go back to the top of the tutorial.

Compass-Direction Cropping

First, we will start by cropping our image with compass-style directions. These represent a location in the image. For example, "g_north_east" represents the top right corner, whereas "g_south_west" designates the bottom-left corner.

As an example, we have this image of a skateboarder, which is 892 x 595.

In the Media Library, let’s find the image. Then, select its Edit icon to open up the transformation options.

From here, let’s crop the image to 400 x 400, using the Width and Height sliders. Next, we are going to change the Crop style to Crop. This should let us extract a region of the given width and height out of the original image.

As you can see, this keeps the center of the image, while cropping the content evenly on all sides. While this could work, some key aspects of the image are being left out, such as the skateboarder or specific members of the crowd.

One way we can bring those people into view is through cropping to a specific direction of the image. Using compass directions provided through the Gravity drop-down field, such as North East, South and South West, we can focus on those areas.

For example, North East (g_north_east) keeps the area where the skater is located, whereas South West(g_south_west) crops to an area where the crowd is in the image. When South (g_south) is applied, it crops to the area where the bike happens to be.

Example of compass-direction cropping with g_north_east

Go back to the top of the tutorial.

Content Aware Cropping - Facial Detection

But even with compass-based directions, your key points of interest can be cut out of the frame. Additionally, it's rarely going to give you an consistently optimal result if you try to apply the same directional gravity to multiple images or on user-generated content where you don't know in advance where the important content is located.

One way to create a more reusable cropping style is to have it locate interesting or important aspects in the image. For example, we may want to automatically crop on the most prominent face in this group image. This can be done using g_face, thanks to Cloudinary’s facial recognition capabilities.

You can even take advantage of additional capabilities with Cloudinary’s Advanced Facial Attributes Detection add-on. With it, you can center the image around certain aspects of the face, such as the eyes (g_adv_eyes).

The g_face transformation, as well as some of Cloudinary’s other face-based gravities, are valuable when you expect all images to include faces as the primary element of the photo, such as when you need to handle user-uploaded photos for profile images. But if you don't know what kind of content will be in the pictures you need to handle, then you need a smarter way of deciding where to crop.

Go back to the top of the tutorial.

Automatically Crop to the Most Interesting Area - g_auto

You can also apply Cloudinary’s automatic gravity algorithm (g_auto), which uses a combination of heuristics or deep learning algorithms to detect and display the most interesting aspect of the image. In this example, it is the skater and the crowd.

We originally created the g_auto transformation, which can still be defined in the URL as g_auto:classic. However, we also have created two variants of g_auto to allow for even more precise cropping - g_auto:subject and g_auto:object.

Using g_auto:subject on Images

By training our neural networks with large datasets, we have created a way to determine where on the image the human eye will be drawn. You can take advantage of this through the g_auto:subject transformation, providing better crop results with very challenging content, such as images with multiple faces.

You can see this in this example - an image with two bears. With g_auto:classic, one bear is more in-frame than the other. Applying g_auto:subject gives equal weight to both bears.

Similarly, this image of a lake would be cropped to the tree against the bright blue and white sky with the original g_auto:classic. Whereas g_auto:subject focuses on the subjects that are most likely to capture human attention, primarily the boat, lake and mountains.

If you decide to apply g_auto without without specifying “classic” or “subject”, Cloudinary applies the best-practice auto-crop algorithm for the cropping mode you use. As an example, Fill and Cropuse subject as the default, and Thumb uses the classic style.

Further details about the g_auto:subject transformation are available in our documentation.

Cropping to Specific Objects in an Image with g_auto:object

* Please note that all details dealing with the g_auto:object transformation will require the Cloudinary Object-Aware Cropping Add-on. *

In certain images, you want to draw attention to a specific object. As an example, you may have a picture of a kitchen. But you want to be sure that regardless of the crop or aspect ratio you use, the cake remains in the delivered image.

Rather than playing with compass-style directions or using our automatic cropping transformations, you can let Cloudinary detect the object with g_auto:object. This transformation helps to ensure the object is kept when the image is cropped.

As you can see, g_auto:classic and g_auto:subject do not achieve our goal. They are focusing on interesting aspects, but the cake is our sweet spot.

But, we can apply object detection by defining the cake at the object in the transformation - g_auto:cake. Notice that the cake is now front and center.

Our object detection can find literally dozens of specific objects within images, allowing you to use it for many purposes! Using this example image of a hiker, g_auto:classic with the c_thumb crop recognizes the area of the hiker as the most salient element, but doesn't focus on the backpack.

To maintain the integrity of the backpack, you could enter g_auto:backpack in the URL.

And the options just keep going. You can instruct Cloudinary to crop based on items as diverse as bicycles, cows and more. A full list of available objects we detect can be found in our official documentation.

If you request to crop based on an object that isn’t detected, we fall back to the core g_auto option. For example, we attempted to find a bicycle in the hiking picture. But, Cloudinary still successfully cropped and delivered the image even when you requested an object that it cannot find.

Go back to the top of the tutorial.

Additional Notes

Our team has plenty of other resources for you to learn about our gravity cropping capabilities! This includes complete documentation on the cropping transformations, covering every parameter option and tweak available to you.

Lastly, we want to hear from you! If you use any of the gravity cropping options for your projects, share your examples. We always enjoy seeing what our community develops, and we would love to share your successes too. And of course, we’re here to provide support if you need assistance.

---

Thanks to the following content creators for their contributions to this post:

• Travis Yewell, Sabrina Mazzeo, AboutImages, Joseph Kellner, Robson Hatsukami Morgan, Alvan Nee, Waldemar Brandt, Ross Sokolovski, Helena Lopez, Ray Hennessy, Vince Flemming and Spencer Backman for the image file examples
• Dolgachov, Turalmammadzada and Stockhunter for the stock video footage
• Krafted for the icons
• Matsteiner-music for the background music
• Stacie Jordan for her assistance in creating the tutorial