There are a several different ways of using images and photos on Facebook, each of which has different dimensions and quirks. Some are for design and identity on the user interface, like your profile picture or cover photo. And it’s a great way to share photos.
But working out the display sizes and types isn’t as easy as it could be and it involves some wrangling to get it to do what you want. Each type of image on a Facebook page has its own size and oddities. And Facebook has made some changes to its image sizes and layout recently, particularly with how thumbnails and images display on the timeline. So here’s my updated 2014 version of the guide for Facebook image and photo sizes and types. You can see the examples below in action on my Facebook page.
The cover photo is the large panoramic image space at the top of the timeline. It’s displayed at 851px wide by 315px high. The image you upload must be at least 399 pixels wide–one that’s at least 720 pixels wide will work best. You can upload an image 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. But there’s nothing stopping you from assembling a collage in your imaging software, saving it as a single image file, and uploading that. Here are some examples. And here’s a guide for creating a Facebook Cover Photo collage using Lightroom.
If you 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:
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 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.”
The Profile Image is now the smaller, square at bottom left of the header, overlapping the cover photo. In the examples above, it’s my shadow. Its final display dimensions are 160px by 160px, but you have to upload an image at least 180px by 180px. The thin white border is added automatically and there’s no way to remove it. The profile image will display 23 pixels from the left side of your cover photo and 210 pixels from its top.
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”.
You can then click on the thumbnail and drag. Alternatively, you can check the “Scale to fit” box, which will display the whole image but fit within the same sized square (that is, you’ll end up with white on the top and bottom of a horizontal image or on the sides of a vertical image).
Tip: If you find that your resulting profile image, 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 320x320px. That should give a sharper result. [Thanks to Yuri for the tip!]
Profile Image 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.
Shared Link Thumbnails
The thumbnail for shared links is now sized at 377 px wide and 197 px tall, like this:
Photo Thumbnails on a Page Timeline
When you upload an image to the timeline, a thumbnail is generated of the entire image to fit within a box 403 px wide and 504 px tall.
The behavior here has changed recently. It used to generate a cropped square thumbnail. But now the aspect ratio matters. The new method will fit the full image within a box 403 px wide and 504 px tall.
So if you upload a horizontal (or landscape) image, it will fill the width, like this:
And if you upload a vertical (or portrait) image, it will go to a maximum of 504 px high and fit the image within the box (in this example, that meant some spare space on either side):
If you want to make maximize use of the space, upload an image at exactly 403 px wide and 504 px tall (or the corresponding ratio if larger–eg. 806 px by 1008 px, etc).
Full-Width Photo Thumbnails on a Page Timeline
On Pages (but not on personal timelines), you can also make the thumbnail span both columns of the timeline. After you add your photo, hover over the top right of that post’s box. You should see a small down arrow (it’s not very obvious) that launches a dropdown menu. From that menu, choose Highlight.
The thumbnail will then display full-width at dimensions of up to 843 px by 504 px.
Again, this behavior has changed. It used to crop the image, it now shows the entire image to fit within a box 843 px by 504 px. If you upload an image of exactly those dimensions (or the same ratio), you get this:
If you upload an image that’s not at those dimensions, you’ll get space on two of the sides, like this (note the space on either side of the image):
Photo Thumbnails on a Personal Timeline
One a page timeline, updates are added on two columns of equal width. On a personal timeline, updates are added only to a right column. And that right column is a bit wider, meaning that there’s a larger box for thumbnails. One a personal timeline, thumbnails go up to 504 px wide, like this:
Uploading Multiple Images to a Page Timeline
A new feature is that you can now upload multiple images directly to the timeline. When you’re adding a photo, simply hit the plus sign in the upload box.
The resulting images don’t display like regular thumbnails, though. Instead, if you upload three or more images, you’ll get three small square thumbnails side by side, like this:
To fit within the timeline boxes, the last one isn’t quite square. The first two are 133 px by 133 px. The third one is 131 px wide and 133 px tall.
If you upload two images, you’ll get two larger square thumbnails, like this:
Each one is 200 px by 200 px.
Uploading Multiple Images to a Personal Timeline
On a personal timeline you also have the new option to upload multiple images, but because the right column is a bit larger than on a page timeline, the thumbnails behave slightly differently. Rather than squares, you end up with rectangles. With three or more images, you get three thumbnails that are each 166 px wide and 125 px tall, like this:
And if you upload two images, the thumbnails are each 251 px wide by 188 px tall, like this:
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.
iPad 4 ( iOS 7 / Safari / Screen vertical)
The full-width and square timeline thumbnails are retained, but the pixel dimensions are different.
What is the Biggest Photo You Can Upload to Facebook?
Facebook nominally has a maximum upload size of 2048px wide, but the practical limit is actually much higher. I’ve tested with images 3000px wide and a 6000px by 4000px image. There was no problem in either case–they uploaded just fine and displayed normally. Which makes sense–most cameras and phones these days take images far bigger than 2048×2048, and expecting the user to resize every image before they upload would make things unnecessarily complicated (or, in business jargon, would create too much friction), and people would become less likely to post images.
At the moment, there are limits to the usefulness of uploading images bigger than 2048px. Most of the visitors to your page don’t have larger than a 27-inch monitor–a 2048px image with the design elements Facebook puts around it will fill up most of the screen on a monitor that size. It might become more useful when very large high-density displays like Retina screens become more common.
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 JPEG 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 a bit 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 image.
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 jpegs, 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.
Protecting Your Images
Once you’ve shared an image on Facebook you’ve pretty much given up any control over protecting it. Others can download the photo simply by right-clicking. There are also dedicated apps designed specifically for downloading Facebook photos in bulk (like this one or this one).
And, annoyingly, Facebook strips out all IPTC metadata when you upload the image, meaning that any embedded copyright information, location information, or captions are removed (and that includes PLUS metadata). It also renames the image file, so adding copyright information to the filename doesn’t work either.
So your options are:
- Share your photo and not worry if someone “borrows” it.
- Share your photo and add a watermark (recognizing that people still might “borrow” it).
- Don’t upload it to Facebook to begin with.
|Profile Image in Header||160px||160px||Must be uploaded at 180px by 180px|
|Profile Image on Timeline||32px||32px||Same image as main Profile Image, automatically downscaled|
|Thumbnail for Shared Links||155px||114px|
|Uploaded Timeline Photo Thumbnail||403px||403px||See exceptions above for small images.|
|Video Preview Thumbnail||403px||226px|
Facebook’s Terms of Service
Just because you can add photos to Facebook doesn’t necessarily mean you should immediately start uploading your entire image archive. If your photos have value to you or you want control over how they can be used, I strongly recommend taking a careful look at Facebook’s Terms of Service. They’re closely watched and often controversial. And to complicate matters, it’s not always clear whether you’re looking at the latest version.
This means that any photos uploaded to Facebook may be sold, distributed or otherwise commercialized with no compensation to the photographer. These new terms of service go into effect today.
. . .
Here’s the most important language. (Strikethrough indicates language that is being removed. Bold text is used to indicate the new additions.)
“You can use your privacy settings to limit how your name and profile picture may be associated with commercial, sponsored, or related content (such as a brand you like) served or enhanced by us. You give us permission to use your name, and profile picture, content, and information in connection withcommercial, sponsored, or related that content (such as a brand you like) served or enhanced by us, subject to the limits you place. This means, for example, that you permit a business or other entity to pay us to display your name and/or profile picture with your content or information, without any compensation to you. If you have selected a specific audience for your content or information, we will respect your choice when we use it.“
The ASMP also posted a Q&A on the topic, which includes some very handy information.
It’s a moving target. And it’s also entirely possible that the terms will change at some point after you’ve uploaded the images.