So you have written an excellent article or created a beautiful page, but what lets it down is when you start sharing your links to social media platforms like Facebook, Google+, Twitter, etc… and your images are cut off or you’re not using the full size of the possible area that is available.
With the ever-changing landscape of screen sizes it is near impossible to tell you what the best dimensions are. Even if we get the optimum size, it is rather pointless. There is only one true method in getting the correct dimension and that is to use the aspect ratio for each platform. I will explain how to easily calculate what image size to use based on the social network you are trying to target.
This topic will cover the following points
- How to calculate the image size using the aspect ratio
- What aspect ratio is best for each platform
- Which meta tag you should use for each platform
- What is the best image size when targeting all social platforms at once and which device (Desktop, Tablet and Smartphone)
Before we start, the aspect ratio question
Due to the screen size on each device being different it is impossible to provide a correct image size for each device, but what is possible is the aspect ratio for each platform. Regardless of the device your using (excluding mobile) you will notice that the aspect ratio is always the same. I will explain the aspect ratio for each social platform below, I have calculated the correct aspect ratio, regardless of screen size.
Lets find out an image size!
We know in this example that Google+ uses an aspect ratio of 1.67
To calculate an image size with an aspect ratio of 1.67 we need to set ourselves an image width for example 1000 pixels and divide it by the aspect ratio in this case 1.67, which comes out at 599 pixels. So your image size is 1000 pixels wide and 599 pixels high.
Height = Width / Aspect Ratio
Now I have explained to you how to calculate an image, but how big should it be? I recommend a set width between 800 and 1000 pixels. To ensure that large and small screens are able to have the best quality.
When you share a link on Facebook the image aspect ratio is 1.92, if we take the size 470 pixels as our width than 246 pixels is our height. If you are only targeting Facebook than you should use the Open Graph protocol.
An example of the Open Graph image meta tag below
<meta property=”og:image” content=”http://www.smileywar.com/wp-content/uploads/2014/05/create-responsive-ads-in-wordpress.jpg” />
Sample how a posted link looks like on Facebook
Google’s current image aspect ratio is 1.67 which means if we have a 346 pixels wide image the height would be 194 pixels.
If you want to target Google specifically for your image, than you need to use the microdata schema.org
<meta itemprop=”image” content=”http://www.smileywar.com/wp-content/uploads/2014/05/create-responsive-ads-in-wordpress.jpg“>
Sample how a shared link on Google+ looks like
What I first want to mention is that Twitter has several tweets available, depending on the method we will cover summary and summary large image.
Summary Large Image:
We will first talk about the large image, as this image will be the base for which the smaller version will be generated from. The aspect ratio Twitter uses is 2. When we use an image width of 506 pixels than the height would be 253 pixels.
The smaller image however is a square image with the minimum dimensions of 120 pixels by 120. The problem here is that currently there is no separate twitter meta tag for thumbnails and for larger images. Meaning that you will have to ensure that the absolute center part has the most important message that you want to share. I have highlighted in pink below based of the larger image how twitter crops your image to display a thumbnail.
Again here we have a unique meta tag named Twitter Cards
Here we can see how a large Twitter card looks like
And a more used link sharing method the smaller Twitter card
I want larger images
If you have a larger image, than what all social platforms will do is crop and resize to fit to their dimensions. So the image that you want to use on your blog or website can be larger than specified, all you have to do is to keep the aspect ratio. This can easily be done by using your width and divide by the aspect ratio which equals the height
Lets take a real world example for Facebook (470*246), I want my image to have a width of 600 pixels, so 600 / 1.92 = 313
So the height is 313 pixels and width is 600.
I’m lazy and just want to create one image for all
Ok so your really lazy or want to be effective for all platforms and all devices.
Lets first talk about the meta tags.
Facebook and Google are both able to understand the meta tags Open Graph and Schema.org. Which means if your really want to, you can stick with one of them. But Twitter needs its own meta tags for it to work.
Time for the image size.
Now that we have covered the meta tags options, what would the best image size be, if I would only want to create one image to fit for all social media platforms.
Based on all dimensions the best aspect ratio would be 1.78 with a top and bottom padding of 6%. The reason for added padding is to ensure that all social platforms don’t cut off your important imaging.
But we are not finished just yet, we have to support our mobile users. Currently all links that you share on social platforms will have an image thumbnail that is square.
Below you can find a sample image size with a width of 1000 pixels and an aspect ratio of 1.78
- Color Blue = the required padding, don’t add any styling that must be seen by all social platforms
- Colors Red + White = the area visible to all desktop devices
- Color White = the area visible to all small screen mobile devices
As much as I want to be as accurate as possible, there is always a chance that any of the listed social platforms might redesign or change their image aspect ratio. If you find that something is inaccurate please let me know. As I will update this article immediately.