How to Combat Twitter’s Header Quality Issue

A problem I have been coming across recently is that whenever I upload a header to Twitter it seems to become distorted (despite the fact that the original image is pristine). After questioning my skills as a designer, I browsed around various other people’s Twitter profiles and found that pretty much every header is slightly blurry, especially if it contains text or vector graphics. Due to this, many businesses and people opt for photos as cover images (photos seem to render fine).

In an attempt to combat my image becoming fuzzy, I tried lowering the file size, I tried various different dimensions and file formats, and still, nothing was coming up as crisp as I’d like.

Now, I want to say it is just me being picky and having incredibly high standards, but it appears that Twitter applies heavy compression to header images. This is probably in order to cut the site’s load time down and deter advertising on the site through headers.

If you do want to get the best out of your Twitter header, this is what I would suggest:

Visuals

Twitter does not like type in its header images. The compression makes the text blurry and super hard to read, and due to the variety of different platforms Twitter is viewed on, text that is legible on a desktop may get cut off or distorted across mobile or tablet. Try to avoid using text in your headers where possible.

Dimensions

Twitter recommends your file to be 1500px x 500px. However, in order to ensure that all of your image fits within the screen across multiple platforms, I took Pauline Cabrera’s advice and used the dimensions 1500px x 421px.

If you check out her blog, she also provides a useful template highlighting what areas of your design will be visible when placed into Twitter’s holder.

File Type

Twitter accepts jpg, PNG, and GIF (non-animated) files for your headers. JPGs (although the second best bet), lose quality whenever opened, and although GIFs are usually great for flat graphics, once put into Twitter, they heavily feel the force of the image compression. In order to keep your image as crisp as humanly possible, PNGs are your best bet due to their high quality and scalable versatility.

File Size

Although Twitter is still going to compress your image, if you try and reduce the file size as much as possible before uploading it, Twitter won’t see it as much of a threat and ease off its compression a bit. For my banners, I tried to get the files down to as close to 4kb as I could. You can reduce the size of your file by using the “save for web” option in Adobe.

File Quality

Because Twitter is going to compress your image into next week, it’s best if you start with a really high-quality uncompressed file. This way, when Twitter compresses your image, it’s saving you a job. Usually, a standard quality of 8 is fine or a resolution of 75, but for a Twitter image, take it up to a 10 and a 300.

My Recommendations

In order to make your header as crisp as possible, I’d recommend these settings:

Dimensions: 1500 x 421px

File Type: .png

File Size: (as close to 4kb as possible)

File Quality: Resolution 300/Quality 10

…and try and avoid using text.

If anyone has the key to solving my blurry problem and has managed to get lovely, crisp, pristine text within their Twitter header, then please get in touch and let me know your secrets. If you’re looking for more ways to improve your Twitter profile, check out our tips here.

For the rest of you out there, good luck! If you’re looking for more useful information on improving your social presence, I also have some tips on keeping your branding consistent online.