Facebook JPEG Compression: How to Get the Best Image Quality on Your Timeline

We’ve all done it, uploaded a picture that looked fantastic in our editing software only to recoil in horror at the compressed mess that now sits on our Facebook timeline. In this Quick Tip, I'll help you get the best quality result possible when uploading your pictures.

Deciphering the Guidelines

Facebook has given us these guidelines:

Image may be NSFW.
Clik here to view.

So let’s see what works. We’ll start with regular images.

Regular Images on the Timeline

Facebook suggests we upload at either 720px, 960px or 2048pxwide for the best results. This is the picture I’m going to be using for our comparison:

Image may be NSFW.
Clik here to view.

I saved the picture at each of the mentioned widths and uploaded them; then saved the Facebook-compressed versions back to my computer.

The first thing to note is the difference in file size. If I go through each one we’ll get lost in numbers, so to take the middle width; 960px, the file I started with was 523kb and the one I saved back from Facebook was 86.9kb so already we know there’s going to be drastic compression.

Here are all three sizes at 100% after Facebook:

Image may be NSFW.
Clik here to view.

We can note artifacting on all three pictures, particularly around the top of the bridge so I’ve focused on that for demonstration purposes. The larger image (top left) has the least obvious signs of compression and most people wouldn’t be looking at it this closely so it would be even less noticeable, unlike the 720px which is as big as it’s ever going to get.

I tried the same file sizes with PNG instead of JPEG and got similar results, so I won’t bore you with them here.  It’s worth noting that PNG creates a larger file-size so Facebook is just going to want to cut that down (a bit more about this later). The only time I find this makes a real difference with timeline images is if they include text, like if you’re uploading something with a logo, for example.

Cover Photos

This is the photo I’m going to use for my cover:

Image may be NSFW.
Clik here to view.

If I tried to upload this at the full resolution (some 7000px wide), this is what happens:

Image may be NSFW.
Clik here to view.

Not good at all. Facebook recommends firstly resizing to 851 x 315 so let’s try that:Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Better, but still a lot of distortion around the puffin in particular. This picture is still almost 300kb though and Facebook recommends100kb so this time, I used File > Save For Web (Control-Shift-Alt-S) in Adobe Photoshop and adjusted the Quality get the final image under 100kb:

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

As you can see, this gets the best result yet. Sometimes I do find with cover photos that I can get a slightly better result using a PNGrather than a JPEG, but as I mentioned earlier, it’s harder to keep those file sizes down to below 100kb so try both and see which works for you.

Summary

Here are some points to remember:

Getting the Best Results for Timeline Images:

• Upload a large size
• Save at maximum quality
• Use PNG for images with text (logos)

 Getting the Best Results for Cover Images:

• Resize to 851 x 315
• Use Save For Web and get down to below 100kb
• Try JPEG and PNG to see which looks best

The images are never going to be completely without compression, not unless Facebook change how they do things, but we can get them to look much better with a little tweaking here and there.

Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.