Smart Crop is a feature that intelligently looks at the content of an image and automatically focuses 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.
The Smart crop feature in ImageKit 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.
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.
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.
You can read more about the Focus (fo) parameter in our docs.
You can read about other use examples and use cases of smart crop for images on your website here.
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.