One thing the people who read this blog have repeatedly asked me, is;
What size should I use when designing an image for ??? social media website
(Replace ??? with Google Plus, Twitter, Facebook, or any other social website which allows you to use your own image or multiple images on your profile.
Some of these images are intended to be just a simple picture of yourself in portrait, to show your face off to the world.
So, instead of answering each one individually, I thought I’d try to answer them all at once. The only caveat is that these sizes are normally changed a couple of times a year, and I will try to post the updates to my blog, so that you always have a relatively complete list of image size and ratio for each of the images within each of the social media networks you are building an image for.
As far as I am aware, the image sizes are the same for individual, small business, and large corporate accounts, with very very few exceptions; so let’s get started.
Twitter currently allows you to specify 3 different images. A profile, header, and background images.
Twitter Profile :: Profile Image
- Height: 400px
- Width: 400px
- Recommended Ratio: 1 to 1
The current profile image is recommended to be 400 pixels wide by 400 pixels high. As a result, and without really thinking, Twitter has defined this picture as having a 1:1 ratio. The same image will be shrunk and reused throughout the website, currently with the corners rounded off to turn the profile image into a fully formed circle. As a result, I recommend making sure that there is only minimal information in those areas of your profile image.
Twitter Profile :: Header Image
- Height: 1500px
- Width: 500px
- Recommended Ratio: 3 to 1
Header images are becoming more common across social media websites of all types. The twitter one uses an aspect ratio of 3:1 with a maximum size of 1500 pixels wide by 500 pixels high.
It is recommended that the first 500 pixels are treated as non-usable interactive space. So they should contain the background imagery, but not any text or similar.
Twitter Profile :: Background Image
- Height: 2500px
- Width: 1600px
- Recommended Ratio: 25 to 16
You will see loads of different advice about a background image. My personal recommendation would be to either design something which repeats and is relatively small (such as a 200px square, for exmaple), or a background image which is large enough to cover all screen sizes and resolutions. At the moment, this could be anything from 1024px by 768px, all the way up to 2500px by 1600px. Remember, that if you use the second option, then you will need to take into account that not all screens will be able to see all of the image, so it is definitely worth testing the image on many different screen sizes, so that you can be sure that the image you are using will look okay on even the smallest devices (Like your mobile phone or tablet device!)
Twitter Posting :: Inline Image
- Height: 1024px
- Width: 512px
- Recommended Ratio: 2 to 1
When you are posting an image to Twitter, there are more than just a few things to be concerned with. Firstly, you need to make sure your image fits within the 1024px by 512px maximum recommended image size which twitter uses to make sure that your image will gain the most attention on the social network. Images which are less than 440px wide may have grey bars added to either side of the image to keep it centralised within the section of the page it is being displayed on.
It is worth noting that only images uploaded via the twitter image publishing system (http://pic.twitter.com) can be expanded, so whenever possible you should upload images via that system.
If you are using the twitter meta or HTML tags, added to your website, then it is definitely advantageous to follow these rules when using these tags, as well as when creating your own twitter posts.