How to Get Sharp(er) Facebook Cover Photos

Getting fuzzy images, text, or logos on your Facebook images? Facebook has closed some of the old loopholes, but here's a tip worth trying.

One of the most common questions I get asked about using images on Facebook relates to getting cover photos that aren’t blurry or looking horrible from JPG compression artifacts. It’s especially noticeable when your cover photo includes text or a logo.

When might you want to use text? Some examples are if you’re trying to add a logo or watermark to a photo, making the equivalent of a flyer or poster for an event, or maybe you just want to put some haiku on a photo. Who knows–there are endless reasons you might want to do it. But a lot of users get disappointed with how it ends up looking on the site.

There are potentially two things going on here. The first applies if you’re looking at the desktop site with a Retina (or high-density) display. Facebook’s mobile apps have long supported Retina displays. And the standard web version of the site supports it in a kind-of-sort-of way. Images in your timeline and newsfeed can be displayed as Retina, as can the photo gallery versions. But an exception is the cover photos, which still doesn’t display as a Retina image. At some point, that’s likely to change (and probably without warning), but for now, if you look at the website version on a Retina display, you get a jarring contrast between the crisp photos on your timeline and the much-less crisp cover photo.

The second thing working against you is that to speed up its site, Facebook applies heavy JPG compression when you upload your cover photo. So the challenge here is less about something specific to Facebook itself than in working around mandatory heavy JPEG compression that Facebook applies to most JPEG images you upload and share. They have perfectly valid reasons for applying it. Most importantly, it makes the site faster for users. It also saves on bandwidth and storage, which benefits them as well as their users. The downside is that the one-size-fits-all compression doesn’t always make every image look its best.

There used to be two things that you could try that often worked: uploading the image in the PNG-24 format and keeping the files under 99KB. And those were the things I used to recommend on this page. But Facebook is constantly tweaking its system and changing things under the hood without any warning or notification. It seems that neither of these two approaches works anymore, so I’ve updated this page accordingly.

So if neither of those tricks works now, what can you do? Well, below is a practical tip that can help. It won’t do anything about the Retina display issue (yet, anyway), and even on regular displays it’s not a perfect solution. But it should help you get better results than if you don’t use it.

Use an Image Double the Display Size

These days, the usual reason to upload an image double the intended display element size is for Retina images. These usually apply the convention @2x to the end of the filename and are designed to be displayed when the reader’s browser and display support Retina images. But for now, the Facebook web version’s support for Retina images is incomplete.

But if you upload a cover photo that’s double the intended size, it appears you’ll get much better compression and less of the ugly JPG compression artifacts.

Here’s a practical example. They’re both generated from the same master image. Both use the same JPG quality setting (90) when creating the version that’s uploaded to Facebook. And to be clear, I’ve zoomed .in the display significantly to make the JPG artifacts much more distinct than if you were just looking at it at its native size.

The one on the left is what happens when uploading the version that’s sized perfectly for the size it will display on Facebook. The one on the right is uploading a version of the same image that’s precisely double the size. As you can see, while there is still some JPG compression artifacts when uploading the larger image, they’re much less jarring.

[before-after viewer_position=”center” orientation=”horizontal” label_position=”one” overlay_color=”#ffffff” label_color=”#000000″ label_one=”828×315″ label_two=”1656×630″]

[/before-after]

Out of curiosity, I tried whether uploading an even larger image made any difference. It didn’t, even using a version of the same image at its original dimensions of nearly 18,000 pixels wide.

< 50KB

It used to be that if you kept images at 99KB or smaller, they wouldn’t be touched when you uploaded them to Facebook. That is, they wouldn’t go through JPG’s usual compression. That’s no longer true, but at least one user has suggested that the new limit might be 50KB.

In my tests, I couldn’t replicate that. I uploaded a JPG that was 49KB and found that it still went through even more compression. The difference isn’t as dramatic, because to get the JPG under 50KB meant using a quality setting of 61, which is pretty low. But there’s very clearly compression still being applied.

Here’s an example, again magnified several times to make the difference clearer.

[before-after viewer_position=”center” orientation=”horizontal” label_position=”one” overlay_color=”#ffffff” label_color=”#000000″ label_one=”Pre-Upload” label_two=”Post-Upload”]

[/before-after]

The alignment of these isn’t pixel-perfect, but there’s more compression inside the white areas of the letters as well as different artifact patterns surrounding the letters. At 100% it’s hard to tell any difference–it’s only when you zoom in that the changes become more visible.

JFP vs. PNG

There used to be a loophole in Facebook’s system when you uploaded the image in PNG format. Instead of going through the heavy JPG compression, it would keep the PNG untouched. That’s no longer the case, as this example shows. And, in fact, it seems to now result in even worse results. Both of these images are from images that are 1656 by 630 pixels. One is a JPG (exported at a quality setting of 90), and the other is a PNG-24. As you can see, the PNG-24 image fared much worse.

[before-after viewer_position=”center” orientation=”horizontal” label_position=”one” overlay_color=”#ffffff” label_color=”#000000″ label_one=”JPG” label_two=”PNG”]

[/before-after]

A Side Benefit

A side benefit of uploading images that are double the intended display size is that that the chances are better that if (or when) Facebook switches on full Retina compatibility, you might not need to go back and upload all your images again.

The Upshot

So until Facebook sneakily changes things under the hood again and doesn’t tell anyone, here’s my current recommendation: upload high-quality JPGs that are at least 1640px wide and 720px high. It’s still going to get hit with some JPG compression, but it shouldn’t be as bad as when uploading a smaller image.

And because of the way JPG compression works, you’ll be better off with images that have more edges than smooth tones, and fewer colors rather than more.

View Comments

  • Export tiff at highest res. Open in picture viewer on a high res monitor.

    Screen grab it. Take back to Photoshop apply methods like above.

    If u don't have high res monitor. Try actually lowering the resolution the screen grab. This also helps. Don't ask me why.

    For many years this has been my best method when receiving thumbnail logos from client.

    • Sorry, but I haven't tested the shopping feature specifically and am not sure what else is possible beyond what you've already tried.

  • I can't believe you actually fixed this problem for me! Amazing, for all the tips and tricks I've read about trying to make this work, you've solved it with such a simple trick! Thank you so much

  • Amazing tips. Thank you, I've struggled to enhance resolution for my cover photos for a long time but doubling the image size upon exporting from Illustrator worked like a charm!

  • Jesus. THANK YOU. I have tried so many 'tips' and FB recommendations, and nothing worked. This did--thank you!

  • I was having the same problem and found your recommendation. It worked! Not as clear as I'd like but much better. I also tried one of the suggestions to go increase by 250%. That didn't work. It was very blurry. I am going to now try an image with less color and see how that looks.

    Thanks for the info!!

  • I've tried everything i can and still looks terrible on my business page. Currenly uploaded the larger size as you recommended and it looks so crappy. I wonder why my personal page banner looks excellent though, why would fb nerf business pages?

    https://www.facebook.com/henrycarmonarealtor/

    Anyway, if anyone has any tips, please let me know

  • This worked for me using Canva. Just have to check both laptop and mobile versions. Had to adjust some of text for visibility on mobile because profile pic covers part of cover photo. Thank you so much. Saved me time and looks great.

  • Thank you. Wasted the whole afternoon trying to get something nearly acceptable to no avail. Then saw your post and what a difference. Big thumbs up! :-)

Share