Why Does Facebook Hates My Logos?

September 9, 2011 10:09 AM

How do I get make Facebook play nice with image quality of logos when used as profile pictures?

My small business clients have Facebook pages for their businesses. They want their logo as their profile picture. However, I can not get images to look sharp on their page. I assume this has something to do with it being a graphic. I normally save as a .png or .gif for web in this instance but Facebook's auto-image crunching totally messes with the image, leaving it blurry and artifact-ridden.

When viewing the image in the photo gallery at full size it looks great—it's the 180px image that Facebook generates for the top left hand corner of the page that looks awful. Saving the original at 180px doesn't help.

As the creator I have all of the logos starting out as vector Illustrator files. I have tried:

- saving the files from both Illustrator and Photoshop
- saving the files using "save for web" and just "saving"
- saving as .png (8 & 24), .jpg, .gif
- messing around with the bicubic vs bicubic sharpener quality settings
- saving the image as 180px, 720px, 960px at 72dpi
-uploading the file as a normal picture, selecting it to be a profile pic and "cropping" in Facebook

I have seen this previous question but it is now outdated and doesn't specifically address graphics vs photographs. There must be some instructions, somewhere, but I haven't found the anything searching tutorials or Facebook's help center or blog. What's the magic setting?

posted by Bunglegirl to computers & internet (10 answers total)

Have you seen any logos as profile pictures that look good? If not, it's probably not possible. They're going to convert whatever you send them, no matter how sharp it is, into a highly compressed jpeg.

Lots of companies seem to incorporate their logo into a photograph or otherwise dress them up so the compression artifacts are not as obvious (See Coca-Cola and Home Depot).
posted by The Lamplighter at 10:29 AM on September 9, 2011

Facebook craps all over anything you post then displays it with ass-filter on by default. I don't know of any way to 'proof' your images from getting mangled by the post-processing.

And for god's sake don't try to link to any music you've made. Facebook will 'helpfully' download it from the location you've provided and re-encode it so they can serve an exponentially more atrocious version from their own servers.
posted by Aquaman at 11:04 AM on September 9, 2011

Right, so I looked at Xeroz and AT&T and both look bad. Coke's page looks better but they've designed their way around it. It's amazing that even big companies are at the feet of Facebook's useful crappy processing!
posted by Bunglegirl at 11:37 AM on September 9, 2011

i regularly post logos on my professional page (as well as my logo as the profile pic of the page) so i'm not sure why you/other ppl are having issues. sorry i can't help but i'm saying that it's not a universal problem. and my images are just screen shots (SHFT + COMMAND + 4).
posted by violetk at 11:43 AM on September 9, 2011

OK, Costco and KMart look kinda ass-filter-y. But Target, Burger King, Sears, WalMart, and many others seemed reasonably clean and sharp.

Maybe there's a common thread in the complexity [both details and color range] of the logos. Target, WalMart, and BK are pretty simple solid colors, no gradients, white backgrounds. Xerox and AT&T have gradients; Xerox is small and on a colored background besides. KMart's got that gradient grey background. Costco is just tiny to begin with.

I just set my profile picture to this image as a test, and it seems to look fine.
posted by chazlarson at 12:01 PM on September 9, 2011

They all look equally overcompressed and crappy to me. I wouldn't worry too much about it.

Facebook is concerned about keeping the page load times quick and reduced strain on their servers. I think they are the most popular site on earth so it seems like a legitimate concern.
posted by The Lamplighter at 12:09 PM on September 9, 2011

violetk, do you post them as profile pics? It can be a different story than posting in-thread. Also, I'd like to see the logos you post and how they look.
posted by Mo Nickels at 2:07 PM on September 9, 2011

I agree, Mo Nickels. There's a specific thumbnail image generated when it becomes a profile pic that further degrades quality. If you look at the AT&T page I liked to you'll see the profile pic looks bad but the large image posted on their wall looks fine.

I'm seeing artifacts even in the "best" of those big corporate logos like Burger King. The logos I'm working with have no gradients and are larger areas of flat color. I've put the logo on top of a photograph for now and it's a bit better. Seems like this is one of those instances I have to design around the limitations. I welcome any solutions anyone comes up with now or in the future as this is going to keep coming up with clients in the future.
posted by Bunglegirl at 2:16 PM on September 9, 2011

Target, Burger King, Sears, WalMart, and many others seemed reasonably clean and sharp.

They all have horrible artifacts, specially around the reds.
posted by clearlydemon at 2:29 PM on September 9, 2011

JPEG doesn't like sharp abrupt edges, either in contrast/luma or color/chroma. If you can change the logo so that the edges are feathered or antialiased more, or transitions smoothed out a bit, that might help some.
posted by Rhomboid at 4:16 PM on September 10, 2011