Why is my Facebook timeline photo / cover blurry?

Media Orb's guide to great quality Facebook Timeline covers

With the compulsory introduction of Facebook's timeline, it has become very important to have a great Facebook timeline cover, as this is the first thing anyone viewing a profile will notice; in order to minimise bandwidth however, Facebook's developers have been pretty heavy-handed with timeline photo compression which means that, without the right optimisation, timeline photos will look blurry and distorted. Fortunately, through a great deal of trial and error, we have found the best Photoshop settings to export a Facebook timeline cover that minimises blurriness and jpeg artefacts.

Image Dimensions

On photoshop, create a new file with these settings for your
timeline cover

For some reason, Facebook's developers have neglected to forcefully resize profile pictures and timeline covers to the size they appear on the front-end of a profile. This is the major cause for blurriness. Facebook profile pictures must be uploaded with a minimum width of 180px, yet they display at 160px x 160px, without Facebook resizing the cached image, which means that the user's web browser is forced to resize the image on the fly (bad practice generally!). This is why profile pictures are always a bit blurry, but this is unavoidable unfortunately. The problem is not unsolvable for timeline covers however, which means as long as a timeline cover is sized at 851px x 315px, it will not be resized by the users browser which means you can avoid that nasty re-sampling!

The following table shows Facebook's image sizes as displayed.

Image type	Width	Height
Timeline Cover Photo	851px	315px
Profile Picture	160px (must be uploaded at 180px)	160px

These are the results when the timeline cover is 1px by 1px smaller than it needs to be. Notice the blurriness of the text.

JPEG Compression Quality

The other major factor that creates nasty blurriness is the file size of the timeline cover. Simply put, if the image uploaded is larger than 100 kilobytes, then Facebook will re-compress the image. This results in an image being compressed twice (which really messes up the image), and also being compressed more strongly than it would be if it was uploaded with a file size less than 100kb.

This image was uploaded at 90 quality with a file size of 145.5kb. Facebook resampled the image down to 58.14kb. This looks a lot better than a wrongly sized image, but it's still not as good as it could be.

These are the settings used for our final timeline cover

The easiest way to maximise image quality for timeline covers, is to use the 'Save for devices' utility in Photoshop. Gradually reduce the JPEG compression quality (usually defaults at 100) until the preview file size in the bottom left is safely under 100kb. Then save the file and upload it Facebook!

The Final Result

When the image is the correct size, and uploaded with a file size less than 100kb, the clarity of the timeline cover is greatly increased!

This image was uploaded with a file size of  97.51kb, and remained unchanged after Facebook's processing. This means
that you are given an extra 40kb ish, of image quality!

And that's it! Thank you for reading, and we hope this helps you out. If you have any comments, feel free to leave them, and if you fancy helping us out, then like our Facebook page or visit our new website!

Cheers for now, 

Adam Lanning-Molyneux

Developer at Media Orb