Content-aware image cropping (video tutorial)

Overview

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

Tutorial contents

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

Crop images automatically with Cloudinary

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

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

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

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

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

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

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

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

 

 

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.