So as you may already know, Facebook started rolling out Timeline for Pages. If you already have a page you can slowly start test driving it, but on March 30th you’ll have to switch over completely whether you’re used to it or not. That’s keeping all sorts of brand, business and social media people preoccupied now because there are quite a few changes that need to be addressed.
Since trying out the new Timeline format, many brand managers and designers have agreed with me that image compression sucks. This hasn’t been too much of a problem lately because Facebook actually addressed the issue and now offers higher quality uploading.
The problem now has to do with the cover photo. This is the large image located at the very top of the Timeline. The cover photo is probably one of the most important, if not the most important, part of a brand page. If your timeline (wall), filled with comments and articles was a bustling town, this would be the big neon “welcome” sign as you entered the town. For brands, and especially huge corporations, the cover photo is much more than a little analogy of a town welcome sign: it’s their brand, it’s their image, and besides the product itself, it’s everything.
It seems like people let this compression issue slide for their personal Facebook Timeline, but ever since people have started redesigning their fan and brand pages I’ve seen a ton of complaints.
Uploading a Better Facebook Cover Image
Now that I’ve addressed the seriousness of brand consistency, let’s move on to figuring out the best way to make Facebook’s compression do as little damage as possible to your image quality and color.
I’m not going to get into the technical aspect of JPEG compression here, you can read all sorts of stuff somewhere else. Quite frankly it confuses me and I find it boring as hell to read.
Ok, lets go!
Lets start with a difficult cover image for Facebook to properly compress, like the one I’m using now for my new Facebook page. It has only 2 flat colors, no texture, very plain. JPEG is terrible at compressing these to begin with, but with Facebook’s cover photo compression they take it to a whole other level of terrible.
Logic would dictate that you make a template for the cover page photo. The dimensions are 850px x 315px, so that’s what I originally did. After that I saved it for web and these were the output settings:
The results weren’t good at all. Here’s what I want to see (top orange super computer) and then what you get after compression (underneath):
Let me note right now, that until Facebook stops compressing like this, we will never get it perfect. I will never get the orange perfect in this image, and there will be some munched up pixels no matter what we do! Until that change is made we need to do what we can. Take a look at the bright side, though: it’s an even playing field! If everyone has the same issue, at least we can have the best shitty compressed brand photo in the land!
Tools: Computer, Photoshop, Internet,
Skill Level: Beginner/Intermediate
Step 1: Double the resolution. The cover image is 850 x 315, so bump your template up to 1700 x 630. If your image is too small to maintain quality at that resolution, then it won’t work. I have a nice scalable vector drawing here.
Step 2: Make sure your color space is set to RGB and not CMYK.
Step 3: “Save for Web & Devices” and in the dialogue box make sure you have the following settings.
You basically make sure everything isn’t checked, and that it’s set to “Bicubic” on the lower right.
Closely look at the difference in output as you follow along with your own image. Not perfect, but much better.
Other partial solutions:
1) Introducing texture via noise to the solid color. The problem is that JPEG doesn’t deal with solid colors well. A solution would be to make the color less solid. One standard way of doing so is to use the noise filter in your image editing program. Noise can introduce new jarring colors. Because of this, noise filters often have a way of protecting the hue.
2) Introduce texture to the solid color. The goal here is to break up solid colors so that the imperfections of JPEG are not noticeable or displeasing.
Come on Facebook, let’s have this problem solved soon so we don’t have to waste our time doing this.