New Feature: Image Focal Point


What Is a Focal Point?

In short, a focal point is that area of a picture that attracts the eye. Artists put great effort into defining an artwork's focal point. These are the areas of a painting or picture that attract a viewer's eye. We are naturally drawn to areas where light and dark are in stark juxtaposition. Bright colors, fine detail, sharp edges, anomalies, patterns and any arrow-like “pointers” also attract the eye. There are many good images that just don't have the right focal point. Changing the focal point can save these images from being passed over. 

What Are Aspect Ratios?

The aspect ratio of an image is the ratio of its width to its height. These ratios are commonly expressed as two numbers separated by a colon, as in 16:9. For an x:y aspect ratio, the image is x units wide and y units high. 

How Are These Currently Generated?

Up until today, the focal point was always determined by an algorithm. This is still the case if you do not use the new focal point feature. 

Tempest uses an Image CDN, Cloudinary, to perform cropping operations when the aspect ratio of an image is changed. We send the desired aspect ratio to Cloudinary as a URL parameter and Cloudinary will use the focal point of the image to determine what part of the image to include in the delivered image. We can optionally send an X and Y coordinate corresponding to the focal point of the image.

By default (if no focal point has been defined in Tempest) Cloudinary will use its own algorithm to determine what the focal point of the image should be. The way that this algorithm works is to first look for any faces in the image and if the image contains faces, chooses a focal point in the middle of the faces in order to include all of them or as many as possible. If no faces are found, then it uses another algorithm to determine what is likely to be the most important or interesting part of the image and centers the focal point there.

For more on how face-detection based cropping works with Cloudinary see this page.

New Feature

We recently added a new Tempest feature that allows publishers to specify a focal point for images. This allows for greater control of what portion of the image remains included when an image is cropped to fit into a specific aspect ratio (e.g. when used as a promo image or featured image.)

Why Does This Matter?

The image's focal point only applies to any place on the site where we enforce a specific aspect ratio. These include promo images and full-bleed featured images. We do not enforce the aspect ratio on inline and breakout images. Having a compelling focal point on promo images improves clicks on social hubs. You want to be the best image on a feed so that readers are compelled to click on your image rather than a competitor's. 

How To Set the Focal Point

1. Edit the image in the media library and click the new "Set Focal Point" button.
2. Then click the image at the location where the focal point should be.

NOTE: As you drag your cursor over the image, you'll see x and y appear beneath "set focal point," these numbers are your aspect ratio. 

3. Then save the image.
If you'd like to get even more precise, after clicking and saving, you can edit the focal point using the - and + signs parallel to the x and y. 

Can I Remove It After Choosing a Focal Point?

If you want to let the focal point be determined automatically, the focal point can be removed and it will return to the default behavior. To remove the focal point from an image, use the following steps:

  1. Edit the photo information (step 1 in “How to set an image focal point in Tempest”)

  2. Scroll down to the “Photo Focal Point” coordinates

  3. Select and delete the contents of both fields so they are empty, the placeholder “Add your photo” text should be visible

To learn more about image best practices, visit this page.
If you have further questions, please contact
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk