Wednesday, 29 August 2012

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

11 comments:

  1. I uploaded a photo at exactly 851x315. I saved as a JPG with the minimum possible compression. The total file size is 83.3K. It looks great in my Photo Viewer, but still looks very blurry when on my Facebook Cover Photo. Any additional information or ideas as to why it's not sharp?

    ReplyDelete
    Replies
    1. Hi Tim,

      Have you got a link to your timeline cover that I can see?

      Cheers, Adam

      Delete
  2. THANK YOU! Facebook was driving me crazy with the blurriness.

    ReplyDelete
  3. Nice post . Thanks for giving this information related to facebook covers .

    ReplyDelete
  4. Thanks for sharing. Very information regarding facebook covers .

    ReplyDelete
  5. Thank you for this post, compressing JPEG a bit when exporting from Photoshop led to a significant quality improvement of the uploaded timeline picture :)

    ReplyDelete
  6. yup facebook developers must provide the crop option for timeline covers & very nice post your solve my problem :-)
    facebook timeline cover


    orbs Photos

    ReplyDelete