Facebook Photos Size Guide / 2014 New Layout

Ever tried using photos or graphics on your Facebook page? It can be frustrating. So here's an up-to-date, unofficial guide to what's what, what's where, and how big.

facebook_logo-ruler

In its early days, Facebook was all about text and links. But as it has grown up, images have become more and more important. They’re now more important for design and identity on the user interface, like your profile picture or cover photo. And it’s a great way to share photos in galleries and on the timeline. Facebook photos are now a huge part of the site’s appeal. The site still isn’t as photographer-friendly as Google+, but it’s getting better.

Working out what image sizes to use on Facebook isn’t as easy as it could be and involves some wrangling to get the result you want. Each type of image on a page, profile, and timeline has its own size and quirks. And Facebook never has been very good about making its help pages easy to find.

Making things even more fun is that Facebook changes things from time to time. Sometimes it’s a small, incremental tweak. Sometimes it’s an entire overhaul (like timelines were introduced). So it’s always a bit of a moving target. And there always seems to be a new system just around the corner.

So here’s my updated 2014 version of the unofficial guide for the sizes of Facebook photos on the various parts of the site. You can see the examples below in action on my Facebook page. I try to keep this as up-to-date as possible. If you’ve noticed something that’s changed, please let me know in the comments so I can update it.

Facebook’s New Layout (mid-2014)

In March 2014, Facebook announced a new layout for the timeline of business pages. As of June, most pages are being switched over. I’ve updated the information below to reflect the new layout.

The new layout brings pages in line with personal profiles. There’s a single column at the right with updates. The narrower column at left is for admin features and static information.

The new layout looks like this:

Facebook Photos Size Guide / 2014 New Layout

Facebook Cover Photo Size

The Facebook Cover Photo is the large panoramic image space at the top of the timeline.

Facebook Photos Size Guide / 2014 New Layout

It’s displayed at 851px wide by 315px high, like this:

Facebook Photos Size Guide / 2014 New Layout

The image you upload must be at least 399px wide–one that’s at least 720px wide will work best. You can upload a photo already cropped and resized to precisely those sizes (here’s how if you’re using Lightroom). Or you can upload a larger image, in which case you’ll be given a chance to move the image to choose the crop you’d like displayed.

You can only designate one photo as your Cover Photo. Panoramas are ideal. Simple crops also work. And there’s nothing stopping you from assembling a collage in your imaging software, saving it as a single image file, and uploading that.

Facebook Photos Size Guide / 2014 New Layout

You can find more examples on my guide for creating a Facebook Cover Photo collage using Lightroom.

If you’ve just set up a new Facebook profile or page and don’t yet have a cover photo, just click on the “Add Cover Photo” button at the top of the page where the Cover Photo will go. You’ll then get this warning popup:

Facebook Photos Size Guide / 2014 New Layout

Once you’ve added your photo, you can change it easily. When you’re logged in to your account and on the Timeline view, if you hover the mouse over the Cover Photo you should get a “Change Cover” button at the bottom right of the Cover Photo. Click on that and you’ll get the menu item to choose where photo comes from. You can choose from existing photos you’ve uploaded to Facebook or upload a new one. And if you decide you want to reposition or remove the photo, you can use the same menu. It looks a little something like this:

Facebook Photos Size Guide / 2014 New Layout

Facebook offers this advice: “To get the fastest load times for your Page, upload an sRGB JPG file that’s 851 pixels wide, 315 pixels tall and less than 100 kilobytes. For images with your logo or text-based content, you may get a higher quality result by using a PNG file.”

For more information on the latter point–about using text, logos, or watermarks on images, I have a separate post on that which goes into more detail.

I also have a separate post with more detail on Facebook Cover Photo Size.

Facebook Cover Photo Gradient

In the new layout, cover photos now have a narrow gray semi-transparent gradient running along the bottom. This is something personal profiles have had for a while, but it’s now also on cover photos on business pages.

It’s presumably there because the page name, page type, and admin boxes now overlay the bottom of the cover photo (they used to be below the cover photo). Because the text is always in white, the gradient makes the text legible even against a white cover photo.

I can’t say I’m a fan, but unfortunately there’s no way to remove it.

Facebook Profile Picture Size

The Profile Image is now the smaller, square at bottom left of the header, overlapping the cover photo.

Facebook Photos Size Guide / 2014 New Layout

You have to upload an image at least 180px by 180px. It’s displayed at 160px by 160px. (Its “natural” size is actually resized to 168px by 168px, but it’s only displayed at 160px by 160px.) The thin white border is added automatically and there’s no way to remove it.

Facebook Photos Size Guide / 2014 New Layout

If you use a photo that’s not square, you have some control over which part of the image to use for the crop. When you’re logged in, hover over the profile image and choose “Edit Profile Picture” and then “Edit Thumbnail”.

