Setting the Focal Point of an Image (Image Cropping)
Have you ever wondered how an image on your site is cropped? Maybe you keep trying to upload someone's headshot, only to have the top of their head cropped out. This guide explains focal point, and how to make adjustments to ensure your image renders the way you want.
The process for adjusting focal point is the same regardless of where your image is located. Images in a Text Area, Banner Image, Postcard, etc. all have a focal point setting that can be accessed by opening the image editing interface. It can also be set at the time the image is first uploaded to your site.
How Focal Point Works
Images are cropped around their focal point, which is a designated specific area that will always be kept visible when the image is cropped to different sizes. This ensures that the most important part of the image isn't cut off regardless of the aspect ratio.
By setting a focal point, you can direct the viewer's attention to a specific location within an image, even when it's cropped to fit different components on your site.
Using Focal Point on an H&S Site
On H&S sites, the focal point is marked as a "+" within the image. The default focal point is the exact center of an image, both horizontally and vertically.
To change this location, simply drag the plus sign to the priority area of your image, such as around the eyes and nose on a person's face. When the image renders on your page, it will display in the size ratio predetermined by component type ( 📷see the guide on image sizing for more information ). Any cropping will happen around the focal point, ensuring that the marked area always renders on your page, regardless of how the image may be cropped.
Troubleshooting
If your image is still cropping in a way that is problematic, for instance, still cutting off a person's forehead, you may need to upload a new image. Ensure there is adequate padding around the subject to allow for resizing on your published page. In the case of a headshot, this would mean uploading a version that is more zoomed out from the person's face.
For example, this headshot includes very little space above the subject's head, and the center of the image is the person's chin. While adjusting the focal point to the person's eyes or nose will help, another option is adding an image with more of a buffer around the person's face.
Video Tutorial for Adjusting the Focal Point