In September, 2012 Twitter added a header image option allowing users to further customize the look of their Twitter pages. Unlike the profile photo that I wrote about previously, uploading a header image is quite straight-forward and the results are predictable.

Design considerations are a more pressing concern with the header image. You’ll want to ensure that the white text that overlays the header image is readable and that the profile photo (avatar) doesn’t obscure an important part of your image.

In Part 1, we’ll look at header display dimensions, upload specifications, and design considerations. Part 2 provides detailed, illustrated instructions on working with a Photoshop template you can download to help you plan and save your header image. This is followed by instructions on uploading and removing header images from Twitter.

Display Dimensions

Here is a diagram of the three images you can customize on your Twitter page.

The textured black rectangular area is the header and it displays at 520 pixels wide by 260 pixels high (a 2:1 width-to-height ratio) on a desktop computer. Note that the upper corners are rounded. Twitter will automatically round the corners on the image you upload.

Photo Upload Specifications

Dimensions

Twitter recommends dimensions of “1252px X 626px for optimal viewing across all devices” and states the maximum file size you can upload is 5 MB. That makes little sense because the maximum display size will be 520 x 260 so an image with larger dimensions will be scaled down to fit. Furthermore, I tried to upload an image at 1252 x 626 with a file size of a mere 1.6 MB and consistently encountered an “Internal service error.” I switched the file format from PNG-24 to PNG-8 which reduced the file size to 624 KB and Twitter accepted the upload.

The 1252 x 626 image did end up with some minor blurring due to resizing. An image at 520 x 260 was sharp with no degradation of image quality. Ultimately, 520 x 260 makes the most sense in terms of quality and file size.

I tested sharpness by creating a grid of one-pixel lines in a 520 x 260 image and this is a full-size screen shot of the result:

Image Formats

Acceptable image file formats are GIF, JPG, and PNG (8 or 24). I experienced difficulty uploading JPG images and haven’t been able to pinpoint the problem.

Design Considerations

Twitter’s Gradient

Twitter automatically overlays a semi-transparent black gradient over the bottom 3/4 of the header image. This creates contrast so the white text that appears in front of it (your name, location, website URL, and bio) will stand out.

The previous screen shot above of a grid background shows the gradient. To give you an idea of how it affects different colours, I uploaded the first image below and the result is shown in the second image.

It’s not particularly effective in creating sufficient contrast with the white text on lighter colours. Also, these are solid colours; photos with busy details will make the text much harder to read. Like this:

Take-away message: the gradient alone won’t assure readability so it’s up to you to factor that into your image selection.

Integrating Images

One thing to keep in mind when creating a header image is how well it fits in with the background image and, to a lesser extent, the profile photo.

When the header and background images are competing for attention with nothing in common, the end result can clash:

The next example is somewhat busy but the white canopy with its red framework tie the header and background images together:

The header in this example is an image collage. The owner wisely chose to go with a solid background with just branding on the left edge.

Here is a slick example of a header and background that are so tightly integrated that the Twitter gradient over the header is the only sign that it isn’t a single image.

This beautifully integrated design uses a palette of three colours to tie the avatar, header and background images together.

These examples show that if there is artwork in both the header and background, they need to work very well together to succeed. Otherwise, it’s better to concentrate detailed imagery in the header, leaving the background neutral (or vice versa).

Continue to Part 2 to learn how to use the Photoshop header template and to upload and remove header images from Twitter.