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.
Facebook has made some changes to its image sizes and layout recently, so here’s my updated 2013 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 sized to fit in a box 155px wide and 114px high, regardless of the orientation of the original image.
If you use a thumbnail that is a different shape, it will still be sized to fit within that 155px by 114px box. This is an example with a panorama-shaped thumbnail.
Photo Thumbnails on the Timeline
When you upload an image to the timeline, by default a large square thumbnail is automatically generated and displayed on the timeline at 403 px by 403 px. The center of the image is automatically chosen by default, but you can reposition the photo by clicking on the pencil icon to edit, then choose Reposition Photo and drag. You’re limited to dragging along the longest dimension. Be sure to hit the Save button once you’re happy with the positioning.
You can upload an image 403px by 403px, in which case no resizing will be done. The entire image will show as the thumbnail, and it won’t be upsized in the image viewer. Here’s an example of what happens when you upload an image 403px by 403px.
The timeline thumb:
And in the viewer:
But if you upload rectangular images with a longest side of 403px or less, landscape (horizontal) and portrait (vertical) images get handled differently. When you upload a horizontal image 403px wide, the whole image displays on the timeline, like this:
And it shows in the gallery view like this:
But if you upload a vertical image 403px tall, Facebook still tries to fill the width and cuts from the top or bottom, like this:
You’ll notice that it’s actually upsizing the image to do that, which creates the ugly jagged artefacts. The same image shows in the gallery view like this:
If you’re CSS-inclined, it’s because this is being applied to the thumbnail: height: auto; width: 100%. That translates as the image filling the full width no matter what, but the height doesn’t have to.
Full-Width Photo Thumbnails on the Timeline
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 843 px by 403 px, 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:
1. Share your photo and not worry if someone “borrows” it.
2. Share your photo and add a watermark (recognizing that people still might “borrow” it).
3. 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.