Twitter has been embedding photo previews in tweets for a while now. A lot of people have found creative uses for this feature. The Pixelcite tool by friends at NPR’s Visuals Team and Melody Kramer is a great example that I use often.

Unfortunately, not everybody is as apt at understanding how exactly Twitter manages photo previews as the authors of Pixelcite: Chris Groskopf, Melody and Danny DeBelius, which means: you can see a lot of weirdly-cropped photos in a typical timeline.

Do you want to know how to size your photos to get the perfect photo previews? Even if you want to display two images side by side? How about four?

If you do, please ignore how much this just sounded like an old Microsoft commercial, or a run-of-the-mill diet pill one, focus on remembering how an imperfectly cropped photo lost a key message for you, last time, and keep reading…

Couple days ago, a friend of mine tweeted a post that started to demystify the secrets of Twitter photo previews. It was a great post, but it mostly concentrated on explaining how Twitter crops. Instead, I want to tell you how to entirely avoid any side effects of unpredictable cropping, and do it in repeatable way.

3 Rules for Perfect Twitter Photo Preview Cropping:

  1. Do not tweet photos the largest side of which is larger than 1024 pixels.
  2. Do not tweet portrait-oriented photos (height > width).
  3. Use proper aspect ratio for each scenario (see below).

One more: Do not try to tweet photos larger than 3MB (you can’t).

For a single photo in a tweet:

Use landscape photos with aspect ratio of 2:1 (width twice wider than the height).

For two photos in a tweet:

Use aspect ratio of 1:1 (a square photo).

For four photos in a tweet:

Use landscape photos with aspect ratio of 2:1 (width twice wider than the height).

But How Do I Get Exact Aspect Ratios?

If your tweets are not coming from a CMS of sorts where developers with mad skills can make magic happen for you, you are still fine, because most photo editing tools can do fixed-aspect-ratio selections easily.

I am going to describe how to do it in Photoshop. Now that they have affordable monthly subscription, accessible to mere mortals like me, they are on my favorites list, but if Gimp is more like your kind of pie, their documentation has detailed description of how to select a specific aspect ratio on an image. Just search for ‘aspect ratio’ on the linked page.

In Photoshop, this is very easy: just use the familiar select tool, but switch the selection style to “Fixed ratio”:

Final Words

This is not exact science. You will get predictable and consistently good results following the above rules, but you should know that Twitter will always pre-process your photos.

It will also violate some of its own rules and display things slightly differently on the web than in its apps. But that’s OK because: who uses Twitter web app, anyway, right? Besides, the differences are typically subtle enough that you are still way ahead of the competition by following the aspect ratio rules.