CORRECT IMAGE SIZE, DO YOU HAVE IT?
IMAGE SIZE: Everybody loves some visuals, especially when they can give your social media a significant boost.
But what is the right size for your images? How to improve their appearance?
In order to achieve this, you should focus on Size and Shape, they literally define how the picture will look on the web page.
Also, keep in mind that every social media has its own rules concerning images.
A general and quick overview
These are the recommended sizes for the social media we are going to analyse (all sizes are in pixels):
FACEBOOK – 1200 x 628
TWITTER – 1024 x 512
LINKEDIN – 800 x 800
GOOGLE+ – 800 x 1200
PINTEREST – 735 x 1102
INSTAGRAM – 1080 x 1080
A good starting point would be using the Horizontal (landscape, 1024 x 512) and Vertical (portrait, 800 x 1200) templates. Most of today’s image editing programs are perfectly suited for creating these 2 templates.
FB will scale the uploaded image according to its aspect ratio.
Here are some examples:
Horizontal: 1024 x 512 → 470 x 235
This applies to smaller images too, but they’ll look blurry due to upscaling.
Vertical: 500 x 700 → 281 x 394
Square: 800 x 800 → 400 x 400
Image previews for shared links → 470 x 246
Keep in mind that any image exceeding these dimensions will be cropped from the top to the bottom.
Facebook chooses the image by looking for the page’s Open Graph tags (og:image), which specify which image should be showed in FB’s news feed. The og:image tag can be manually written in the <head> section of every page of your website or you can let it be handled by a wordpress plugin.
If your link does not have the correct og:image tags or the picture is too small, FB will display it as a little 158 x 158 thumbnail, often regardless of the picture’s original aspect ratio. If the image is very tall (eg. infographics), it could be resized to 158 x 237. This could be very useful if that’s exactly what you wanted.
Twitter’s timeline images have a 506 x 253 resolution, meaning that they have a perfect 2:1 aspect ratio. Bigger images will be perfectly scaled and intact as long as the aspect ratio is 2:1.
Uploading a smaller image will result in a white space placed at the right of the picture. Images without a 2:1 aspect ratio will be cropped.
Luckily, Twitter’s cropping system is a bit more smart than FB’s one and will crop images according to their dominant visual elements.
For example (results may be different):
Let’s focus on two types that are more suited for content sharing:
- Summary Card
- Summary Card with large image
Sharing a URL from a site with the correct Twitter Card code allows the summary card to show headline, description, image and link all in one place.
This card pulls the information via HTML tags, usually the same used by Facebook.
A plugin can help you managing that.
Keep in mind these rules when you use standard summary cards:
- Minimum size of 120 x 120 and less than 1MB
- Expanded tweets with detail page will have their pictures cropped to a 4:3 aspect ratio and will be resized to 109 x 82
- Embed tweets will be cropped and resized to 120 x 120.
Summary card with large images should have pictures with a minimum resolution of 280 x 150 and less than 1MB in size.
In this case, all images will be scaled to fit a 506px width.
Landscapes and portraits will be automatically resized to 506 x … (height not fixed). Squares pictures will be scaled to 506 x 506.
Smaller images will be aligned to the left with white space filling the empty space to the right.
The cropping criteria here is a little different:
- Square and portraits are cropped from the bottom up
- Landscapes are cropped from the outside in.
Shared links and articles will have a thumbnail picture sized 180 x 110 px.
Directly uploaded images won’t exceed a width of 350 px and the height will be scaled accordingly.
Example: 700 x 349 → 350 x 197
LinkedIn Showcase Pages are an exception: thumbnails and featured images can be either 180 x 110 or 442 x 248.
LinkedIn uses the same Open Graph tags as Facebook and Twitter, so once you have optimized your site for them, you should be good for this one too.
Another way for sharing content on LinkedIn is to publish articles and make them appear on other people’s homepages with LinkedIn Pulse. As you might expect, this function also allows placing featured images in the articles.
The featured image on Pulse updates is 180 x 110 (yes the same as those used for link thumbnails). If the article is in the recommended list, the thumbnail will be 70 x 37.
Thumbnails in the left-hand column of the Pulse page will be 70 x 70.
The picture at the top of the article is 698 x 400.
Featured images for shared links won’t be wider than 426 px and the height will be scaled accordingly. This will also be applied to directly uploaded pictures.
Examples (both pictures are 426 px wide):
Just like all previous social media, G+ uses Open Graph tags. If these tags are not found, or the image is smaller than 426 x … , Google may switch it with a 150 x 150 thumbnail.
In some cases G+ will display pictures in full-width size. The photo will be 886 px wide and its original aspect ratio will be preserved.
Pinterest suggests an aspect ratio between 2:3 and 1:3.5 and minimum width of 600 px
2:3 → 600 x 900 or 800 x 1200
1:3.5 → 600 x 1200 or 800 x 2800
Pictures with a ratio over 1:3.5 will be cropped from the bottom up. An “Expand Pin” button will appear in the cropped area which will show the entire picture when clicked on.
That being said, there two more things to focus on: Feed images and Expanded Pinned images.
Feed images are 235 px wide and their aspect ratio will be preserved when scaled.
Pinned images will expand when you click on them and will be 736 px wide. Again, aspect ratio will be preserved.
Instagram is probably the easiest social media to deal with: all its images are square!
Feed (510 x 510)
Header (small → 204 x 204 or large → 409 x 409)
This concludes our small overview about image size in social media.
Keep in mind that social media are in constant evolution: by the time you read this, they may have already changed.