Facebook's Image Cropping is an inconsistant 'Wild West'
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 is no system. It's inconsistent at best, and the photos team even admits "Sadly, cropping is a bit of the wild west at the moment." Let's dive in and see why.
The Old Desktop Newsfeed
Everything looks fine. Image is coming in at a perfect square, scaled at just above 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.
Uploading that same image directly from my desktop yielded different results. It was displayed almost edge-to-edge at 526 x 394 px and cropped off the bottom.
To test again, I uploaded an "organic" image, aka an image without text that's not a screen cap. This time it displayed fully edge-to-edge at 552 x 414 px with cropping centered near the middle and meta data overlaid.
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.
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.
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).
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 meta data over the first 66 px of your image, and lightbox puts a black bar over the last 35 px.
I'm still not clear on the mechanism behind image cropping on the new Newsfeed or Timeline on desktop. Why is app sharing different than desktop uploading? How does Facebook determine an organic photo vs. a synthetic photo?
Answers to these questions will make it easy for my users to share beautiful content with their friends on Facebook.
The Photos Team needs to release their own guide or standardize their practices. Designing content bound for Facebook should be easy and awesome, not mysterious and confusing.