If you are reading this then you, like us, have probably been bemused by Facebook’s
frustrating interesting take on how it displays your images. You might have noticed that Facebook changes things from time to time and then rolls things out to users at different times. We’ve put together this comprehensive (and hopefully useful) guide to help your images work in any scenario whether using it for business pages or just to post pictures of friends and family.
Facebook Cover Photo
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. We recommend that you use an image that’s 820px wide by 360px tall. If you want better quality however, use an image that’s at least 1640 pixels wide by 720 pixels tall.
Note that the image is displayed differently depending on what device its being viewed on. Some devices will crop your image so be aware of the safe zone. For example on a desktop browser, the entire width of the image is displayed but the top and the bottom are trimmed by 24 pixels each. On the mobile app the height is displayed fully but this time the sides are trimmed by 90 pixels each.
What this means is that there is a safe zone in the middle of the image. Anything that isn’t in the safe zone won’t be visible to at least some users for some of the time. Don’t include vital information like text or part of a logo outside of the safe area if you don’t want it to be cropped.
Here’s a visualization of what we mean. The original image below is set with each band of colour representing 25 pixels wide.
Displayed in a web browser it looks like this with the image cropped at the top and bottom.
When you are viewing it in the Facebook app on the mobile it crops like this.
To avoid this, 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, sticking within the green area of this.
Remember if you are using an image with the higher resolution, you’ll obviously want to double all of those dimensions.
Facebook Profile Picture
The Profile Picture is to the left of the cover photo in the web browser display. It used to be a square, but it’s now a circle on the desktop version while still a square in the mobile app.
When selecting a photo to add as your profile picture, you’ll get the option to move the focus around and you’ll also be able to zoom in and out if it exceeds the minimum resolution.
Whatever shape the image you upload is, it will be cropped to a circle and in a web browser displays at 172 pixels diameter and smaller again in the mobile app.
Tip: If you find that your profile picture once set is blurry then try uploading an image twice the size of the downsized image (344px by 344px). In many instances this can give a much sharper result.
Photo’s in Your Timeline
A thumbnail is generated automatically when you upload an image to the timeline. The image is sized 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) using the ratio of 3:2. This is an example of using the maximum available space:
If you upload a landscape (horizontal) image, it gets scaled to 500px wide and retains 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 and height both at 500px.
Posting Multiple Images at Once
When you upload multiple photos at once to your timeline, they’re displayed depending on how many images you’re uploading and the orientation of what we will refer to as the primary image.
The primary image is what we’re calling the image that displays first in the uploading popup and it also displays as a larger image in some of the layouts.
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 box.
Here’s some examples of what we mean. In this one we’ll replicate uploading two images, a purple square which will be the primary image and a grey vertical rectangle.
It posts like this: As you can see, the grey rectangle gets cropped to a square.
Uploading exactly the same two images but reversing them, so that the vertical rectangle is first like this:
displays like this: You can see now that the rectangle being the primary image, crops the square into a rectangle now.
The same principle applies if you’re uploading two, three, or four images, the layout will always take its cue from the primary image.
Have a play around with uploading different numbers of photos and different primary image layouts to get a better understanding of how Facebook sizes and positions them once uploaded. There are so many different variants but you can always choose your primary photo easily by dragging if you recall.
You can also mix and match the orientations of the non-primary images as they’ll still display the same.
One thing to note if you upload 5 images or more, it will only display 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.
Event Header Photos
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. Something to watch out for though is that in the main event view the image is scaled down quite a lot, so don’t use fonts that are too small. Although people can click on the image to open a larger version not everyone is going to think 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. Naturally, they want to speed page loads and reduce bandwidth by applying as much compression as they can get away with. How noticeable it is depends on things like the range of colours in your image and amount of detail in your photo. 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 upload that can help reduce the chances that your image will come out looking pixelated.
1) 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.
2 ) Upload images that don’t already have a lot of compression applied. For example with JPGS, try keeping the quality setting at 80 or above as Facebook is only going to compress it again anyway. If you’re using software that factors in colourspace (like Lightroom or Photoshop), use sRGB colourspace and uploading images that are already resized to close to or at the end display size and not overly sharpened seems to work well.