Image Effects A Beginner’s Guide to Image Comparison in Python Python Image Analysis Tools and Techniques: Where to Start Understanding How to Change the Aspect Ratio of an Image Unleashing the Power of Image Organizers in 2024 How to Make a Low-Quality Image Look Better Understanding Lossless Image Compression How to Set Up Image Registration in Python 8 Different Image Processing Techniques You Can Use 4 Ways to Make an Image Larger without Losing Quality 3 Easy Ways to Eliminate Duplicate Images The Basics of Face Detection in Python How to Implement Multiple File Upload in PHP Like a Pro Creating Custom Image Cropping Interfaces in Android How to Create Simple Yet Effective PHP Overlay Understanding Real-Time Image Recognition How to add a shadow effect to an image with CSS How to crop an image in Flutter with Cloudinary How To Rotate an Image with Java Image Processing with Python Rotating an image with CSS Enhancing User Experience with a Responsive Image Slider Building a Python Image Recognition System Building an Interactive JavaScript Image Manipulation Tool Image Align Centering with HTML and CSS Efficient Image Cropping Techniques with Angular and Cloudinary Ultimate Guide to Photo Gallery on Android A Comprehensive Guide to Adding Text to Images on Android Mastering Background Changes in React Applications Comprehensive Guide on Changing Background on Android Devices Mastering Image Rotation in Java A Guide to Adding Text to Images with Python A Guide to Converting Images to Grayscale with Python Introduction Creating an Image Overlay with JavaScript Rotating an Image in Python Creating a Dynamic Photo Gallery with jQuery Creating An Interactive Photo Gallery Using JavaScript Mastering Overlay in Android Mastering Angular Overlay: A Comprehensive Guide Comprehensive Guide to Overlay in Flutter Mastering Overlay React for Responsive Design Solutions Create a Blurred Image with PHP: A Comprehensive Guide Guide to Using Blur Image in Flutter Mastering Blur Image in React Native Mastering Image Blurring in Python Mastering the Art of Image Blurring Mastering the Art of Image Blurring in Java The Ultimate Guide to Blurring Images on Android Understanding and Implementing Blur Image in JQuery An Extensive Walkthrough of Blurring Images with JavaScript How to Use HTML, CSS, and JavaScript to Make an Image Slider HTML Image Tag How to Crop GIFs? How to Align Images with CSS Ken Burns Effect – Complete Guide and How to Apply It Cartoonify – Complete Guide on Cartoonify Image Effect Mastering Web Aesthetics: A Comprehensive Guide to Gradient Fades Sepia Effect: The Ultimate Guide to the Sepia Photo Effect What is Vignette? Guide to Vignette Image Editing Pixelate – The Ultimate Guide to the Pixelation Effect How to Outline an Image: Enhancing Visual Appeal and Depth Make Your Photos Pop with Image Effects Upscale Image – Developers guide to AI-driven image upscaling Image Manipulation: History, Concepts and a Complete Guide A Full Guide to Object-aware Cropping Simplify Your Life with Automatic Image Tagging How To Resize Images In WordPress How To Create a Progress Bar For Asset Uploads Animated GIFs – What They Are And How To Create Them How To Automatically Improve Image Resolution AI Drop Shadow Get Image Dimensions From URLs Automatically Add Sepia Effect To Images Automatically Make an Image a Cartoon Automatically Add Blur Faces Effect To Images Automatically Add Background Removal Effect to an Image How to Resize an Image with React How to Easily Resize an Image with React Native

A Full Guide to Object-aware Cropping

object aware crop

As a web developer or UI/UX designer, you know how crucial images are for creating engaging content on your website. However, it’s not just about the size or quality of the images you use – it’s also about how effectively they communicate your message and fit within your website’s layout.

By using object-aware cropping techniques to focus on the key elements in your photos, you can enhance the visual impact of your website. In this post, we’ll explore the benefits of object-aware cropping and show you how Cloudinary can help you implement this technique.

In this article:

What Is Object-Aware Cropping?

Object-aware cropping is a technology that recognizes items in an image and crops the image appropriately using artificial intelligence and machine learning techniques. This technique lets you concentrate on the photo’s focal point while eliminating extraneous details.

AI and ML systems use object detection and recognition models to examine the content of an image and identify the things inside it. Once the object is located, the algorithm determines the best cropping borders based on location, size, and orientation.

