Automatic Point-of-Interest Cropping

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.

Basic Entropy Cropping

Suppose we want to crop the following image to remove a large amount of the static black background from the image.

umbrella.jpg?w=640

The first step is to set the w and h parameters, and the fit=crop mode. This will resize the image to fill the selected width and height boundaries, and then crop any excess image data.

width: w=200
height: h=200
fit: fit=crop

umbrella.jpg?w=200&h=200&fit=crop

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.

crop: crop=entropy

umbrella.jpg?w=200&h=200&fit=crop&crop=entropy

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.

An Alternative to Face-centered Cropping

Suppose we want to resize and crop the following image to center on the model.

womanlandscape.jpg?w=640

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.

womanlandscape.jpg?w=200&h=200&fit=crop

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.

womanlandscape.jpg?w=200&h=200&fit=crop&crop=faces

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.

womanlandscape.jpg?w=200&h=200&fit=crop&crop=entropy

How Does Entropy Cropping Work?

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.