Every day I see brands uploading terrible quality images to Facebook. Images that aren’t properly optimized to meet Facebook’s image sizing are a needlessly common occurrence that can tarnish an otherwise stellar Facebook page or post.
In this post we aim to give you the knowledge you need to not only post images that are appropriately sized for every Facebook image type, but also to ensure that the images you post are of the highest quality (including what size images to use in your Gleam campaigns).
Did you know that using images properly can boost your engagement on posts by up to 300%?
The profile image is a square image that gets resized to 170 x 170px on desktop and 128 x 128px on mobile devices.
The image you upload should be 340 x 340px for optimum clarity on retina screens. This is twice as large as profile images are displayed on desktop.
For a business page, the cover photo will be resized to 828 x 315px on desktop and 640 x 360px on mobile devices.
By uploading a 1656 x 930px image your cover photo will be fully optimized for high resolution devices and also accommodate the differing formats of desktop and mobile cover photos.
It’s important to keep in mind that there’s a small 75px (150px if you’re uploading Retina) at the top and bottom of your image that will be cropped out for desktop display.
An event image will be displayed at 500 x 262px on desktop. The image will be adjusted to varying sizes when it appears on mobile devices or news feeds.
To ensure the best display across all devices the event image you upload should once again be twice as large as the displayed image’s size. This means uploading a 1000 x 524px image for your event.
Facebook App Canvas
Any applications installed to a Facebook Tab have a maximum width of 810px.
Images accompanying links that are shared on personal pages & timelines are resized to 476 x 249px when displayed on news feeds. Facebook recommends that the ideal size for a shared link thumbnail is 1200 x 628px, as this will best serve high resolution viewing.
If the image associated with the link is smaller than the sizes above, Facebook will create a 154 x 154px or 90 x 90px thumbnail instead. Due to this, the inclusion of larger images will aid your articles in garnering more attention.
The largest photo you can upload to Facebook is 2048 x 2048px & the maximum display size in landscape is 960 x 720. However, if you view an image in full screen mode it can appear up to the maximum upload size of 2048 x 2048px.
Photos you post to your timeline will appear 476px wide, with the height varying in order to retain the shape of the image. The height of an image cannot exceed 714px.
In order to maximize the crispness of your images try uploading a photo that is 952px wide, which is twice as large as the image’s displayed size.
Facebook ads can appear in multiple locations including mobile and desktop news feeds as well as down the right column of a page.
Facebook recommends that all advertisement images are 1200x628px. This will optimize quality on all devices and ensure the appropriate resizing of images across all advertisement styles & locations.
Gleam Facebook Competition Dimensions
If you’re running your Facebook Competition with Gleam then a question we often get is what size should I make my Feature Image so that it shows perfectly when shared?
The standard Feature Image in the Gleam campaign is 540px wide and can be as tall as you like.
However Facebook recommends a size for Sharing of 1200 x 630px, which means that if you want your Feature image to look good on when shared on Facebook you must ideally use this ratio.
So we recommend using 1080 x 567px wide for Feature images that you want to look crisp in Gleam and also look good when shared on Facebook.
Custom Viral Share Image
Sometimes you don’t want your Feature image to be constrained by the recommended Facebook dimensions. Business customers have the ability to upload a separate Share image for Facebook inside the Viral Share action.
This allows you to have a taller Feature image, but a fully optimised share image for Facebook.
Open Graph On Custom Landing Page
If you have Gleam embedded on your own landing page then the Viral Share action will piggyback off your own Open Graph tags.
Below is an example of the tags you should setup:
<meta property="og:type" content="article"/> <meta property="og:title" content="Huawei P10 International Giveaway!"/> <meta property="og:description" content="Try your luck and win a brand new Huawei P9 at this week's Sunday Giveaway!"/> <meta property="og:url" content="http://www.androidauthority.com/huawei-p10-international-giveaway-761169/"/> <meta property="og:site_name" content="Android Authority"/> <meta property="og:image" content="http://cdn03.androidauthority.net/wp-content/uploads/2017/03/huawei-p10-and-p10-plus-review-aa-11-of-31.jpg"/>
Make sure you refresh the URL of your page via the Facebook Debugger after updating the Open Graph meta tags on your page.
Creating a Custom Facebook Post
When promoting your competition you’ll want to announce it on your Facebook page. The best way to do this is to create a custom post which is 952px wide for portrait or 1200x630px for Landscape (as seen below).
Here at Gleam we’ve built a platform that takes the heavy lifting out of running a successful contest. Our widget looks great, has all the integrations you’ll need and even syncs with over 30+ email marketing providers.
Our platform is trusted by over 500k businesses around the world. We do the hard work so you can do what you do best, run amazing campaigns for your customers.