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.

 

3 Comments
  • Chuman
    Posted at 16:26h, 03 August Reply

    I am using Adobe Illustrator
    and 1500, 421 File size around 128 KB

    after the upload the quality gets bad
    How can I resolve this ?

    • Robyn Strafford
      Posted at 09:30h, 04 August Reply

      Hey Chuman,

      I’d suggest trying to reduce that file size down as much as possible for uploading it, without sacrificing on its quality. Keep the resolution out put the same (around a resolution of 300 and the dimensions 1500px x 500px) you can do this by using the “save for web” option in Adobe. I’d also suggest leaving a border around your image as Twitter automatically zooms into the image once it is uploaded. If this still doesn’t work try doubling up the ratio, so upload the header image at 3000px by 1000px.

      Also, make sure you are uploading the image as a .png as these tend to be higher quality than .JPG’s and what Twitter does in the back end is compress your image in order to maintain the speed of the site. This means that the crisper the image you upload, the less pixelated your image will end up in the end.

      Hope this helps!
      Robyn

  • Nada
    Posted at 08:08h, 17 May Reply

    Hi Robyn,

    Thank you so much for the great Post!

    I am facing same problem like Chuman, I have no clue what‘s the problem with the Twitter header, although I am using the same setting to FB yet I didn’t get as much low quality images as Twitter.

    Long story short, I have tried so many different ways but I am still getting the same result (low quality images).
    I am using illustrator when I have vector and text files. I greatly appreciate if you could help me fixing this issue.

    Thank you so much Robyn for your help and assistance!

    Nada

Post A Comment