Fix Blurry Twitter Header Banner

Struggling to have a clean Twitter Header Banner?


Here are three things that you need to take care of:

1. Keep resolution of your Twitter Header Banner to be as heavy as possible –


Twitter rolled out new design dimensions for Twitter profiles as of May 29, 2014, announcing Twitter header photo to be sized to 1500 (w) x 500 (h). While creating and saving images using software like Photoshop or Illustrator or GIMP etc., make sure you use the highest quality setting of 10 or 100%. Twitter allows it to go upto 5MB which it is going to crunch anyway. Format? – I would suggest go with PNG (PNG is the largest image type for bigger images). In this case you can go upto 24 bit PNG. JPEG can get degrade with every save.

2. Image Tone –


Always try Darker background tone for the very reason that images with less colors and some gradients suffer less from compression that happens at various stages in creating and uploading banners which involves many ‘SaveAs’ functions.

3. Smart use of real estate will make sure the messaging is projected strongly and professionally. –


Quick Tips:

  1. Keep your message as much in the center as possible
  2. Don’t overlap the Profile Picture / Logo (400w X 400h) on left bottom corner of the header.
  3. 80% of Twitter active users are on mobile. Keep the responsive design in mind.

Twitter Header Template - Rakesh Singh

Here are some observations while studying some of the biggies in Recruitment World:

  1. Modis@Modishttps://pbs.twimg.com//profile_banners//17450618//1400610907
    Though the resolution of header image is 337 KB, dark tone with pinch of blue here and there is making it look neat. Good use of real estate. Summarizes all of the above pointers.
  2. UnderCoverRecruiter@UndercoverRechttps://pbs.twimg.com//profile_banners//87707239//1399558449
    Dark Tone – NO | Image resolution – just 168 KB | Banner is getting a little blurred
  3. TekSystems@TEKsystemshttps://pbs.twimg.com/profile_banners/16438170/1406226600/1500×500
    Though its 1500×499, resolution is just 68 KB | Dark Tone – NO | Blurry Header Banner
  4. HumanTalentNetwork@HumanTalentNethttps://pbs.twimg.com//profile_banners//1717931293//1399583376
    High Res Image – Done – 775 KB | Something to fix is the use of real estate – social profile links are not only getting blurred but behind the logo
  5. Aditi Staffing@TopTechStaffinghttps://pbs.twimg.com/profile_banners/1440258450/1418055772
    The moment the image gets stretched to 1500×500 it gets Blurred – https://pbs.twimg.com/profile_banners/1440258450/1418055772/1500×500
    Reolution – 376 KB | No Dark Tone | Real Estate used – Good scope of improvement

Checkout how the two Digital Marketing Honchos optimizing their Twitter header banner:

  1. HubSpot@HubSpothttps://pbs.twimg.com/profile_banners/16438170/1406226600/1500×500
  2. Marketohttps://twitter.com/Marketohttps://pbs.twimg.com/profile_banners/17497382/1413574207/1500×500

Clear difference is in the resolution of Twitter Header Banner – Hubspot’s is 883 KB where as Marketo’s is just 80 KB

Brand Heads, now that you know what to fix, I’ll be happy to connect with you on Twitter – @sinhrakesh

No comments yet.

Leave a Reply