{"id":21869,"date":"2020-02-15T10:35:00","date_gmt":"2020-02-15T10:35:00","guid":{"rendered":"http:\/\/new_ai_based_image_auto_crop_algorithm_sticks_to_the_subject"},"modified":"2025-08-21T12:19:19","modified_gmt":"2025-08-21T19:19:19","slug":"new_ai_based_image_auto_crop_algorithm_sticks_to_the_subject","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/new_ai_based_image_auto_crop_algorithm_sticks_to_the_subject","title":{"rendered":"New AI-Based Image Auto-Crop Algorithm Sticks to the Subject"},"content":{"rendered":"

If you\u2019re the developer for an online store, a news site, a social media app, or any other website that delivers new media content on a regular basis, you are probably painfully familiar with both the challenge and importance of delivering well-cropped images.<\/p>\n

In a nutshell, your customers expect top-quality, quick-loading photos that clearly show them what they need to see no matter what device they happen to be using at the moment. Making them happy requires delivering the same image in many different aspect ratios, and potentially cropping closer or wider on your main subject, depending on size. Hardly sounds reasonable, but if you don\u2019t meet their expectations, your customers will just go somewhere else\u2026<\/p>\n

(Why do I feel like I\u2019m describing my teenage daughters? Well, to be honest, the demanding nature and short attention span of today\u2019s online customers have a lot in common with teens\u2026)<\/p>\n

But unlike teens, you can\u2019t afford to fall short of your users\u2019 demands. If you\u2019ve got hundreds or thousands of images to deliver every day, you can\u2019t manually crop every image to the right size for every device and placement. Simple client-side scaling of your high quality images would mean completely unacceptable performance and quality. So it\u2019s clear that you must adjust the size and aspect ratio of your images programmatically, and then deliver the various image resolutions using responsive delivery code, probably via <picture><\/code> and <srcset><\/code> tags.<\/p>\n

Then the question arises \u2013 if you programmatically crop the same photo to significantly different aspect ratios, how can you be sure your code won\u2019t crop off the most important parts of your products, news subjects, or that adorable cat your users just have to share with the world?<\/p>\n

If you are already familiar with Cloudinary\u2019s<\/a> powerful media management and delivery capabilities, you might be saying – what\u2019s the problem? Just use Cloudinary\u2019s image auto-cropping gravity<\/strong> parameter (aka g_auto<\/code>) and it will do the hard work for you!<\/p>\n

And in fact, thousands of Cloudinary developers already use g_auto<\/code> in their image URLs to automatically crop millions of images daily. That parameter applies a sophisticated algorithm that analyzes the pixels in an image and prioritizes the most salient areas of each image on-the-fly. The analysis gives priority to skin tones, edge detection<\/a>, color contrasts, any detected faces, and more, in order to determine the most important areas to keep when it crops.<\/p>\n

But what if Cloudinary\u2019s already powerful image auto-crop functionality could be even smarter?<\/p>\n

Related content: Read our guide to server side rendering<\/a>.<\/p>\n

Introducing Subject Detection Image Auto Cropping<\/h2>\n

Cloudinary\u2019s new and improved deep-learning-based g_auto <\/code>transformation parameter goes beyond the saliency analysis described above, adding the capability to actually detect the subjects in an image that would be most likely to capture a person\u2019s attention.<\/p>\n

To accomplish this, our new image auto-cropping deep learning mechanism has been (and continues to be) fed with tens of thousands of images and corresponding human input that together teach our machines to predict the important regions in images, no matter their subject and layout. This involves advanced computations performed by GPU-based hardware clusters that process millions of crop requests on the fly. The result is completely unique auto-cropping functionality that provides very impressive outputs.<\/p>\n

Remember those products, news images, and user-generated content (aka cats) we talked about above?<\/p>\n

Look what would happen to these mobile-camera photographs if we were to crop them to a square using the standard center cropping that other programs often apply, and how the new and improved g_auto with subject-detection cropping comes to the rescue in each of these crops:<\/p>\n

\n<\/div>\n
\n\n\"Product<\/a>\noriginal<\/b><\/small>\n<\/span>\n\n\"Product<\/a>\ncenter crop<\/b><\/small>\n<\/span>\n\n\"Product<\/a>\ng_auto crop<\/b><\/small>\n<\/span>\n\n\"News<\/a>\noriginal<\/b><\/small>\n<\/span>\n\n\"News<\/a>\ncenter crop<\/b><\/small>\n<\/span>\n\n\"News<\/a>\ng_auto crop<\/b><\/small>\n<\/span>\n\n\"Cat<\/a>\noriginal<\/b><\/small>\n<\/span>\n\n\"Cat<\/a>\ncenter crop<\/b><\/small>\n<\/span>\n\n\"Cat<\/a>\ng_auto crop<\/b><\/small>\n<\/span>\n<\/div>\n
\n<\/div>\n

How do you apply this cool cropping method on your delivered images? After uploading your original image to your Cloudinary account, just specify auto<\/code> as the gravity<\/code> (area to keep) in your on-the-fly delivery URL, along with a crop mode such as fill<\/a>, lfill<\/a>, or crop<\/a>, and of-course an aspect ratio or width\/height combination that\u2019s different than the original.<\/p>\n

For example, here\u2019s how you\u2019d deliver that nicely cropped cat above as a 500px square (1.0 aspect ratio or ar_1<\/code> in the delivery URL):<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget><\/p>\n

\nIn addition to Cloudinary, there are other AI image croppers available in the market. For instance:\n<\/p>\n

\nAI Cropper: <\/strong>A web browser application that allows you to crop AI files on your phone, tablet, or desktop. It doesn’t add any watermarks or dates to your photos.\n<\/p>\n

\nPhotoAiD:<\/strong> A free online image cropper that’s part of a complex photo editor. You can use it to crop photos specifically for platforms like Facebook or for a CV.\n<\/p>\n

\nMagic Crop:<\/strong> This website uses AI and the rule of thirds to automatically crop inputted pictures into perfect square headshots. It can even batch-crop multiple images, offering a more efficient solution for those with a large number of photos to process.\n<\/p>\n

\nMoreover, traditional image editing software like Adobe Photoshop, GIMP, or Pixlr can also be used to resize images without losing quality, providing users with more options and flexibility in their image editing tasks.\n<\/p>\n

Read more in our guides on image cropping:<\/p>\n