Facebook Photos Size Guide / 2014 New Layout

You can then click on the crop lines to choose the part of the image you want to use.

Facebook Photos Size Guide / 2014 New Layout

Tip: If you find that your resulting profile picture, after it’s downsized in Facebook, is blurry, try uploading an image twice the size of the downsized image (that is, an image that is 320px by 320px). That should give a sharper result.

Profile Picture on the Timeline

The profile image that appears next to your name on comments and posts is the same image but is automatically scaled down to 32px by 32px.

Facebook Photos Size Guide / 2014 New Layout

Shared Link Thumbnails

Some things got simplified in the new layout. Shared link thumbnails didn’t.

There are different ways that Facebook displays thumbnail images with links. Ideally, you can get full-width thumbnails that are scaled to fill a box 484px by 252px. Like this:

Facebook Photos Size Guide / 2014 New Layout

But not every link thumbnail displays full-width. What the specific criteria are is still to be determined, but it likely has to do with whether the page you’re linking has the OpenGraph image property defined (ie. the og:image tag). It might then also depend on the size of the image and orientation, as it does with Google+.

When the thumbnail doesn’t display full-width, it goes into a small box at left. In that case, a landscape thumbnails fits in a box 155px wide.

Facebook Photos Size Guide / 2014 New Layout

And a portrait thumbnail fits in a box 114px high.

Facebook Photos Size Guide / 2014 New Layout

You also have the option of uploading a new image for the thumbnail if you don’t like the one automatically suggested from the original page. I’m still experimenting, but it appears that if you upload a new image you’re stuck with the small thumbnail even if the original suggested one was full-width.

One Photo on the Timeline

When you upload an image to the timeline, a thumbnail is generated automatically to fit within a box that is 504px by 504px. So if you want to use the maximum space allowed, upload a square photo at least 504px wide.

Facebook Photos Size Guide / 2014 New Layout

If you upload a landscape (horizontal) image, it will be scaled to 504px wide.

Facebook Photos Size Guide / 2014 New Layout

If you upload a portrait (vertical) image, it will be scaled to 504px high and it’ll be centered with gray on each side. How much empty gray you get on the sides depends on the aspect ratio. A narrower image will result in more empty gray than a wider image.

Facebook Photos Size Guide / 2014 New Layout

Uploading Multiple Images to a Page Timeline

You can upload multiple photos at once to the timeline. How they’re displayed depends on how many images you’re uploading and the orientation of what I will call the primary image.

The primary image is what I’m calling the one that displays first, and it also displays larger in some of the layouts. So far as I know there’s not official name for it, but I’m going to go ahead and use primary image.

As well as displaying first, the primary image has another important role. It determines the layout you get. If you upload 3 images with a square primary image you’ll end up with a different layout than if you upload 3 images with a rectangular primary image.

The easiest way to select which image serves as the primary image is to drag it to the left in the upload dialog. In this example, the photo of the lion will become the primary image. If I want the photo of the monkey to be the primary image, I’d just drag it to the left.

Facebook Photos Size Guide / 2014 New Layout

In many circumstances, the order matters not just because it determines which photo is to the left or on top, but because the way that the thumbnails displays is determined by the orientation of that primary image.

2 Images With Horizontal (Landscape) Primary Image

Facebook Photos Size Guide / 2014 New Layout

2 Images With Vertical (Portrait) Primary Image

Facebook Photos Size Guide / 2014 New Layout

2 Images With Square Primary Image

Facebook Photos Size Guide / 2014 New Layout

3 Images With Horizontal (Landscape) Primary Image

Facebook Photos Size Guide / 2014 New Layout

You can mix and match the orientations of the non-primary images–they’ll still display the same.

3 Images With Vertical (Portrait) Primary Image

Facebook Photos Size Guide / 2014 New Layout

You can mix and match the orientations of the non-primary images–they’ll still display the same.

3 Images With Square Primary Image

Facebook Photos Size Guide / 2014 New Layout

You can mix and match the orientations of the non-primary images–they’ll still display the same.

4 or More Images with a Horizontal (Landscape) Primary Image

Facebook Photos Size Guide / 2014 New Layout

You can mix and match the orientations of the non-primary images–they’ll still display the same. If you upload 5 images or more, it displays only the first 4 images.

4 or More Images with a Vertical (Portrait) Primary Image

Facebook Photos Size Guide / 2014 New Layout

You can mix and match the orientations of the non-primary images–they’ll still display the same. If you upload 5 images or more, it displays only the first 4 images.

4 or More Images with a Square Primary Image

Facebook Photos Size Guide / 2014 New Layout

You can mix and match the orientations of the non-primary images–they’ll still display the same. If you upload 5 images or more, it displays only the first 4 images.