When Do You Need to Use Object-Aware Cropping?

Object-aware cropping can be a game-changer in making photographs suitable for multiple platforms and devices. Here are some scenarios in which object-aware cropping may be necessary:

  • When you need to fit several photos, each with a different size and aspect ratio, into a specific area on your website.
  • When you want to eliminate a photograph’s background or extraneous features to concentrate on a particular area.
  • When you want to design graphic elements for your website, like product photographs or social media posts.

Benefits of Object-Aware Cropping

Object-aware cropping can enhance the overall quality of the pictures on your website. Not only does it produce better-looking results, but it can also do more, such as:

  • Improved User Experience. Object-aware cropping can create a more engaging and visually appealing experience for your website visitors by focusing on the most important elements of an image.
  • Saves time. Automating the cropping process with object-aware cropping can help you save time and effort, allowing you to focus on other aspects of your website design and development.
  • Consistency. Object-aware cropping can help you maintain visual consistency across your website’s images, ensuring they align with your branding and design principles.
  • Better accessibility. Object-aware cropping can help create alternative image versions that cater to users with specific accessibility needs, ensuring that the most essential information is conveyed effectively, regardless of the viewing context or device.

How To Use Object-Aware Cropping with Cloudinary

Object-aware cropping is a powerful Cloudinary feature that allows you to crop images based on their content automatically. This means you can ensure the most important parts of your image are always visible, regardless of the image’s size or aspect ratio.

Let’s look at what is required to use Cloudinary’s object-aware cropping and how you can use it to enhance your media management.

Step 1: Sign Up for a Cloudinary Account

To use Cloudinary’s services, you’ll need to create an account. Go to the Cloudinary website and sign up for free.

Once you’ve created your account, you’ll need the latest version of Node.js on your computer. You can download it for free from the official Node.js website if you don’t already have it.

Finally, to make API calls to our cloud, we’ll need to use Cloudinary’s Node.js SDK, which will help us call our API and authenticate our requests. To install this library, start by creating a project folder in a directory of your choice. Next, open up your terminal, navigate to your project directory, and type the following command:

npm install cloudinary

Step 2: Upload an Image to Your Cloudinary Account

Now that we have set up our environment, we need to upload our images to our cloud. With Cloudinary, you can upload an image directly to your Media Library or use an API call instead.

To upload your images using the website, head to Cloudinary and log in to your account. Here you will be greeted with the Dashboard. Head to the Media Library tab as shown below:

The Media Library tab shows all your assets on the cloud. To upload new assets, click the Upload button in the top-right corner.

Finally, you can drag and drop an image file or click Browse to select the assets you want to upload.

As mentioned earlier, we can use the Cloudinary API to upload images to the cloud. Let’s create a Node JS script and programmatically upload our assets to the cloud.

First, open up your project’s directory and create an assets folder. Now add the images you want to upload:

Next, log in to your Cloudinary account and head to the Dashboard tab. Here you will need to copy your Cloud Name, API Key, and API Secret:

Now, open up the project folder in your favorite IDE, and create a new file named Upload.js. Open up the file and start by importing the Cloudinary SDK and defining our API with our account details:

const cloudinary = require('cloudinary').v2;

// configure cloudinary with your account details
cloudinary.config({
    cloud_name: 'CLOUD_NAME',
    api_key: 'API_KEY',
    api_secret: 'API_SECRET' 
  });

Then, call the upload API with the assets you want to upload. We define two extra parameters, resouce_type, and public_id, as shown in the code below. As the name implies, the resouce_type allows us to specify the type of asset we want to upload. Here, we define our asset as an image.

The public_id parameter is a unique identifier allowing us to track our Cloudinary cloud assets. Keeping track of our resources will be easier if we define it explicitly. Otherwise, Cloudinary will generate a random public_id for us to check in our Media Library:

// Calling upload API
cloudinary.uploader
.upload("assets/sample.jpg", {
    // Specifying the resource type of the image
    // image is the default resource type even if
    // you don't specify
    resource_type: "image", public_id: "sample_raw",
})
.then((result) => {

    // JSON.stringify will provide output in a formatted
    // string
    console.log("success", JSON.stringify(result, null, 2));

})
.catch((error) => {
    console.log("error", JSON.stringify(error, null, 2));
});

