Content-aware image cropping (video tutorial)
Last updated: Sep-02-2024
On this page:
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
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
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
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
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
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
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
See how automatic cropping gives a tighter crop on the image of the golfer than the fill crop mode. |
|
Using automatic cropping with padding
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
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
- Learn more about cropping images using automatic gravity.
- Discover more transformations in the Transformation URL API reference.
If you like this, you might also like...
Configure the JavaScript SDK
Install and configure the Cloudinary JavaScript SDKTransformation Basics
Learn the basics of a transformation URLColor Accessibility in JavaScript
Make your images accessible to color blind people
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.
✖️