How Smart 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 -

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

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.

In each case, the smart crop was able to get the most important part of the image in the centre.

How to enable smart 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.jpg

You can read more about this focus parameter in ImageKit here.

Practical applications of smart 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.

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:

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:

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 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:

Conclusion

Using smart 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!