Cropping is a key technique for . Removing unnecessary background information or changing an image's aspect ratio can greatly improve the viewer's focus on the image. offers many cropping methods, including face detection. This tutorial will focus on automatic point-of-interest cropping ( ) 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. improving images imgix crop=entropy 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 and parameters, and the mode. This will resize the image to fill the selected width and height boundaries, and then crop any excess image data. w h fit=crop fit=crop 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 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=entropy fit=crop&crop=entropy 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 allowed the cropping functionality to center around it. However, the subject of an image isn’t always an inanimate object. crop=entropy 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 on a website. fit=crop 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. fit=crop&crop=faces womanlandscape.jpg?w=200&h=200&fit=crop&crop=faces The face-detection crop mode successfully detected her face and 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 so that the entire outfit is included in the scene. crop=entropy fit=crop&crop=entropy 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. fit=crop fit=crop 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 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 to fit many different sizes and aspect ratios for different designs. crop=entropy fit=crop&crop=entropy Also published here. To learn more, check out the . imgix documentation page To create a free imgix account, click here To request a demo or ask us any questions, click here

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

A Beginner's Guide: Responsive Images With srcset

Automating the Removal and Replacement of Image Backgrounds 

Sign Up for Free

Seamless Point-of-Interest Cropping: Automating Image Focus Extraction

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

5 Tips to Improve the Core Web Vitals of WordPress Websites

7 Ways to Achieve a Faster Core Web Vitals Score

8 Ways to Improve the CLS Score in Google’s Core Web Vitals

A Beginner's Guide: Responsive Images With srcset

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

5 Tips to Improve the Core Web Vitals of WordPress Websites

7 Ways to Achieve a Faster Core Web Vitals Score

8 Ways to Improve the CLS Score in Google’s Core Web Vitals

A Beginner's Guide: Responsive Images With srcset

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps