Case Study: Facebook’s Image Compression and the Color Red

So, every week, part of my cover-designing responsibilities is to create a version of the cover that we can use as our Facebook cover photo. Easy enough. Here’s the cover I designed:

Issue123Cover

Easy enough, right? But when we uploaded it to Facebook, it turned out like this.

Screen Shot 2014-01-08 at 12.31.26 PM

A disgusting mess. (If you don’t believe me, click these pictures to enlarge.)

I was asked to fix the file and send it back over. I resaved it (for web, mind you – I’m no dummy), sent it back. Still, same problem. I saved it as a .png. I saved it as a .gif. I saved it as a .pdf and then converted that into a gif. Still, the muddy text remained. I redid the text completely, created the same effects in Illustrator, and still, the muddy looking text was staring back at me, laughing in my face. It didn’t look like that anywhere else. I checked pixel depth, color mode, all kinds of logistics.

Screen Shot 2014-01-08 at 12.31.10 PM

Was the file to blame, or me? I placed the text over a different black and white picture, growing frustrated. Nothing worked. My super talented friend Richard and I put our heads together and were totally stumped. Screen Shot 2014-01-08 at 12.31.18 PM

 When I uploaded the cover photo without the picture behind it, it looked fine.

Screen Shot 2014-01-08 at 12.31.31 PM

I tried everything I could think of, and grew desperate as the clock ticked. Screen Shot 2014-01-08 at 12.31.38 PM

Nothing worked, and it was 7:30 PM. I’d been at it for two hours, trying different computers, different versions of Photoshop. It seemed to be that the color red was causing the problem. So I changed the color to orange, sent it to my coworker with an apology, and went home in frustration.

Screen Shot 2014-01-08 at 12.34.08 PM

THE SOLUTION:

I read about Facebook’s image compression, and realized that it was indeed something to do with the color red + the gradient. It doesn’t deal well with that amount of information. I found a suggestion buried in the comments of some random Adobe forum, where someone had tried adding noise to fool the compressor, and had luck.

So I tried that….

Screen Shot 2014-01-08 at 12.34.42 PM

And voila! Not the highest quality image, but certainly the least muddy. Certainly something to add to my bag of tricks in the future.

Good luck!

Advertisements

One response to “Case Study: Facebook’s Image Compression and the Color Red

  1. Pingback: My Covers of Paste Magazine, so far (with commentary) | Recto/Verso·

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s