Full-Width Photos on the Timeline

The new layout that Facebook introduced in the summer of 2014 did away with the option of having a featured image span both columns. Your updates now only show in a single column, and there’s no way to make photos wider than that column.

News Feed

Okay, so you’ve carefully sized your images to look their best on your page. But Facebook has another surprise for you. The sizes visitors see when you got to your page are not the same sizes visitors see on their own news feeds. And the news feeds have their own little resizing quirk.

The maximum image space on a news feed is 470px wide by 394px high. An image of that exact aspect ratio (235:197) or those exact pixel dimensions will maximize the available space.

But unlike on timelines, images on the news feed aren’t cropped, so the full image is always displayed.

A horizontal (landscape) image takes up the full width of 470px, like this:

Facebook Photos Size Guide / 2014 New Layout

A vertical (portrait) image gets posted at 394px high, aligned to the left, with white space to the right. How much white space depends on the specific aspect ratio of your image. Like this:

Facebook Photos Size Guide / 2014 New Layout

Display on Mobile Devices

Pretty much all bets are off when it comes to display on mobile devices. There’s a huge range of screen sizes, screen resolutions (like Apple’s Retina Display), and software, so the pixel measurements vary quite a lot. As some examples, here are how the same timeline from above looks on an iPad 4 and iPhone 5. The pixel measurements will vary from device to device, from app to app, and even between holding the screen vertically and horizontally.

iPhone 5 ( IOS7 / Safari / Screen vertical )

What were the square thumbnails and the full-width thumbnails from above are all rendered in the same full-width rectangle on iPhone.

Facebook Photos Size Guide / 2014 New Layout

iPad 4 ( iOS 7 / Safari / Screen vertical)

The full-width and square timeline thumbnails are retained, but the pixel dimensions are different.

Facebook Photos Size Guide / 2014 New Layout

Image Quality Issues

Something to be aware of is that Facebook compresses some images pretty aggressively when you upload and display them.

It makes sense–naturally, they want to speed page loads and reduce bandwidth by applying as much compression as they can get away with. To my mind, they compress too much, but how noticeable it is will depend on whether things like the range of colors in your image and amount of detail in your photo.

In the examples above, the JPG compression is far more noticeable in the montage version than in the Sydney Harbour Bridge version. I set the quality and sharpening settings the same for each in the originals before they were uploaded. Some users have reported that images with lots of reds and oranges seem to show the effects of the compression more than ones with blues and greens, but it depends on the actual image.

It also seems to depend on what kind of image you’re displaying. Photo gallery images seem to have less compression applied in displaying than do design elements like the cover photo and profile picture.

There are some things you can do in prepping the images before uploading that can help reduce the chances that your image will come out looking crappy.

Upload images that don’t have a lot of compression already applied. For JPGs, for example, try keeping the quality setting at 80 or above–Facebook is going to compress it again anyway. If you’re using software that factors in colorspace (like Lightroom or Photoshop), use sRGB colorspace. And uploading images that are already resized to close to or at the target display size and not overly sharpened seems to work well.

If none of these work, take a look at my post on how to get sharp text on Facebook images.

Getting Fuzzy Text, Logos, or Watermarks on Images?

If you’re including text, a logo, or watermark and finding that it’s ending up fuzzy and unclear due to the JPG artifacts, I’ve got a separate post detailing how to fix it: How to get sharp text on Facebook images.

Facebook Photos Cheat Sheet

Width Height Notes
Cover Photo 851px 315px
Profile Picture in Header 160px 160px Must be uploaded at 180px by 180px
Profile Picture on Timeline 32px 32px Same image as main Profile Picture, automatically downscaled
Shared Link Thumbnail 484px 252px Only for full-width thumbnails. In some cases much smaller thumbnails are used.
Uploaded Photos 2048px 2048px
Uploaded Timeline Photo Thumbnail 504px max 504px max See exceptions above for multiple images.
Summary
Facebook Photos Size Guide / 2014 New Layout
Article Name
Facebook Photos Size Guide / 2014 New Layout
Author
Description
An up-to-date guide explaining what's what, what's where, and how big when using images on your Facebook pages.

Comments

  1. Shelley says

    Wish I could say this works for me, but sizing my timeline cover collage to 851 x 315 still leaves it unsharp and fuzzy looking. Any other suggestions? I have tried sizing with the W x H and also Dimensions on export from LR. Getting super frustrated! Consequently I have no cover photo posted right now. Thank you for any input.

  2. says

    I’m curious about the nine photos it shows as your most recent tagged photos… I want to find an image I like, split it into nine and then tag myself so the image will appear there, but every preview in that box is centred and also resized, how does that work??

Trackbacks

Comment