Here is our file code in the Upload.js file:

const cloudinary = require('cloudinary').v2;

// configure cloudinary with your account details
cloudinary.config({
    cloud_name: 'CLOUD_NAME',
    api_key: 'API_KEY',
    api_secret: 'API_SECRET' 
  });
 
// Calling upload API
cloudinary.uploader
.upload("assets/sample.jpg", {
    // Specifying the resource type of the image
    // image is the default resource type even if
    // you don't specify
    resource_type: "image", public_id: "sample_raw",
})
.then((result) => {

    // JSON.stringify will provide output in a formatted
    // string
    console.log("success", JSON.stringify(result, null, 2));

})
.catch((error) => {
    console.log("error", JSON.stringify(error, null, 2));
});

Now you can simply run the code using Node:

node Upload.js

To verify your upload, you can either follow the URL given in the terminal output or head on to the Media Library tab:

Step 3: Get the Public ID of Your Asset

Now that we have our image in the cloud, we can start retrieving the public_id of our images to start using object-aware cropping.

We need the URL of the image we want to crop, so log in to your Cloudinary account and head to the Media Library tab. You can see the public_id of your image right under the image preview. Select the public_id and copy it to your clipboard.

Now that we have our public_id, we can set up our add-on.

Step 4: Get the Cloudinary AI Content Analysis Add-on

Object detection is a feature of Cloudinary that allows you to identify objects within an image. You’ll need to enable it in your account to use it. So before we can run our code, we’ll need to add the Cloudinary AI Content Analysis service. So log in to your account and head to the Add-on tab.

Next, search for the Cloudinary AI Content Analysis add-on:

Click on the add-on and subscribe to the free plan:

Now that our environment is set up, we can start cropping our images.

Step 5: Get a Transformed Image URL

To perform object-aware cropping, you need to add parameters to the image URL that specify which objects to focus on. Thankfully, the Cloudinary Node JS SDK helps simplify this process.

Now, open up the project folder in your favorite IDE, and create a new file named Crop.js. Open it and start by importing the Cloudinary SDK and defining our API with our account details:

const cloudinary = require('cloudinary').v2;

// Configure Cloudinary with your account details
cloudinary.config({
    cloud_name: 'CLOUD_NAME',
    api_key: 'API_KEY',
    api_secret: 'API_SECRET' 
  });

For now, we will simply be using Clodinary’s demo cloud to show you the capabilities of Cloudinary AI Content Analysis.

const cloudinary = require('cloudinary').v2;

// Configure with your cloud_name, api_key, and api_secret
cloudinary.config({
  cloud_name: 'demo'
});

Next, call the Cloudinary API to retrieve an image from the cloud:

// Retrieving bike from demo cloud
const url = cloudinary.image('samples/bike');

console.log(url);

Here is what our final Crop.js file looks like:

const cloudinary = require('cloudinary').v2;

// Replace with your cloud_name, api_key, and api_secret
cloudinary.config({
  cloud_name: 'demo'
});

// Retrieving bike from demo cloud
const url = cloudinary.image('samples/bike');

console.log(url);

Running the code gives us the following output and image:

Cloudinary AI Content Analysis can be invoked to apply object-aware cropping in two ways. Automatic gravity with a high weighting towards a specified object is done by setting the gravity parameter to auto. Object-specific gravity is done by selecting an object or category in the gravity parameter. This allows you to accurately crop around objects without specifying dimensions or aspect ratio.

Let’s run Cloudinary AI Content Analysis with object-specific gravity by adding a transformation parameter to the API and specifying the gravity parameter on the bike:

const url = cloudinary.image('samples/bike', {transformation:[
  {gravity: "bike", aspect_ratio: "1", crop: "crop"}]});

Running the code yields the following image:

When using object-specific gravity to determine the area to keep in a crop, you can specify multiple focal_gravity options. Moreover, the order in which they are specified impacts the delivered image. For example, look at samples/sheep available in the demo cloud:

By setting the gravity parameter to cat:dog, the cat gets precedence:

const url = cloudinary.image("docs/one_cat_one_dog.jpg", {transformation:[
    {gravity: "cat:dog", aspect_ratio: "1", crop: "thumb"}]});

console.log(url);

Running the code gives the following image:

