We’ve been head scratching about this problem for a while now, why does Twitter compress your cover photos when you click “save changes”, and you end up with a blurry cover? Especially annoying with text based cover photos that many businesses use on the social media platform.
Another head scratcher was the cover size itself – Twitter states 1500px by 500px, so why when you use that space does it crop bits off all sides? Well, we don’t know the answers to these questions (only Twitter knows why they do this!) but we can help a little to solve the problems and create better looking covers for you Twitter profiles.
Cover Photo Size
The first point to address is the cover photo size itself. See to the right, this is a cover photo following the Twitter size guidelines of 1500px by 500px, and using the full space for the text. You can see that the top and bottom have been cropped straight after uploading onto Twitter – and this is the zoomed out version too.
To fix this problem, create a new “canvas” inside the cover – leaving the sides and part of the top and bottom blank. We found that by making the “useful” part of the cover the same size as the Twitter feed itself works, so adding around 250px of space on the left and right of the cover photo. Then add 60px space on the top and bottom – as per this comment on Twitter’s own troubleshooting page:
If you are using a header image with the recommended dimensions and notice that parts of it are being cropped, it is most likely because of the way these images are displayed on different monitor sizes and in different browsers (60 pixels on the top and bottom could be cropped).
Avoiding Blurry Covers
The next conundrum was the problem of Twitter compressing the covers AFTER uploading (the preview always looks okay). We’ve previously tried playing around with different file formats, such as JPG and PNG – having done a bit of research online the generel consensus is to convert your image into a GIF format (if you’re using Photoshop you can do this by saving for web device, not the usual Save As or Export). We’ve tried the three formats out for you to compare below.
Spot the Difference?
Initially, it seems that by simply allowing for some space around your cover photo and using the guidelines above have dramatically reduced the blurriness that usually happens. You can see that the JPG version is a little blurry still, and not as clear as the PNG or the GIF, and when we tried it out on our own cover photo we felt that the GIF offered a better quality colour with the image we had used. We’re still not happy as it isn’t as perfect as the cover photo when it’s originally designed, there is still some compression happening the world of Twitter somewhere but this is a marked improvement on previous covers.
What do you think?