Resizing a batch of images for a website isn't as simple as you might think. Are there any alternatives to spending hours manually tweaking each image that doesn’t involve the risk of headless photos? Yep. Smart Crop by Uploadcare.
Smart Crop is a built-in image processing operation in Uploadcare. It leverages AI and deep learning neural networks to automatically crop your image so that only important things, such as faces, silhouettes and objects, remain visible. The rest of the image, which contains background or insignificant details, is removed.
What's the idea? The feature is intended to make daily tasks easier for people who have large catalogs and a lot of product photos in different resolutions and orientations. For example, you can:
✅ Automatically create nice-looking image thumbnails:
Apply smart crop online to create thumbnails
✅ Adapt your images to a new website design:
Resize images online to match updated website design
✅ Automatically adjust the size of the images your users upload, for example, for their profile photos:
Online image crop for avatars and profile photos
Before we get too far, here's a quick reminder of how image transformations work in Uploadcare:
First of all, you need to sign up for an Uploadcare account. After that, you’ll be able to create your first project from the dashboard and start uploading your images.
Once an image is uploaded, you receive a CDN link with its unique identifier (UUID). From there, you can crop, align, resize, and enhance your images by simply adding different URL parameters. For example: https://ucarecdn.com//985d4f2c-973a-4ae6-a2b1-f992683da70b/-/flip/
Read the guide Quick Image Manipulations Using Only URL on our blog to find more information; and, of course, there’s a page in the Docs.
Now that you’re all set, how about we smart crop a picture together?
Here’s our test image. It’s large and horizontal, and we need to tweak it to fit our webpage.
Original image dimensions are 7691x5130px
To apply Smart Crop, we need to simply specify the necessary dimensions with the smart crop command. Uploadcare image processing will scale and crop your image automatically and output it with the desired dimensions.
The general URL scheme looks like this:
https://ucarecdn.com/:uuid/-/scale\_crop/:two\_dimensions/smart/
where
- :uuid is a unique file identifier assigned to every uploaded file.
- /-/ is a mandatory delimiter that separates operations from one another and other path components.
- :scale_crop is a CDN operation URL directive.
- :smart, when added, enables the smart mode.
For instance, let's say we need to get a 300x300 px image. To apply the smart crop feature, your URL should look like this: https://ucarecdn.com/:uuid/-/resize/1024x1024/smart/
Let’s put in a real UUID to set what we get:
https://ucarecdn.com/b41fb1ac-2d33-40c3-b470-c4e106df5f7f/-/scale_crop/300x300/smart/
A sample image with a woman on the beach before a crop operation
The Smart Crop algorithm detected a person in the center and cropped the background
Just in case you consider cropping an image with a person in the very center an easy task, let’s do the same exercise once again with another image:
https://ucarecdn.com/a5a22bb5-7237-4456-a7ed-01e7a83737d1/-/scale_crop/300x300/smart/
A sample portrait for an online smart crop operation
The face is considered to be the most important part of an image, so it’s preserved.
Smart Crop has an AI algorithm in its core that detects objects in images. The algorithm uses three methods of image analysis:
- Face detection (locates human faces)
- Object detection (locates the most visually important areas of an image)
- Corner points detection (analyses image pixels to find the high contrast corners in the image. Useful for abstract, landscape, and art images)
Uploadcare uses all this information to work with images, but every so often, there's more than one object in a picture. Have a look at the image below. There are two objects: a person and a camera. Which one will Smart Crop leave and which will it crop? What’s more important?
A sample image for smart crop with two important objects
To deal with this issue, the Smart Crop feature has a built-in prioritization mechanic. That means you can set what type of object is most important for you. By default, :type is set to smart and the priority sequence is: faces → objects → corner points.
Let’s see how it works in practice and crop our sample image to 700x300 px:
-/scale_crop/700x300/smart/
A sample image with two important objects after applying smart crop
However, we might want to use this image as a camera ad; in that case, we need the camera and can crop the person if he doesn’t fit in the frame. Then we can prioritize the objects:
-/scale_crop/700x300/smart_objects/
A sample image with two important objects after applying smart crop with priority on objects
Here's another example. Say we want to create thumbnails for a sports clothing store, and it’s important for us to demonstrate a brand or a logo on an item. Then let’s give priority to the Corner Points detection:
-/scale_crop/700x300/smart_points/
A sample image with several important objects after applying smart crop with priority on corner points
Although Smart Crop is efficient in most cases, it can deliver mixed results when there are multiple objects in a picture. The algorithm strives to capture all the objects, so sometimes it can preserve secondary objects and regions you don’t need.
In that case, as well as if you don’t have a CDN project yet, you can opt for the manual cropping feature.
At Uploadcare, we believe that not a minute should be spent on performing a task that can be easily automated; and no resources should be invested in long in-house DIY development if an out-of-the-box solution exists.
Smart Crop is a part of the Image Intelligence engine built into the Uploadcare file-handling infrastructure. With its help, you can dramatically decrease your IT department workload, cut costs for developing in-house file handling solutions, and save a bunch of time. If you’d like to know more about the image transformations Uploadcare can perform, also visit our docs; and of course, we encourage you to explore the feature in practice and tell us what you think about it in the comments below!