In our previous articles, we talked about resizing parameters and different crop strategies, modes and focus parameters. In this article, we will look at the smart crop feature and the two different modes that it supports.

Smart Crop is a feature that intelligently looks at the content of an image and automatically focusses on the most important part of an image for cropping.

In normal resize and cropping, when the input and output aspect ratios don't match, cropping happens invariably to get to the exact size required in the output image. And by default, it's the center of the image that is preserved during this cropping. 

However, there might be cases, where the main subject of the image is not in the center of the image. In such a case, if cropping does happen, then the main subject of the image would get cropped out and we would be left with a poor thumbnail. This is what smart crop solves for by automatically determining the most important part of the image and ensuring that it is preserved in the output image.

Smart crop has two modes.

1. Auto smart crop

In this mode, ImageKit automatically determines the most important part of the image and preserves it in the output thumbnail. This is enabled by passing the 'fo-auto' parameter in the URL transformation parameters.

For example, in the image below, the girl is the main subject of the image and she is slightly towards the left from the center of the image.

https://ik.imagekit.io/demo/img/girl.jpeg

If we use regular resize and the default crop strategy, we get the following result, where the main subject is off the center. This is definitely not a great thumb image to have.

https://ik.imagekit.io/demo/img/tr:w-200,h-300/girl.jpeg

With smart crop auto mode, this is the how the final result looks like
https://ik.imagekit.io/demo/img/tr:w-200,h-300,fo-auto/girl.jpeg

The main subject is right in the center of the final thumbnail.

2. Face smart crop mode

The other mode in smart crop is the face crop. In the auto crop mode, we were still preserving as much as the original image was possible while centering around the most important part of the image. In face crop, the crop works more like the extract crop mode, but instead of focusing on the center of the image, it finds out the face (or multiple faces) in the image and focuses around that. This gives you perfect thumbnails with just the subject's face that make up for good profile pictures.

This mode is enabled using 'fo-face' parameter in the URL transformation parameters.

For example, for the above image, this is how face crop works
https://ik.imagekit.io/demo/img/tr:w-150,h-150,fo-face/girl.jpeg

Quite distinctly from the auto smart crop, this thumbnail is focussed just around the face. 

Note: Smart crop may not give accurate results for some images. This is partially a trade off between speed (needed for real-time transformations) and accuracy.

If you have any questions or feedback about the smart crop feature, or a use case you would like to bring to our notice, please reach out to us at support@imagekit.io. 

Did this answer your question?