Programmable Media

Gravity-based crops for images (video tutorial)

Last updated: Feb-26-2024

Overview

Manually cropping individual images with graphic editing tools to maintain the focal point can be time-intensive. Cloudinary offers its machine-learning and AI-powered content-aware cropping as a solution to this problem.

Let's introduce you to the different gravity options, including hard-coded directional types, and a variety of automatic detection options.

Video tutorial


This video is brought to you by Cloudinary's video player - embed your own!

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

What is gravity-specific cropping?

Jump to this spot in the video  0:07 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.

Compass-direction cropping

Jump to this spot in the video  1:08 Compass-style directions 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.

Animated Example of Cloudinary Gravity Cropping Transformations Applied to Image of Eagles

Content-aware cropping - facial detection

Jump to this spot in the video  3:08 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 a group. This can be done using g_face, thanks to Cloudinary's facial recognition capabilities.

Animated Example of Applying Cloudinary's g_face Transformation to an Image

Automatically crop to the most interesting area (g_auto)

Jump to this spot in the video  3:55 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.

Before and After Example of an Image Using Cloudinary's g_auto Transformation

Use g_auto:subject on images

Jump to this spot in the video  4:24 By training our neural networks with large datasets, we have created a way to determine the area of the image to which 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.

Comparison of Cloudinary's g_auto:classic and g_auto:subject Transformations Using an Image of Two Bears

Crop to specific objects in an image

Jump to this spot in the video  5:45 Rather than playing with compass-style directions or using our automatic cropping transformations, you can let Cloudinary detect the object with g_auto:<object>, for example g_auto:cake, using our Cloudinary AI Content Analysis add-on. This transformation helps to ensure the object is kept when the image is cropped.

Example of a Kitchen When Applying Cloudinary's g_auto:object on the Cake in the Image


Keep learning

Related topics

If you like this, you might also like...

Named Transformations
Simplify & standardize complex delivery URLs
Optimization Tips
Tips for delivering optimized images
Content-aware Video Cropping
Smartly crop a video using content-aware AI

 

Cloudinary Academy

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

 

✔️ Feedback sent!

Rate this page: