Using Facial Recognition to Create Sanity Hotspots

In this guide, we will use AWS Rekognition to find a face in Sanity.io images to better serve assets to users

So, you’ve set up your Sanity model with a square aspect image…but wait! Now designers want another image cut for a 16:9 view of the image. While, it may be tempting to add another image field on your model for this new image aspect, there’s another way! Setting an image “hotspot” can be a much simpler way to manage the asset. After setting the hotspot, you leverage Sanity’s CDN to cut the image for given layout, and “fill-in” the aspect ratio you’re looking to use.

Let’s use this image as an example

When requesting a 3:1 cut of this image, we will get…

A general rule of thumb: avoid decapitations.

To avoid the accident above, we will leverage AWS Rekognition to find the face.

1. Setup Project

For purposes of this post, we’re going to assume you’re in the Sanity project where these images live. Let’s add…