Programmable Media

Content-aware image cropping (video tutorial)

Last updated: Jun-06-2024


In a JavaScript environment, learn how to crop images using content-aware AI to keep the most interesting part of the image in the crop.

Video tutorial

View the code
You can find the code from this tutorial in GitHub.

Tutorial contents

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

Crop images automatically with Cloudinary

Jump to this spot in the video  0:00 If you're processing hundreds or thousands of images on a daily basis, you can automate smart cropping to focus on the most interesting parts of your images.

Crop images with URL parameters

Jump to this spot in the video  0:15 Cloudinary lets you crop images with simple URL parameters, such as c_crop,h_1000,w_1500,x_430,y_120, but if you want to crop many images it's not efficient to work out the parameters manually.

Using gravity for automatic cropping

Jump to this spot in the video  0:32 When cropping images automatically, and at scale, you can't just keep the center of images, as the most interesting part isn't always in the center. Instead, you can set the gravity parameter to say what you want to focus on. For maximum automation, use automatic gravity.

Using the automatic cropping mode

Jump to this spot in the video  0:55 While gravity allows us to target the subject, it doesn't help to set an ideal crop by itself. There are many different cropping methods, which crop images in different ways. The automatic cropping mode using AI to focus on the subject, while maintaining the context.

Implement auto cropping in JavaScript

Jump to this spot in the video  1:21 In your JavaScript environment, install and configure the Cloudinary JavaScript SDK. Then, import the auto resize action and the autoGravity qualifier, and use the automatic resize function on your image, specifying a width and height and auto gravity.

See automatic cropping in action

Jump to this spot in the video  1:46 See how automatic cropping gives a tighter crop on the image of the golfer than the fill crop mode.

Using automatic cropping with padding

Jump to this spot in the video  2:08 Automatic cropping with padding can give a better result than automatic cropping alone, depending on the display dimensions. To add padding, import the autoPad action, and use this instead of the auto action. You can specify a color for the padding, or let Cloudinary automatically decide based on the colors in the image.

Keep learning

Related topics

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

Configure the JavaScript SDK
Install and configure the Cloudinary JavaScript SDK
Transformation Basics
Learn the basics of a transformation URL
Color Accessibility in JavaScript
Make your images accessible to color blind people


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: