Twitter’s new layout, which should be rolled out to all users by now, gives some different options for displaying images in your profile on desktop web browsers.
The old desktop layout consisted of a background image behind most, or all, of the page, as well as a profile picture.
The new desktop layout keeps the profile picture but instead of a full page background image, you now have a full-width header image.
Recommended Image Sizes to Upload for Twitter Profile Picture & Header
The recommended sizes to upload are:
Profile picture: 400px by 400px. It’s displayed as a square image with rounded corners (the corners are applied automatically) and a thin white border. If you upload an image that isn’t a square, you’re given the option to reposition or zoom in when you upload.
When the browser window resizes, the profile picture size stays constant.
Profile Header: 1500px by 500px. Panoramas work well. While 1500px x 500px is the recommended size, if you don’t want Twitter to resize the image, you can get away with 1263px x 421px. But even when it’s not being resized, it’ll still get crunched with heavy JPG compression.
How the Images Display
The new layout is designed to resize depending on the user’s web browser window. That means it’ll scale according to the users screen and how much of the screen the browser uses.
Profile picture: When the browser window resizes, the profile picture size stays constant.
Profile Header: This is where things become complicated. The new Twitter layout uses a responsive design, which means that this image is going to get scaled and re-cropped depending on the user’s web browser. In practice, the top and bottom sections often disappear, so if you have crucial parts you need displayed (like a logo), put them as close to the middle as you can, not close to the edges. The safest part of the image is the center.
Twitter Image Quality Issues
When you upload, Twitter applies some very heavy JPG compression to your images. They do this to make the the website as fast as possible for users and to conserve bandwidth.
The effects are particularly noticeable with the Profile Header image. The upshot is that the image that gets displayed might not look as good as the one you uploaded.
There are some things you can do to minimize the effect of that and reduce the chances of unsightly JPEG artifacts.
Firstly, upload an image with little or no compression. Every time you save a JPG image, you lose quality. That gets compounded the more times you do it.
If you’re saving an image from something like Photoshop or GIMP or any other imaging software, use the highest setting you can (eg. a quality setting of 10 or 100%). Twitter is going to crunch whatever you send anyway. Starting with the highest quality version you can will help. You can even upload a PNG-24 if you want (although JPG is usually a better bet).
Secondly, because of the way JPG compression works, images with lots of different tones and smooth gradients are going to get hit especially hard. A rule of thumb is that images with fewer colors and fewer gradients suffer less from aggressive JPG compression.
Text, Logos, and Watermarks on Twitter Profile Images
The heavy JPG compression applied to the images you upload does some pretty ugly things to text, logos, and watermarks. Here’s an example, a 100% crop from one image with logo that I experimented with. You can see the very noticeable JPG compression artifacts surround the letters as well as some clear banding in the natural tonal gradient of the blue sky.
Again, to minimize the problem, aim for simple. Clean, high contrast lines and fonts are going to be less of a problem than subtle, complicated lines and fonts with things like partial transparency and drop shadows etc. Sans-serif fonts will often work better than serif.
The Facebook workaround of using a PNG-24 image doesn’t work on Twitter because Twitter converts everything to JPG.
And if you’re putting your logo or other text on the image, don’t put it at the very edges of the image where they’re likely to get cropped off in some browser displays. The safest zone of Twitter’s new profile header image is the center. The closer you can keep it to there, the less chance there is of it being cropped out with different web browser display sizes and aspect ratios.
There’s also a good reason not to include text or logos in the cover photo. The same cover photo is used for mobile apps like the official Twitter app. When it’s displayed in that, your twitter profile picture and handle are automatically overlaid over the center of cover photo, so it would obscure any logo that’s there. If you want to include a logo, putting it as the profile picture might give you better results across different displays.