How to Design for Facebook - Fall 2017

Fall-Facebook-Header.png

I'm updating my Facebook image optimization recommendations!

Back in March, I wrote a post all about creating images that avoid Facebook's awful compression. We all know Facebook loves to change things, so I thought it was time I revisit the topic!

To read about my process, check out the original post.

PROFILE PHOTO

Concrete-wall.png

Facebook Says

Your Page's profile picture:

  • Displays at 170x170 pixels on your Page on computers, 128x128 pixels on smartphones and 36x36 pixels on most feature phones

For profile pictures and cover photos with your logo or text, you may get a better result by using a PNG file.

Notes

This applies to your personal profile picture as well as the profile photo on business pages.

Even though Facebook's largest listed size in their directions it 170x170, when you try to upload a 170x170 image, you get an error message saying the image must be at least 180x180.

When you upload a 180x180 image, you get an error message about the small size affecting the quality.

In some instances (such as commenting) yourprofile photo will display as a circle, so be sure to keep that in mind when designing it.

Ideal Format

1200x1200px png

PROFILE HEADER

Personal-Header-1640x720.png

Facebook Says

Your Page's cover photo:

  • Displays at 820 pixels wide by 312 pixels tall on your Page on computers and 640 pixels wide by 360 pixels tall on smartphones

  • Must be at least 400 pixels wide and 150 pixels tall

  • Loads fastest as an sRGB JPG file that's 851 pixels wide, 315 pixels tall and less than 100 kilobytes

For profile pictures and cover photos with your logo or text, you may get a better result by using a PNG file.

Notes

Last time I researched optimizing images for Facebook, I recommended using a jpeg for your cover photo, and avoiding text or logos. I'm happy to say that Facebook seems to have changed their compression rate and text and graphics can be used sparingly with decent results.

If you hate the gradient overlay on your personal header, maybe consider having a very dark background - it will make the gradient less noticeable or even invisible if you use black.

Ideal Format

1640x720px png

BUSINESS PAGE HEADER

Business-Header-1080x605.png

Facebook Says

Your Page's cover photo:

  • Displays at 820 pixels wide by 312 pixels tall on your Page on computers and 640 pixels wide by 360 pixels tall on smartphones

  • Must be at least 400 pixels wide and 150 pixels tall

  • Loads fastest as an sRGB JPG file that's 851 pixels wide, 315 pixels tall and less than 100 kilobytes

For profile pictures and cover photos with your logo or text, you may get a better result by using a PNG file.

Notes

Right off the bat, Facebook recommends using a PNG and a JPEG within the same breath, and not be cynical, but that seems pretty typical of Facebook's graphic support.

Go with png - when you save as jpeg your image gets compressed, and Facebook doesn't need any help compressing your images.

Facebook's listed dimension work fine, but I prefer using a 1080x605px which zooms out instead cropping on mobile.

Ideal Format

1080x605px png

GROUP HEADER

Groups-Header-1640x500.png

Facebook Says

Facebook doesn't provide any information.

Notes

Facebook now uses facial recognition to center the circle thumbnail over the largest face it senses.

If there's not a face in the header, the thumbnail will be taken from the center of your banner

On mobile, the UI places a back tint and text over the entire header, so I wouldn't advice designing around how it looks on mobile.

Ideal Format

1640x500px png

IMAGE POSTS

Facebook Says

We automatically resize and format your photos when you upload them to Facebook. To help make sure your photos appear in the highest possible quality, try these tips:

  • Resize your photo to one of the following supported sizes:

    • Regular photos: 720px, 960px or 2048px wide

  • Save your image as a JPEG with an sRGB color profile

You can also change your settings so that your photos are uploaded in HD by default.

Notes

There are significant jumps in quality as you move up the recommended sizes.

You can make the height of your images up to 3078px tall at 2048px wide. Making shorter than the maximum does not hurt the quality of your images.

Even at the best settings, images with text or graphics will have some jpeg compression artifacts.

Ideal Format

2048px wide and up to 3078px tall png

LINKED IMAGES

Linked-Image.png

Facebook Says

Facebook doesn't provide any information.

Notes

When posting a link, Facebook automatically pulls an image from the linked website. If you're scheduling your posts using Buffer, you can choose the linked image, but otherwise there's not much you can do to control it.

If you're linking to a SquareSpace blog post, Facebook will use the thumbnail image.

Ideal Format

1080x558px png


THANKS FOR READING!

If you use these tips to revamp your Facebook graphics, drop a link in the comments below so I can check them out!


NEXT Post...

A case study tackling how you create a noteworthy brand as a multipotentialite.