Get The Most Out Of Your Images with Cloudinary

Object-aware cropping is a game-changing technique that revolutionizes the way we approach image editing and optimization. By intelligently identifying and preserving the most important elements within an image, this advanced cropping method ensures that your visual content remains engaging, impactful, and accessible across various platforms and devices. As the digital landscape continues to evolve, adopting object-aware cropping in your content strategy is essential for staying ahead of the curve and delivering a seamless and captivating visual experience to your audience.

With Cloudinary’s comprehensive media management platform, you can effortlessly leverage object-aware cropping and a host of other advanced image optimization features to enhance your visual content and boost user engagement. Start your journey today and experience the transformative power of object-aware cropping for your business.

More from Cloudinary:

QUICK TIPS
Colby Fayock
Cloudinary Logo Colby Fayock

In my experience, here are tips that can help you better implement object-aware cropping in your projects:

  1. Set the right focal priorities for multi-object images
    When dealing with images containing multiple focal points (e.g., products and people), define specific gravity options like "cat:dog" to prioritize what should be centered or emphasized first. Knowing which object to prioritize is critical for maintaining the context and impact of your visuals. Consider the narrative of each image to choose the right sequence.
  2. Use aspect ratios strategically based on content placement
    Match the aspect ratio to the placement and use-case of the image. For banners or hero images, use a wide aspect ratio like 16:9, but for product shots or profile images, a square 1:1 or portrait ratio 4:5 might be more suitable. This ensures that your cropped images maintain visual harmony with your layout and design, avoiding awkward truncations.
  3. Combine cropping with content-aware resizing for complex layouts
    For images that need to fit varied container sizes without losing focus, consider combining object-aware cropping (crop: "thumb") with content-aware resizing (ar_3:2,c_fill). This approach dynamically adjusts the image dimensions while ensuring key elements stay visible, making it ideal for responsive design where the same image might appear in different sizes.
  4. Leverage object-aware cropping for automatic focus adjustments
    Implement object-aware cropping for images in gallery carousels or product showcases where quick, automated focus adjustments are needed. This is particularly helpful in e-commerce, where a large number of product images need to be presented in uniform dimensions without manually adjusting each one. Cloudinary’s g_auto and crop_auto can streamline this process.
  5. Optimize image performance with dynamic delivery
    To ensure that your object-aware cropped images load quickly, use Cloudinary’s q_auto and f_auto parameters for quality and format optimizations. This delivers the best-quality image for the viewer’s specific browser and device, maintaining visual clarity without sacrificing page speed or performance.
  6. Refine cropping results using gravity parameters
    Fine-tune object-aware cropping by experimenting with various gravity values (face, center, auto, or specific objects like dog or car). This lets you manually direct the AI to emphasize specific parts of the image when the automatic selection doesn’t perfectly align with your intent, offering better control over the final output.
  7. Use object-aware cropping for consistent branding
    Apply object-aware cropping to create uniformity in your image library. For brand consistency, ensure that similar objects (e.g., faces in team photos) are centered consistently across all images. This approach helps maintain a cohesive look and feel, especially in UI layouts like staff directories or product grids.
  8. Automate workflow for high-volume content
    When working with a large image database, automate your object-aware cropping workflow using Cloudinary’s API with Node.js or Python. Set up batch transformations to handle hundreds of images at once, applying consistent cropping rules for bulk content updates. This is useful for agencies or e-commerce platforms managing frequently changing inventories.
  9. Apply object-aware cropping for better accessibility
    Use object-aware cropping to create multiple image versions tailored for different accessibility needs. For instance, focus on prominent elements in the image when creating thumbnails for visually impaired users, ensuring that key details are never obscured and context is preserved.
  10. Combine object-aware cropping with other Cloudinary features
    Take advantage of Cloudinary’s additional features, such as background removal (e_background_removal) or auto-enhance (e_auto_enhance), in conjunction with object-aware cropping. For product images, this can make your visuals stand out by focusing on the product and removing distractions, improving clarity and engagement in complex layouts.

These tips will help you maximize the impact of object-aware cropping and deliver highly engaging visual content that adapts seamlessly to different platforms and user contexts. Whether you’re managing small projects or large-scale content libraries, these strategies ensure that your images are not only cropped intelligently but also aligned with your design and branding goals.

Last updated: Oct 3, 2024