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

New website now live!

We have just finished building the new http://www.barensonengineering.co.uk/ website.
A very happy customer!

New EU Website Cookie Law, what's this all about

Cookies are small files which are stored on your computer after you visit a website.  These files contain a small amount of data about your time on the website which is then carried over to your next visit to customise your experience. 

Often user's actions are stored as cookies without the user's consent; however previously website's were able to argue that when visitors use a website they give their implied consent.  In response to this, you may have noticed that websites have started asking for permission to use and store your cookies?  Here are a summary of the new laws and regulations below. 

As of May 2012 Information Commissioners Office (ICO) have set out the changes in the law regarding cookies, so when we're building e-commerce and CMS websites, we must be careful to consider these rules:

·         Implied consent can be used by websites however website users must understand that their actions will result in cookie files being stored. 

·         Websites must make it obvious that cookies are being stored without having to rely on user's reading the privacy policy.

·         When websites are collecting  personal sensitive data, they must gain explicit consent from the user. 

According to EU regulation, cookies or any other files stored on the user's terminal equipment (Including mobile websites created for mobile devices),  must not be used by service providers unless:

·         The user is informed about what the cookies are to be used for and how it will be stored.

·         The user has given their consent for the cookies to be stored and used.

The EU state that some websites do not need consent in certain circumstance if the data is used for a sole purpose e.g. Search queries that go into search engines.

In compliance with UK law and the Data Protection Act 1998, if cookies process personal data service providers must only store data which is needed and used for its purpose.  Therefore like traditional bricks and mortar businesses storing information about you, websites must now only store and keep necessary information with your consent. 

We hope you find this useful, Media Orb team

What's Going On - Welcome to our blog!

Welcome to Media Orb's blog!

There is always something going on here at Media Orb, when we are not too busy creating great looking websites or getting the tills ringing on our customers online shops we like to kick back and have a little fun. From inter office football tournaments and poker nights to giving a little back by getting involved in local community projects and sponsorship fundraising events, we are a pretty busy bunch.

You can keep up with all the goings on by checking out our Facebook page and following us on Twitter, so if you want to know about the latest websites and e-commerce shops that we have been working on or if you want the hottest tips and tricks for effective search engine optimisation then “like” or “follow” us and find out.

Also if you are a charitable or community project and think that our skills in website design, website development or search engine optimisation could help you in your good work then get in touch and we’ll see if we can help.

The New Media Orb website!

Our New Website!

After weeks of hard work we have finally managed to get the new Media Orb website online; over the next few weeks we will be rebranding all our print with our fresh new style!

We have also started offering an exciting new service! We now offer print for companies in Bridgwater and Taunton

Please leave your comments about our new website below, we'd love to hear what you think!