Images are a critical piece of all websites and apps. Whether it is 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 be actually 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. And 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, that want to deliver a perfect experience to your users, even if it is a thumbnail of a product, you would not want such improperly cropped thumbnails to be shown to 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.
| 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.
How to enable smart crop in the image URL?
Well, it’s really 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 done.
Here is how it 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%) |
|---|---|---|
 |
 |
 |
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.
Here are a few examples of the 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%) |
|---|---|
 |
 |
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 is more to it.
The smart crop has another face-cropping mode that finds out the face from 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.
Here are a 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 simple as well. 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 these two images for the same.
|
 |
|---|
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 towards 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? Give it a try for your images and start delivering a better experience to your users.
Top comments (0)