A Guide to Facebook's Photo Cropping 'Wild West'
At Changemakrs our users love sharing quotes to Facebook. We create an image with the quote and a photo of the person who said it. But I noticed Facebook will crop our photos so the quotes are either partially visible or completely hidden. I set out to understand the system behind their cropping so I could optimize my content.
I'll give you the short story up front. After researching existing blog posts, doing my own research and talking with the Facebook Photos team, my conclusion is there are no hard and fast rules. It's pretty inconsistent, and the photos team even admitted, "Sadly, cropping is a bit of the wild west at the moment." Let's saddle up and see why.
The Old Desktop Newsfeed
Everything looks fine. Our square image is coming in at a perfect square, scaled down to around 50%.
The New Desktop Newsfeed
When sharing directly from our app, the image is scaled even smaller at 394 x 394 px, and is strangely isolated, showing with an awkward white border.
Uploading that same image directly from my desktop yielded different results. It was displayed almost edge-to-edge at 526 x 394 px and part of the quote text at the bottom of the image is cropped off.
To test again, I uploaded an "organic" image, aka an image without text that's not a screen cap. Justin Lafferty at AllFacebook spoke with the Photo Team and found that they differentiate between normal photos and synthetic ones. Indeed, this photo displayed fully edge-to-edge at 552 x 414 px with cropping centered near the middle and metadata overlaid.
The New Desktop Timeline
This one's fun, too. My tests show Facebook either crops aligned to the top of the image, just above the middle, or the middle. It seems to choose the alignement at random. The size is 504 x 378 px.
iPad
The iPad displays our shared photos consistently with the crop centered at the middle. However the Timeline and the Newsfeed have a slightly different ratio, illustrated above. The Timeline displays at 351 x 235 px and the Newsfeed displays 625 x 468 px.
iPhone
Thank you iPhone! Fully edge-to-edge, no cropping or weirdness! The Newsfeed and Timeline display exactly the same at 309 x 309 px (618 x 618 px @2x).
Optimal Ratio
The best size for a Facebook image is 552 x 414 pixels. Anything above this size at a ratio of 3x4 will do equally well.
Remember that the new Desktop Timeline puts metadata over the first 66 px of your image, and in lightbox mode there's a black bar over the last 35 px.
Conclusion
I've designed a new share image at a 3x4 ratio to cut through this cropping weirdness. But I'm still not clear on the mechanism behind image cropping on the new Newsfeed or Timeline on desktop.
It'd be great if the Photos Team would release their own guide to this Wild West or standardize their practices. Designing content bound for Facebook should be easy and awesome, not mysterious and confusing.
After all, our users have uplifting content to share, and we want it to reach as many people as possible.
– Brooks Hassig. Designer, Cofounder of Changemakrs