Maybe at some point you’ve uploaded a photo to Facebook and noticed some funny encoding artifacts. It didn’t look quite as good as it did on your computer. Or, maybe you’ve uploaded a design piece with lots of solid colored areas and line art to Facebook, and noticed a lot of artifacts, and that it looks terrible. Let’s take a quick look at why that is, and what Facebook does to your images…

Examine the originals and compare the areas around and inside the text in the Facebook encoded JPEG versions.

< Original PNG
Facebook JPEG >

The short explanation is this: You can upload any one of a number of formats when placing an image in your album or as your profile pic. PNG, GIF, JPEG and others are all supported. But, as Facebook imports it into their system, they always recode it as a low quality JPEG. The result can be blurring, discoloration, and other typical JPEG image artifacts.

That’s right, always. Even if your solid color image is smaller as a PNG than as a re-encoded JPEG. Even if your beautifully crafted loss-less PNG full of intricate line art graphics looks like a blurry mess. There’s no way to fix it. Your images must accept their fate, and make the best of it.

What you can do:

  • The JPEG standard is made for photos. That’s what the P in JPEG stands for, after all. Try finding a photo that works instead of line art. Or, try placing your logo over a photo, as allowed by your style guidelines.
  • Try different color combinations. Try black and white vs. color.
  • For design work, gradients and softer contrasts will make JPEG artifacts less apparent than high-contrast hard-edged borders.
  • Scale images before uploading. Facebook is going to scale your images to one of 720, 960, or 1200 pixels in the largest dimension when displaying in an album. Profile pics are going to be scaled to 180×180.  Do this before uploading, because your desktop imaging software is probably going to do a lot better job than Facebook.
  • Choose appropriately. Some images are just not going to work well. Others will upload and compress with very little noticeable effect. Don’t fight it. For prominently placed graphics like your profile pic, try a few things and go with what works well.