Updated 4/26/14
I’m super excited that I finally got the new Twitter layout! I was so excited to upload the new header image I created when I knew the new layout was coming. But when I uploaded my carefully crafted image, it didn’t fit!
So I spent some time and numerous attempts to reformat the image in order to get it to fit. In the process I learned a few things.
I figured you’re probably going to run into these same issues so I created a size guide for you along with my tips.
First of all, the new Twitter header photo is formatted to 1500 pixels x 500 pixels. Yes, that is big!
But, and this is the biggest issue, you don’t actually get all 500 pixels in height. You actually lose 140 of those pixels (any coincidence in that number? ) to the margins which display your top menu bar and your list of tweets, followers, etc. at the bottom of the image. So you’ll need to format your image at 500 pixels high but only use the center 360 pixels or it won’t fit.
Here’s the size guide I created to help you:
Update: The 100 pixels to the left of the profile image may actually be less or greater than this depending on your screen size. The header image will be scaled to fit the width of different sized windows and the profile image may shift left or right along the header image to accommodate this formatting.
If you choose to upload a photo that is larger than 1500 x 500 pixels, you can click and drag the image around the window to align it to your preference. You can also use the zoom tool provided to change the amount of the photo that appears in the header photo.
When you log in to your account with the new layout, whatever header image you had previously will be stretched to fit the new layout. To change the image, click on “Edit Profile” on the right side of your profile page. A camera icon and “Change your header photo” will appear over the header image. Click on the camera icon and select the Upload Photo option from the drop down menu. Upload your image and it should fit snuggly in the new header. Make sure you click “Save Changes” when you’re happy with your new image.
You will also have a similar option to click the camera icon to “change your profile photo”. Follow the same steps to upload or take a new photo.
The profile photo is set on the header image very similar to a Facebook orientation and is 240 x 240 pixels. Any photo up to 500 x 500 pixels will be scaled to fit this layout. If you are one of those people who had your Twitter profile photo set to fit within the old header image, these won’t be aligned anymore, as you can see.
The new layout changes how your whole profile looks to visitors. The profile page is standardized for everyone. If you have a custom background designed for your Twitter page, you (and visitors) will not see it on your profile page. You will still see it on your home feed page and other pages, but you’re the only one who sees those pages.
The other thing you need to be aware of is that when you go to your Home feed on Twitter, it does not show the whole header image in your profile card. It actually cuts off the side margins as you can see on my account:
Again, you’re the only one who sees this so it’s not of much concern for your marketing purposes. But if you look at your profile on a mobile device, the layout hasn’t been changed (yet?) and the header image will be cut down to these same dimensions.
The Twitter header image on mobile devices loses 240 pixels on each of the left and right sides. This means you have 1020 pixels horizontally (in the center) of the image to capitalize for both desktop and mobile viewers.
I hope this size guide and these tips help you format your new Twitter header image. If you found this helpful or think someone else would find this helpful, please share this post!
Thanks Jenn! I changed mine the other day but am not completely happy with it. Your sizing guide should really help!
I hope it does help, Kim. It was driving me crazy last night trying to get everything to fit.
And to be honest the fact that the mobile app hasn’t updated to match, is really annoying. The orientation is completely different on the two platforms.
Thank you Jenn for your invaluable and timely blog. I updated my own sites those for my clients yesterday and was cursing all afternoon. I knew someone like you would produce something to help the likes of us!
You’re more than welcome Billie. I hope this helps you update your images faster 🙂
Thanks for sharing the dimensions Jenn. I haven’t updated my ‘cover’ quite yet. Hopefully there aren’t more changes to Twitter for awhile. By the way, what do you use to design your covers?
Happy to help, Mary. Who knows how many other changes they plan on making. They’ve been many and frequent lately for sure.
As for my images, I create them in Powerpoint. I just format the size for each site and then rearrange the content to fit within them.
That was a real good post hats off and thanks!
Thank you so much for this! Bookmarking this in Evernote for when I get back on my computer. This is awesomely helpful! 🙂
I’m so glad you found it helpful, Lisa!
Finally! Thank you so much!!
You’re welcome 🙂
Jenn: I like your new Twitter image. I have had my new banner (Americanized .org for a new site that I will set up during this year) for some time. I need to find a new profile picture. I like your big smartphone and Instagram photo. You have nice smile! 🙂
All the Best,
Martin
Thanks Martin!
Jenn: You are welcome! We have to have a chat this spring / summer! 🙂
Thanks for sharing this – it’s great! We’ve just updated our and it looks much, much better.
Carmen
Thanks Carmen! I’m glad you found this helpful.
Thanks Jenn-have to mess with it some more but, this really helps!
Thanks Sarah! So glad it helped you 🙂
Thank you SOOOO much for posting this Jenn! I was gettting so frustrated trying to size that header correctly for our business page – you saved me a lot of time!
I’m so glad this helped you, Tammy!
I am able to get it working just fine on the main computer and it lines up and blah blah, however if I look at it on my ipad its appalling, because the old white text of my profile and details is all over it, doubline up logos etc. If I delete the text then there is no information in my profile. I stupidly accepted to change my banner and accept the new settings and now I have a right mess on my hands, which if it was just for me would be one thing, but I’m doing this for my company and can’t find anything to help me. Anyone? would really appreciate some help here been working on it for hours now. Am at the stage of just deleting it and leaving it blank.
Hi Sue. I’m sorry to hear it’s such a headache for you. The mobile app hasn’t updated to match the new desktop layout (yet) so there are some issues with making the header image work on both platforms.
If you can tell me the Twitter handle of the account you’re trying to figure out, I’d be happy to take a look it.
aren’t you lovely! the account is LSIportsmouth, I have dummied up blank profile for the time being, though it hasn;t updated yet on the ipad so I can;t see what it looks like. If you do look at it and it has the co logo and title at the back and the title in white on the front it hasn;t updated, if on the other hand its just a mass of picture and bubbles and no text then it has and it’ll do I suppose until they have it all figured out. Surprised they went with the update without fixing all of this. Thanks so much for being kind enough to respond.
The header image looks really good on mobile, Sue. It is the bubbles image with no text in the image and everything fits really well. On the desktop, it is the same image, and while there is no text or information in the header, it looks fine. I hope this works out for you for now 🙂
Thank Jenn for checking. I have a problem leaving something I know isn;t quite right, it just worries me! And I have to say I worry more about mobile devices than I do about big comp screens, I feel particualrly twitter gets accessed more by mobile devices than anything else (though of course i could be wrong. I’ll keep an eye on it and check back a bit later and see if they have done anything useful. I really do appreciate you checking for me.
xxx
Thanks so much for this great guide! 🙂
You are welcome, Clare! I’m so glad you found it helpful 🙂
Great post. And to make your life easier, there is large collection of ready to use twitter headers. Optimized for new twitter profile layout 1500×500 pixels – http://twitrheaders.com
Thank you, Jenn, for this valuable info!
For some reason when I upload 1500 x 500 and account for the 140 spacing, the image still gets magnified and thus pixelates (regardless of if I use .jpg or .png format). But I took your advice about uploading a higher-res image and just moving it around, and that works fine…on my landing page.
The most frustrating thing now to me is how the Cover Image displays in the Profile Summary card that appears to others when they click on your Twitter Handle. This is really where people get their first impression of your Twitter account as they discover you, so making sure that it looks good is important. Unfortunately it doesn’t. Even though I’ve used a high-res image for the cover, the profile image now looks all pixelated. Furthermore, the continued placement of a Profile Image smack dab in the middle of the Cover Image doesn’t really work anymore with the landing page redesign.
I realize that Twitter probably has some fixing to do with all the various places that it displays these images, but my question is: Are others having the same issue, or am I just missing something somewhere?
Completely agree, I really regret updating I hate what I have now, if it’s right on the main screen it’s ghastly on the small profile pic. I understand your saying they probably have tweaks to make but I do feel something as large as twitter should have predicted and trailed all these changes so this issue doesnt occur. Wish I could go back but you don;t seem to be able to.
Sue, you can change your header image to any image, including your old one. But you cannot go back to the old Twitter format/layout as this is a roll out across the board to all Twitter users (although some haven’t been switched over yet) – and not something you can opt into. It really does suck that Twitter didn’t factor in the changes to the profile cards and mobile when they launched this update, but you are not the only feeling this way.
Hi Paul. First of all, no, you are not the only one with those frustrations.
You are best using a high-res image to ensure it doesn’t pixelate. If it’s looking good on your profile, it does seem odd that it’s still pixelating on the profile card. I have seen a number of profile cards that look pixelated but also a lot more that aren’t. It might have to do with the quality and resolution of the original image.
As for the annoyance of having the profile card and the mobile layout with the profile image in the middle of the cover photo – I agree with you 100%. It’s annoying and makes it almost impossible to create a fully cross-functional header image. It would have been nice if Twitter would have accounted for all this when they launched the update, but you are definitely not the only one in this position.
The reason this happens is because Twitter actually resizes the 1500×500 cover image to 750×250 upon upload, and then uses HTML to expand it to back to 1500×500. Photos lose a lot of resolution as a result. I’m not sure why they just don’t use the original image at its native resolution … perhaps they want to save on disk space!
Interesting information, Bruce! Thanks for the info. It is odd, but good to know why things happen.
That’s ridiculous! Bruce: How did you figure out that they re-size it down and then back up as a part of the conversion? I’m wondering if there is some workaround, but from the way you describe it I can’t think of one.
OK, good to know I am not missing something, and that I am not the only one having this issue. I hope that a resolution will not be too far out. Thanks for the replies!
Thank you! I’ve put this off for months, and with your help I just fixed my banner in no time.
Great! I’m so glad it helped you, Scott 🙂
Yes, helpful but what application do I need to use to actually crop my image?
I’m not sure what you’re trying to crop but and photo editing software would allow you to crop an image to the correct dimensions.
You just saved me a lot of time. Thanks so much for the great guide.
So glad it helped you out, Alex!
I created a header with 1424(width) x 360 (height), but when I uploaded it, plenty of portion is being cropped out.
Can somebody help me out ??
The header image on Twitter is 1500 x 500 pixels and within the format listed above. At 1500 x 500, the image is a 3:1 ratio. Your image size of 1424 x 360 is almost 4:1 so Twitter is cropping the image to fit within its format. You need to create a new image that matches the Twitter format.
Hello Jenn thanks a lot for your reply.
I tried it with the size you suggested but still when i uploaded it the width is fine but image has been cropped in height.
Should i create an image at 1500 x 500 and keep marginal space from all sides, so that text or main content does not get cropped ?
I can brief you with screenshots via mail if needed.
Thanks
Did you factor in the 70 pixels at the top and bottom of the image as mentioned in the post above? Please read the information above and look at the template I built that explains exactly how to format the image so that you don’t lose anything in your header image.
Oops! It seems like i skipped that point, I thought i should take 360 height instead.
Well Thanks a lot Jenn !!
Hello All,
I tried putting a cover with 1424 x 360 size.
still plenty of area is being cropped out.
Help!
This is honestly unacceptable from a company of this size. How difficult would it be for them to NOT stretch the image and put it in the way it should be? Then scale it down for mobile properly like responsive design is supposed to do. IMHO, whoever designed this should lose their job at Twitter. Horrible roll out of the new look. Just horrible.
I’m with you Steve, I think for a company this big and important it’s totally unbelievable that they would roll out a change that is so flawed. Thanks Jenn for all your help.
Unbelievably unprofessional. They have unlimited resources and are subjecting millions of users to these horrible design decisions and non-existent testing ? What is going on>
Thanks for the information Jenn! I need to tweak the header out and have some good ideas!
Have a great day,
Joseph
My pleasure, Joseph! Glad this helped you.
Umm the profile picture box says 240×240 but the height can’t be 240 because 70+140 is only 210
The profile image drops down beyond the boundary of the header image – an additional 30 pixels. That additional space isn’t shown in the graphic I created.
Thanks Jenn! You helped us a lot by posting the actual dimension of new twitter header! It was a pain in the back before we stumbled upon your post. Thanks again!
Batam Dine Team
I am so glad this helped you! 🙂
Thanks so much for the info! Saved me a ton of headache! 🙂
Why in the world would twitter decide to have a place that *only* we see ourselves? Defeats the purpose, eh? Hopefully that’ll change soon! 🙂
I’m so glad this helped you, Deb! And, I agree, what’s the point. But I guess it allows us to customize our “page” and make it more appealing to us individually?
Very helpful tutorial but I noticed something as I was working on my header. If you leave the header at only 1500×500 it will look pretty bad on retina display. I would recommend going all the way up to 2000 width(you could probably even go to 3000) keep all the guides the same and optimize your file size by going down to 50% jpg compression (you can actually go lower, I’ve gone as low as 10% and it still looks leagues better than 100% at standard rez). Twitter will downscale the image anyway and when it does it fixes the issue with standard graphics looking horrible on modern displays.
Thank you for this tip and suggestion! Twitter does resize and if making the image larger helps with the resolution when resized, then this could definitely be helpful for many 🙂
Hi Jenn, you explained it very well but still can’t figure it out how to make a design that displays good on both desktop and mobiles. Devices have always the profile picture showing in the up-center of the screen, which hides the most important part of a design that looks good on a desktop, right? So the “safe area” of your template is not 100% safe on mobile devices, because that profile picture going to hide what you put in the center of the template (the most important area of a design) … pls correct me if I’m wrong and is there any way around it? thx
You are correct, Jeff, this template is really only for desktop access. There is very little available space for mobile profiles.
You have about 400 pixels of usable space on either side of the profile photo on the mobile devices. It does make it very difficult to create a header image that works on both mobile and desktop. I would recommend you focus on whichever platform is most popular for your business or Twitter account and go with what works for that layout.
Dear Ms Herman, I too build images in power point & save to gimp, etc. Presently working on my twitter header. After reading your wonderful blog, the next day found this *template trying to go larger for a theme I’ve established. http://twitterheadersize.com/ Seeking examples from ***Google images, I searched ‘Examples of Twitter Headers’ to validate what I’ve envisioned.
Question: Can you please tell me how to transpose say 520 pixels x 260 pixels into inches… ( ” ) x ( “) so I can start my layout in PPTX with out the guess around process that’s longer. Pasting from GIMP results in oversize image to re-size smaller when it’s pasted into PPTX. Thank You
There are 96 pixels in one inch. So 520 pixels would equal 5.41666 inches (520/96).
Hello Jenn! You have saved the day! I struggled with a header for a new Twitter account for hours today and could not figure out why it looked so awful once I uploaded the pic. Photoshop actually started whispering to me that I couldn’t get it right, effectively eroding my confidence. In frustration, I decided there must be someone who has done this and figured it out. Google gave me you! I immediately followed your instructions and within 2 minutes I had the perfect header. What utter joy! In celebration, I lifted my flask of water to you Jenn! Thank you.
Hi Sarah! I’m so glad this helped you so much! And I hope you were able to tell that silly Photoshop that you could get it right 😉
Dear Friends,
I think I cracked the Twitter Code! Well…at least I have figured out a way to resolve the pixelation issue. On many platforms that designate a certain pixel size, we many times think it is WYSIWYG…so for Twitter we think that 1500 x 500 requirement means that we should develop a 1500 x 500 image (or thereabouts with minor header/footer loss as described in this article) and it should not lose any resolution. However, as I have complained above (as well as others), the new Twitter format appears to upload a perfectly sized image with no loss of quality, but then when you SAVE it completely loses its quality and becomes “pixelated”.
Well, today when I was once again struggling with this, I selected to use the “Reposition & scale header” slider tool and zoomed in on a certain area. To my surprise, the image did NOT lose any quality when I did this and Saved! Now I did test just very slightly making an adjustment to zoom, but this still resulted in pixelation. However, you don’t need to zoom in that much – about maybe 1/16th of the allowable zoom scale.
I’m so very excited to have found this workaround, and wanted to share with everyone here in hopes that it will help you resolve your issue as well.
Thank you so much for checking back in with your experience and update, Paul! I hope this will help others who are experiencing the same thing.
Genius, thanks Paul! This is big news actually. Please post this to other forums if you get a chance? Really really helpful – I’ve been battling with Twitter header quality for months now!
Thank you Jenn! I spent a good amount of time sizing for a client and now I have the format.
Linda
So glad you found it helpful, Linda!
Thank you kindly for the sizing guide; it was most helpful!!
So glad you found it helpful, Jessica! 🙂
Great Info. thanks Jenn 🙂 but still a big question, twitter filters the cover page when we upload and also reduces the file size, as a result it reduce the quality and really looks weird…suggest me the file format to keep which wont reduce quality.
I always recommend using PNG files rather than JPEG as they hold resolution and color much better. I also advise you to read Paul Estes’ comment from August 11th with his recommendation on file saving to resolve the issue of pixelation and poor quality.
Glad I found this article. I have been struggling with the sizes for Android and iOS devices. It seems like more centralized content on the image will do the trick.
Keeping your content centralized to the header image is definitely important. But then you still “lose” the space where the profile photo goes on mobile… it’s not a universally convertible image between desktop and mobile for sure.
Well, for me the length is 420 px not 360 does that differ for different screen sizes too?
I’m not sure what “length” you’re referring to as 420 vs 360. The visible height area for desktop headers is 360 pixels. But the header should look similar on all desktop devices, though there may be a little fluctuation in the right and left margins depending on screen size/proportions. And, mobile devices should all look the same as each other, though different from the desktop layout.