Ever tried using photos and images on your Facebook page? It can be frustrating. So here's an up-to-date guide explaining what's what, what's where, and how big.
In mid-2020, Facebook starting rolling out a new layout for the desktop version of its site. You can find the newer version of my Facebook image size guide for the new layout here.
The rollout for the new layout is done gradually. Facebook is calling the updated version New Facebook and the old layout Classic Facebook. And, for now, you can switch between them. So if you’re still using the older version, that’s what this post is focusing on: Classic Facebook.
If you're looking to make eye-catching Facebook cover photos and Facebook posts, it's worth checking out Canva. It comes loaded with templates perfectly sized for Facebook's image size requirements. And there's a mobile app, so you can do it right from your phone.
There's a free plan, and you can get many more useful features, photos, and fonts with the Pro plan with a 30-day free trial.
Recommendation: Use an image that’s at least 820 pixels wide by 360 pixels tall. But if you want better quality, use an image that’s at least 1640 pixels by 720 pixels.
The Facebook Cover Photo is the large panoramic image space at the top of the timeline. It’s also sometimes called the banner image or the header photo.
The way it’s displayed varies by the size of the browser window or device screen. And not all of the image is visible on every display.
On a desktop browser, the entire width of the image is displayed. But there are thin strips from the top and bottom that are trimmed off. Each strip is 24px tall.
On the mobile app, you get the full height, but larger strips are trimmed off each side. Each of those strips are 90 pixels wide.
What that means is that there’s a safe zone in the middle of the image. Anything out of that safe zone will not be visible to at least some users some of the time. So you wouldn’t want to include some vital information like text, part of a logo, or faces in a group photo, near the edges of the image, for instance.
Here’s a visualization of what I mean. This is the original image I’ll use for illustration. Each band is precisely 25 pixels wide.
Displayed in a web browser, it looks like this, with the bands trimmed at the top and bottom:
In the Facebook mobile app, it looks like this, with the sides cut off instead:
So what you’ll want to do is to make sure any important visual information is away from the edges of the image, at least 24 pixels from the top or bottom and at least 90 pixels from each side. So sticking within the green area of this:
Of course, if you’re following my recommendation and uploading an image at double resolution, you’ll obviously want to double all of those dimensions.
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 a Cover” button at the top of the page where the Cover Photo will go.
Once you’ve added your photo, you can replace it easily. When you’re logged in to your account and on the Timeline view, move your mouse to the camera icon at the top left of the cover photo section. When the cursor gets over it, it will change to “Change Cover.” Clicking on that opens a drop-down menu from which you can choose the source for the new photo. This is also the same menu to use if you want to remove or reposition an existing photo.
In terms of types of images, panoramas are ideal. Simple crops also work, although the effectiveness is obviously going to vary based on what it’s the image. And there’s nothing stopping you from assembling multiple photos into a collage in your imaging software, saving it as a single image file, and uploading that. Like these, for example:
Until fairly recently, it was only possible to choose one photo to act as your static cover photo. But a new feature has been added: slideshows. You can now select up to 5 photos that rotate. Access this feature through the same menu that lets you add or change the cover photo (i.e. the camera icon at the top left of the cover image section).
When you create a slideshow, you’re given the option to select up to 5 images that will be used. Use the filmstrip at the top to choose the images either from existing images or upload new ones. You can then click on the thumbnail and get a preview of how it will look in the larger space below the thumbnails. You can click and drag in that section to reposition the image in the viewport.
You can also have a dynamically generated version that lets Facebook choose the photos based on what’s performing well and based on the activity on your page. You can turn this feature on or off using the switch at the top right of the slideshow editing screen.
If you’re using the slideshow cover, your visitors can navigate through the slideshow using the arrows on each side or the position indicators at the bottom.
There are two things that I find odd about the way the slideshows currently display to visitors. The first is that the slideshow doesn’t advance automatically. So to see more than one image in the slideshow, your visitors will have to know to manually advance through. I suspect only a very small percentage will do so. The second thing is that if you turn off the option for Facebook choosing the images, it displays the images in the same order every time rather than randomly. The upshot of both of these things is that, at least in how it’s currently implemented, the vast majority of your page’s visitors are likely to only ever see the first image.
You can now also use video files for your banner area. They must be between 20 and 90 seconds and measure at least 820 by 312 pixels. The recommended size is 820 by 462.
If you’re shooting a video clip for this using a camera that lets you choose the video resolution, the 720p mode would be a good place to start because that measures 1280 by 720, which comfortably has enough resolution.
I have more detailed guide on Facebook video covers separately.
I have a more detailed post on Facebook profile picture size separately, but here’s the gist.
|Desktop/Laptop web browser||170 pixels|
|Feature Phones||36 pixels|
The Facebook profile picture is to the left of the cover photo when displaying your Facebook Page in a web browser. In the mobile app, it’s displayed under your cover photo.
It has a thin white line around it that’s applied automatically—you can’t remove that or control it.
The good news is that you don’t have to upload a circular image, something that would be a bit of a pain to create. Instead, you can upload any regular rectangular or square image. Whatever shape the image is that you upload, it will be cropped to a circle when it is displayed.
Desktop/laptop web browser. In a regular Page view, such as when someone is checking out your profile, it displays in a desktop’s web browser as a circle with a 170 pixels diameter.
Phones. The size the profile picture displays on mobile phones varies by the type of phone. On modern smartphones, it displays as a circle with 128 pixels diameter. On older phones, it displays at 36 pixels diameter.
When up select a photo to add a profile picture, you’ll get the option to move the focal area around (assuming it’s not square) as well as zoom in and out (so long as it exceeds the minimum resolution).
The profile image that appears next to your name on comments and posts in the timeline is the same image and is still a circle, but it’s automatically scaled down to a diameter of 40 pixels.
Because it displays so small, you’re unlikely to run into an issue with image sizes. So long as your image is at least 170 pixels on its shortest size (which is pretty tiny), you should be good to go.
The thumbnails for shared links display in a web browser at 500 pixels wide and 261 pixels tall.
For a while, it was possible to choose a different shared link image, but that feature has been removed. For now, at least, there is a workaround if you share the links using a social media management service such as Buffer, but you can can’t choose a different image to use from within Facebook anymore.
If you’re sharing links from your own site, it is possible to specify which image you want to use as the image thumbnail, but that’s something that you’ll need to set up on your site and is beyond the scope of this post. But if you’re looking for what terms to Google on this, what you’re trying to do is set the “og:image” property in the page’s Open Graph metadata. Here’s Facebook’s documentation, and if you’re using a CMS like WordPress for your site there are plugins that can handle it for you.
What you can do still is add more thumbnails that are in addition to the original (not in place). When you go to share a link, use the bottom section of the popup to add more images. But you can’t deselect the original image anymore like you used to be able to.
The size and layouts of thumbnails on the timeline varies according to how many images you’re sharing in the same post as well as what orientation specific images have.
When you upload an image to the timeline, a thumbnail is generated automatically to fit within a box that is 500px wide and up to 750px tall. So if you want to use the maximum space available, upload an image in portrait orientation (vertical) that is in the ratio of 3:2. This is an example of using the maximum available space:
If you upload a landscape (horizontal) image, it will be scaled to 500px wide and retain its shape. The full area of the image appears without any cropping.
This is another rectangle in landscape orientation, but it’s a much narrower aspect ratio like a banner or panorama. The width is again 500px and the image is scaled so that the entire image area appears.
If you upload that same image rotated 90 degrees, so that it’s tall rather than wide, it will be cropped to the maximum available area of 500px by 750px.
And if you upload a square, the whole image will be displayed, with the width at 500px.
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 in the uploading popup, and it also displays larger in some of the layouts. So far as I know, there’s not an official name for it, but I’m going to go ahead and use “primary image.” So that’s what I’m referring to in the section below.
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.
Here’s an example of what I mean. In this one, I’m uploading two images, an orange square and a green vertical rectangle. If the orange square is in the first position in the upload dialog, like this:
it posts like this:
Uploading exactly the same two images but reversing them, so that the vertical rectangle is first, like this:
displays like this:
The same principle applies if you’re uploading two, three, or four images–the layout will always take its cue from the primary image.
The full width becomes 500px and each of them is cropped to 249px, with a 2px white gap between them.
Because the layout takes its cue from the primary image, you can mix and match the orientations of the non-primary images–they’ll still display the same.
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 but will add an overlay to the bottom right thumbnail with the number of images that are not displayed (eg. +2 or +4, etc). Like this:
Yes, they were cool. The image spanned both columns. But Facebook did away with them in their redesign in mid-2014. Your updates now only show in a single column, and there’s no way to make photos wider than that column.
No matter what shape image you upload as a header image for an event post, it’ll be cropped to an aspect ratio of 16:9. For best results, upload an image that’s 1920 by 1080 pixels. But something to watch out for is that in the main event view it’s scaled down quite a lot, so don’t use fonts that are too small (people can click on the image to open a larger version, but not everyone is going to do that).
When it’s displayed on the main event page it’s scaled to 500 by 262 pixels, like this:
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. I’m not the only one to wish they’d be less aggressive with their compression, 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 are 99KB or less in filesize. Facebook should leave images less than that untouched, which gives you control over how the compression is applied.
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.
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.
While not specifically related to image sizes, it is worth knowing that Facebook strips out all metadata from your images. That includes all GPS, camera type, and other data that your camera might embed, as well as anything like keywords or copyright information you might have added. (An exception is if you’re in Germany).
|Cover Photo / Cover Slideshow||820px||360px|
|Profile Picture in Header||172px||172px||Must be at least 180px by 180px|
|Profile Picture on Timeline||40px||40px||Same image as main Profile Picture, automatically downscaled|
|Shared Link Thumbnail||500px||261px||Only for single thumbnails. Multiple thumbnails are cropped.|
|Uploaded Timeline Photo Thumbnail||500px max||750px max||See exceptions above for multiple images.|
|Event Header Image||500px||262px||16:9 aspect ratio only. For best results, upload 1920 x 1080 px image.|