How Smart Crop and Object-Aware Crop Can Help Deliver Perfect Responsive Images
Images are a critical part of all websites and apps. Whether it be an e-commerce store, a travel website, or a content website, a typical website would have hundreds of thousands of images. The number can be significantly higher if you have user-generated content on the website.
With such a large number of images on a website, for a perfect responsive image experience on each user’s device, the images should also change according to the device that is requesting them. Which means that instead of resizing the image using CSS, the image that loads on a mobile device should actually be smaller in dimensions than the one that loads on a desktop device.
Why does regular cropping fail?
In such a scenario, where a variety of images have to be resized for different devices and different placeholders, cropping in an image is inevitable.
The default cropping strategy adopted for images is centre cropping - preserve the centre of the image and crop out from the edges. While this strategy works fine for a lot of cases, it can fail when the subject is not at the centre of the image.
Here are some examples of poor thumbnails as a result of centre cropping -
| Original Images (scaled down) | Image thumbnails 150px x 200px |
|---|---|
You may get away with such thumbnails on your website, not all of your users may care about it. But if you are one of those companies which want to deliver a perfect experience to their users, even if it's a thumbnail of a product, you would not want such improperly cropped thumbnails to be displayed for your users.
What’s the solution then? How do we ensure that we are cropping the images correctly while creating thumbnails?
Enter ImageKit’s Smart Crop and Object-Aware Crop
Smart Crop is a content-aware cropping method available to all ImageKit users that analyses the image content, and tries to ensure that the most important part of the image is always at the centre of the final thumbnail.
Let’s see how it works for the images where the centre crop failed.
| Original Images (scaled down) | Centre-cropped image thumbnails 150px x 200px | Smart-cropped image thumbnails 150px x 200px |
|---|---|---|
In each case, the smart crop was able to get the most important part of the image in the centre.
Now, if your image contains multiple objects and you need to crop out a single one, object-aware cropping is the solution. With over 80 different objects to choose from—including animals, food and drink, everyday utilities, and more—object-aware cropping automatically isolates and crops the desired object from your images.
How to enable smart crop and object-aware crop in the image URL?
Well, it’s really quite simple. Along with the height and width, you need to specify the focus mode for cropping and set it to auto. This is done using the fo-auto parameter in the transformation string in the URL.
For example,
https://ik.imagekit.io/demo/img/tr:w-150,h-200,fo-auto/test_image.jpgYou can read more about this focus parameter in ImageKit here.
For object-aware cropping use the parameter fo-<object name>. That means if you want to crop out a chair use fo-chair; couch with fo-couch.
https://ik.imagekit.io/ikmedia/Graphics/Furniture.jpg?tr=fo-couchcrops out the couch.https://ik.imagekit.io/ikmedia/Graphics/Furniture.jpg?tr=fo-chaircrops out the chair.
Practical applications of smart crop and object-aware crop
Now that we have seen how ImageKit works, let’s take a look at how you can use it on your website.
1. For e-commerce websites
Creating perfect product thumbnails
A product needs to be displayed on multiple pages on your website or app - the listing page, the product detail page, as a small thumbnail in an image carousel, etc. With smart crop, you can ensure that each product thumbnail is perfect and showcases your product the way it should be shown.
How can smart crop can help your e-commerce store?
We are using scaled-down versions of images here for display, but it does give an idea about the power of smart crop.
| Original Image | ||
|---|---|---|
| Without Smart Crop | ||
| Mobile Thumbnail 200px x 200px | Desktop Listing Page 350px x 300px | Desktop Product Carousel 400px x 600px (scaled to 60%) |
| With Smart Crop | ||
| Mobile Thumbnail 200px x 200px | Desktop Listing Page 350px x 300px | Desktop Product Carousel 400px x 600px (scaled to 60%) |
Now what if you want a product carrousel where in addition to the original image, you require close-ups of each object you desire to sell. Object-aware cropping automates this for you and you don’t need to manually crop out each object.
| Original Image | ||
|---|---|---|
| With Object-Aware Crop | ||
| Couch | ||
| Chair | ||
2. Travel & content websites and user-generated images
Get the most important region in your thumbnails
ImageKit’s smart crop can automatically determine the most important part in an image, whether it’s a monument or a landscape or a car, and preserve it in the final thumbnail.
Few examples of smart crop in action for different kinds of images:
| Original Image | |
|---|---|
| Without Smart Crop | |
| Mobile Thumbnail 200px x 200px | Desktop Cover Image 800px x 300px (scaled to 60%) |
| With Smart Crop | |
| Mobile Thumbnail 200px x 200px | Desktop Cover Image 800px x 300px (scaled to 60%) |
E-commerce & content websites often have the need to remove an image's background to create different versions of them. You can now use ImageKit's Background Removal Extension to remove the background of images in the media library with ease.
Face thumbnails with smart crop
Till now, we have seen how smart crop works great for bringing the subject to the centre of the image. But there's more to it than that.
The smart crop has another face-cropping mode that finds the face in an image and extracts it to create a thumbnail. This would help in cases where you need to create profile pictures from a user’s photo.
Few examples of the face-cropping mode in action:
| Original Image | Regular Smart Cropped Image | Face-cropped Image |
|---|---|---|
How to get the face cropping mode for your images?
Again, like every other transformation in ImageKit, this one is really just as simple.
You need to set the value of the focus parameter to face in your image URL. This is done using the fo-face parameter in the transformation string in the URL.
For example:
https://ik.imagekit.io/demo/img/tr:w-200,h-200,fo-face/test_image.jpg
Putting it all together with other transforms
Apart from the examples demonstrated above, you can combine smart cropping and object-aware cropping with other transforms in ImageKit to create really cool user interfaces.
Let’s say, just like Facebook, you want to create a user’s profile page with a user profile picture and a cover photo. Let’s take the following images as an example.
With the smart crop set to face-crop mode and the radius transformation, we can get a rounded profile picture of the user.
We can then use the regular smart crop and blur transformation to resize the cover photo as per the required size for desktop and mobile devices.
Combining these two pictures using HTML and CSS (or in an app), this is how the end result can look like on different devices:
Your object-aware cropped images can be appropriately padded to fit distribution site requirements, and you can easily add overlays to display prices.
Conclusion
Using smart crop and object-aware crop for your images requires a very small change in your image URLs but it can help you inch closer to a perfect image experience across devices. Just add fo-auto for general smart crop and fo-face for the face-crop mode of smart crop. It is especially useful if you get a lot of user-generated content or the main subject in the photos is off-centre.
So, what are you waiting for? Try it for your images and start delivering a better experience to your users. Sign up for ImageKit for free!