Cropping is a key technique for improving images. Removing unnecessary background information or changing an image's aspect ratio can greatly improve the viewer's focus on the image. imgix offers many cropping methods, including face detection. This tutorial will focus on automatic point-of-interest cropping (
crop=entropy) and how you can use it to crop to the most salient, or significant, aspects of the image. In particular, areas of high contrast are considered to be the most salient.
Suppose we want to crop the following image to remove a large amount of the static black background from the image.
imgix's default cropping starts at the center of the image, removing data that falls outside of the given parameters. However, in addition to cropping the image, we also want the umbrella to be in the center. To do this, we add
crop=entropy to the query string so that the “middle” becomes the most salient aspect of the image. The umbrella strongly contrasts with the rest of the image, so it becomes the focus.
The goal was to remove a large amount of the static black background to center on the subject. In this example, the subject of the image was the red umbrella and adding
crop=entropy allowed the cropping functionality to center around it. However, the subject of an image isn’t always an inanimate object.
Suppose we want to resize and crop the following image to center on the model.
The image was taken using the rule of thirds, allowing for a visually-appealing image while maintaining the model off-center. However, we also want to create smaller snippets of the image to use in multiple places of a website.
Since the cropping functionality focuses on the center of the image, and the model is off-center, she doesn’t fully appear in the snippet. We can use the face-detection crop functionality to center image around her face.
The face-detection crop mode successfully detected her face and has centered the image around it. However, we are also interested in her outfit, and it isn't entirely in the frame. The model’s knee is partially hidden, so we instead add
crop=entropy so that the entire outfit is included in the scene.
Whereas the face crop mode looks for faces and centers on them for cropping, the entropy crop mode looks for high contrast areas and focuses on those.
In the above figure, we’ve modified the image to highlight the areas of high contrast in the image. The modified version demonstrates the point of interest in the image—in this case, the salamander's head. The entropy crop mode ignored the static color of the image, instead focusing on the areas where the black and white meet—the salamander’s bright colors provide a high contrast against its background.
In the examples below, this ability of the entropy crop mode to focus on high contrast areas keeps the salamander centered as the subject of the image regardless of portrait or landscape orientation. Assuming your images have high contrast areas in a similar way, this enables you to art-direct your images automatically by using
crop=entropy to fit many different sizes and aspect ratios for different designs.