A tip on how to get better share images from challenging originals

Even if you have all the control in the world, it's not always easy to make a horizontal crop from a vertical image and vice versa. And what usually happens with vertical images is that they get horribly cropped incorrectly. Like in the image above, where our office friends at Beams had amazing news to share, but this is what happened to their shared image. This is a perfect example of forced middle cropping.

The practice of forcefully cutting an image to fit its container should be a thing of the past, but it still seems to be the current norm. While we wait for the wider adoption of the IPTC image region standard for cropping purposes, let's learn how to deal with forced middle cropping, especially when preparing "difficult" images for share image assets (also known as OG images or Twitter cards). You can find more information about IDC and social share image size in an earlier blog post, which addresses a simple case of creating a share image from a vertical image.

‍

The recommended size for a share image is typically around 1200x630px. However, it may sometimes be displayed as a square (or randomly in a vertical format). Since it's difficult to predict the exact shape, it's best to be prepared and optimize your image for the most favorable interpretation.

I recommend focusing on creating either a landscape or square image for sharing and forgetting about the vertical version. It may be challenging to keep everything centered, but this is the only way to try to overcome the issue.

‍

We were amazed when our freelance developer, Aurélien, shared his smart solution for creating horizontal share images from vertical originals, while also making them look good as squares.

‍

The Aurélien method is simple: instead of creating the basic traditional 1200x630px OG image, you crop a 1200x1200px square out of the vertical image and ensure that the horizontal crop fits in the correct position. The graph below shows a visual representation of this instruction.

‍

To help you get started with exploring the Aurélien Method, we have included two crops, one sized 1200x630px and another sized 1200x1200px, along with overlays that demonstrate the forced middle cropping area. These resources can be found in Frameright.app, allowing you to easily begin exploring this technique and effectively manage your OG images and SEO.

‍

‍

We love to hear from you! What is your favorite challenge when it comes to sharing your visual material? Any funny stories you'd like to share?

‍

Cheers,

Frameright Team