Twitter Header Image Size / Dimensions

Robin ScottTutorials8 Comments

UPDATE – there is a new image header size for Twitter in 2014, and, as the below post is still very popular, it remains, but note this is no longer the case (though images in this size should still look quite good).

The New Twitter Header Image Dimensions

New for 2014, the header image size is: 1500 x 500 in pixels.

This is for the new Twitter profiles that rolled out a month or two ago (correct June 2014).

The below information is no longer accurate, but remains as a historical archive of the old information, and there are also some somewhat helpful comments at the bottom (scroll down).

———————————-

As we wrote a post about Facebook Cover Image Size, just now, and we also today completed a Twitter Header Image re-working for Race-Calendar.com, it makes sense to also post a quick item which explains the Twitter header image dimensions, too.

Twitter Header Image Size / Dimensions

520px x 260px

That is, 520 pixels by 260 pixels.

You can use .JPG, .GIF or .PNG, though we find that GIF images tend to upload more easily (sometimes tricky uploading PNG files, for some reason) and that gif can be compressed to a smaller file size.

[UPDATE] please note that these image dimensions are different from those suggested by Twitter itself, even, but look and work as intended, and upload more easily than the larger dimension images which often fail to upload at Twitter. Twitter’s suggested header image size is 1252×626. Importantly, note that the aspect ratio of our image size and Twitters is exactly the same: ours is the smallest possible size, great for image optimization: why go bigger when it won’t display in that size?[/UPDATE]

Where is the Twitter Header Image Displayed?

The Twitter header image is displayed on your Twitter home page, i.e. if someone clicks on your Twitter name. For example, for Race-Calendar.com, it is here.

Best Styling for Twitter Header Images

Because the Twitter header image contains your Twitter logo in a square in the centre, and your Twitter bio, username, and web address in white text below that in the centre, too, it is best if you don’t have too much “going on” front and centre of your header image. A landscape, for example, would work well.

As an example of what you might like to do with your Twitter header, for Race-Calendar.com, we used a broad running scene, but found that the words were a little “lost” so on the second iteration, we put dark grey boxes where the Twitter words were to go, to make the text more readable. See the example in the below screenshot:

If you have any questions or comments, please leave them below. If you’d like us to design or manage your corporate Twitter or Facebook account, please feel free to contact us any time.

8 Comments on “Twitter Header Image Size / Dimensions”

  1. Since writing this, Twitter has updated and improved things a bit, including automatically putting some background behind the text. Have a look on your smartphone, too, before settling on any one design!

  2. As often happens, people have been accessing this item looking around on Google. Someone came in here today searching for “how to make a gif your header on twitter” – using the above will help you to achieve that, though I fancy the person was looking to make an ANIMATED gif the header. This likely won’t work!

  3. Well, I disagree with “so why use the larger image as long as it’s displayed smaller anyways?”
    twitter seems to use these large scale images especialls for responsive devices and higher screen resolutions so I’d definitely go for the larger size of 1252 x 626px

    1. You are welcome to disagree, however, don’t wrap quotation marks around something I didn’t say.

      What is a “responsive device”?

      Does the size of the image have any effect upon resolution?

      Of course, the above questions are rhetorical – the answer is “there is no such thing as a responsive device, it is the website / application which RESPONDS to the screen size of the device” and the size (in pixels) of an image has NO EFFECT upon it’s resolution, which (can be) measured in dots per inch, or similar.

      1. Now, there is a case for using double sized images for iPad iPhone in many cases, though Twitter tends to “smush” your images in any case, so it is not clear just what benefit would be gained from having an ultra-high resolution graphical header – on Twitter. If you could point me to somewhere I can witness a difference with the naked eye, where there is a benefit to using a larger image than a smaller one, I will gladly change my advice.

  4. A lot of people have this past couple of days come here looking for something relating to “twitter dimensions are too small on header” or “twitter dimensions are too small on header on Android” – this indicates to me that people are receiving an error message on Twitter (as happens from time to time!).

    Leave a comment if you’ve had this message. Chances are, something changed at Twitter this week, and you’ll need to upload a new Twitter header image…

    We have not seen this message – and we manage 40+ Twitter accounts – which suggests that our suggested dimensions are not “too small”…

  5. So, if you’re intending your header to look very crisp on a retina device, then go for the larger sized pic of 1252×626.

    Note, however, that it is sometimes difficult to upload large files to Twitter. You have a 2MB maximum (last time we tried) to be aware of too.

  6. Note that this twitter header size info is a little old – you don’t need to do the dark background any longer, as Twitter itself has worked out that white writing on light backgrounds doesn’t really work, and has made the background image go darker by default. Also the mobile image functionality has improved a lot at Twitter since this was posted.

    The resolutions / image size info is still relevant however.

Leave a Reply

Your email address will not be published. Required fields are marked *