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.
Images
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.
Serious Business
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.
Technical Stuff
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):
You can click on the images to get a good look.
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.
Result?
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.
29 Comments
Thank you for sharing. It’s been so frustrating having anything I put up there look absolutely horrible.
Great article. I’ve been sooo frustrated with Facebook’s compression issues.
Diggin’ the illustration Stephan. Nice one!
Thank you sir. Seems to be turning into a theme!
Thank you.
Another thing to know is that facebook does not compress the image if it’s less than 100 kilobytes.
I had a cover photo which was 158kb in size, which fb left at 38kb after compression (!!!)- this looked horrible. I tried saving the same image from photoshop lowering the jpeg quality settings so the pic was 98kb, and now facebook didn’t lower the quality of the image.
FB is still compressing the heck out of my cover images . . . I’ve uploaded a .png as small as 15k, and still there’s noise.
Many big brands now have PERFECT quality covers..
Even yours (and mine http://facebook.com/zakkforchilli/)
seems to be OFF still. Still compression, still blurry a bit.
How are they doing this?
Using illustrator instead so the base is just more legit? IDK
I think with such a narrow typeface you’ll get into trouble with some compression artifacts (munched up bits) appearing around the type. I would try adding a subtle noise layer over top in photoshop and see if this improves the compression. Also double check to make sure you save at the proper dimensions outlined in this article. Hope that helps!
Thanks! Previously the timelime cover was looking hideous on my 24” monitor. Now it looks much better. Do check it out
Wow. So happy! I was looking for info on this as I love vector stuff, and FB has been making it horrifically ugly. I tried the unchecking of my normal settings (like optimized) AND the tip about making it less than 100kb and look: https://img.skitch.com/20120719-1kkctjer8y9cfsebfia4ghk1ck.jpgThis is a vector image on FB I can live with!!
This is what it looked like before – this is a slightly different image but you can see how much crappier it was: https://img.skitch.com/20120719-1bacggihsn4nmf9nmcwapcjjej.jpg Thanks for the help!
Looks great Kristi.!
This proves that the more colors you have going on in your illustration the better compression. Flat colors are the worst culprit when it comes to compression, and busy photos with millions more pixels of color turn out the best.
Cheers and thanks for sharing
Is the timeline layout still optional or do we have to use it?
It’s now a part of everyones user interface.
Thanks for the tutorial. This has been driving me crazy as well, and I’m going to try some of the suggestions here. I noticed in your jpeg settings you have blur set to 0.01, but you don’t mention it in the article. Did you choose this setting for any particular reason?
If the blur is at 0.00 or 0.01 it won’t really matter. This may have been an oversight on my part. Let me know how it goes!
Great post! It is terrible frustrating when trying to advertise your design skills with such a shoddy image at the top of your Facebook page. Has made me feel embarrassed ever since I started to use it but will try your method now.
Regards
I hope it works for you. Remember that flat single colors are difficult no matter what when it comes to compression. So a blue sky, pure white, black, etc are terrible. But if you have a photo of someone waterskiing it will turn out fantastic because the compression artifacts (blurriness, faint spots) will blend in easier.
It’s been some time since I’ve posted this, so I hope things get better soon with an overhaul.
Cheers!
I just uploaded it as a .png file and it didnt compress it, png looks good
Thank you sooo much!! This finally helped me figure out how to make my company’s cover photo look decent. Much appreciated!
Hey Stephan, I found a response from one of the facebook devlopers saying how you can avoid recompression. I followed his instructions and my photo looks exactly like what I uploaded. Mine is very plain with only 3 flat colors, but at anything above jpeg quality 70 it looks fine (50 destroys it like facebook did). I actually was able to use jpege quality 100 as it was still only 40kb.
Here’s what the dev said:
If you would like the best looking cover photo, please upload an JPG file that’s 851 pixels wide, 315 pixels tall and less than 100 kilobytes. If it has a color profile, it should be sRGB. If you follow these guidelines we do not recompress your cover photo and it will look exactly like what you uploaded.
Thanks very much Nick!
This is the proper way for facebook cover images. The written article is incorrect. In my opinion is it a recipe for disaster.
Facebook has two conditions for their photo compressor:
1. Pixel dimension: If the image is above 851×315 pixels, their compressor kicks in and the file will be compressed to under 40KB. To prevent compression, a facebook cover should have dimensions equal or less than 851×315 pixels.
2. Filesize: If the file is bigger then 100KB, the compressor is triggered and the file will be compressed to under 40KB. To prevent compression, the filesize that you output should not extend 100KB.
To exemplify (numbers are made up but relate to my tests):
1. A image of 851 by 315 pixels with a sRGB profile and a size of ~ 125KB with a arbitrary quality settings set to “very high: 80″ will be compressed to ~ 39KB.
2. A image of 851 by 315 pixels with a sRGB profle and a size of ~ 99KB with a arbitrary quality settings set to “High: 71″ will be slightly compressed* to ~ 92KB.
3. A image of 1700 by 630 pixels with a sRGB profle and a size of ~ 225KB with a arbitrary quality settings set to “High: 71″ will be compressed to ~ 39KB.
4. A image of 1700 by 630 pixels with a sRGB profle and a size of ~ 99KB with a arbitrary quality settings set to “High: 68″ will be compressed to ~ 38KB.
* I think this is not compression, but rather the stripping of some additional file data.
I also suggest that you assign a color profile of sRGB or leave the file un-tagged. Do not unload images with RGB or other color profiles. First, this image will be outputted in sRGB, whether the original maker likes it or not. Second, the color that are out of gamut will display shifts around the edges and cause some banding. Especially noticeable in darker and higher contrasting value and color portions of the image. It is a unwanted result, especially if you already lost quality through one or two rounds of compression!
You are far better of starting in sRGB and staying there, than working in a bigger gamut and converting to to a smaller one. With a smaller gamut there is less disappointment than with a contraction from a bigger profile to a smaller one.
I also recommend ditching the noise, when added for technical reasons. It is useless file increase, and pollution in 8bit images with that are potentially accessible for compression. Good technique for 16bit images but less for 8. There hardly enough room for gradient banding in 8bit images. If you do intend to add noise, you will introduce overall fuzziness. Which looks like bad compression but actually is noise.
Focus on dimensions, file size and color profile matching. This will reduce the problems greatly. End the end, you have 100KB to work with.
Good luck, Léon
————————
Note on 1: I have tested for image enlargement from 125% of optimal dimensions and up , and the compressor still triggers. I think that there is a 5 to 10% enlargement margin, but I had no more excitement to test.
Note on 2: I only tested images of 300 to 600KB and images of 90 tot 99KB. I have no idea if there is some margin to be achieved.
Hi Leon,
I’m by no means an expert on the subject, so thank you for looking into this and publishing your conclusions. I really appreciate it, and I’m sure many other users will find this information useful as well.
You sir, just made my day!
It works like a charm!
hmmmm..what software I will use to do this??
Photoshop
Naw. Aint good enough.
Will never pay for FB services until they can figure out how to not crush my cover photo so badly. Get a clue guys…. Running low on cash? can’t afford more bandwidth? come on – seriously. Fix it.
I’ve tried the solution above( double size image without compression) and compared it to n exact size and under100kb-reduced version.
The first one have a best result, less blur and less jpg artifacts.
You can see my cover image here:
http://www.facebook.com/sarlo.enrico