This is a tutorial for bloggers and publishers who create content that people can share.
Everytime a webpage is shared to facebook, facebook automatically loads the images to display it in the post.
If you have ever tried this you know the problem. Most images are not designed for this usage and look crappy. Wrong format & blurred or fragmented images are the result – no one wants to share something like that!
Read on how make these images sharp and how to use og:image. With og:image you gain control which image will be used if a user is sharing your content.
The problem with images on facebook:
When an image is uploaded to facebook, the image runs trough filters. These filters comprimize the image to make it smaller. Facebook is doing this because they want to maintain a fast pagespeed. Reduced file sizes lead to lower server capacity.
If you upload an image it will be saved below 100kb automatically and your image may look blurred or fragmented:
This is a big problem when having text or logos on images. These elements lose extreme in quality.
Facebook itself is saying:
Just save your images as JPG’s and below 100kb. Also make sure to mark “keep high quality” when uploading the image.
But well, this does not help in most cases.
If you upload an image to facebook, you can see the exact result, delete it and try again. But when visitors share your content pages it is loaded automatically – this can be a problem if there are images in the post that do not fit for facebook.
The solution go create sharp images for facebook:
Please keep in mind that facebook is changing its algorithm and guidelines very often. Things that work in one month can be different in the next one. But I am doing good with the following tips and I get very good results.
1. Save the image as PNG
Do not save your images as JPG, save them as PNG. Like that you can dodge some filters of facebook. Facebook will convert the image as a JPG anyway, but will keep a better quality.
After saving it as a PNG, I highly recommend to run it through a PNG comprimizer like tinypng.com – just upload the PNG and see the magic happen. There are similar other prodcuts that can be used for this, but I like this one.
In the example below TinyPNG saved me 73% file size from 876kb to 236kb.
The filesize should be as low as possible. I had no issues with a huge image and any filesize. If you experience problems try to stay below 100kb or even 50kb.
2. Use the right dimensions
The exact size for a facebook share image is 600×315 pixel. Double the size to 1200x630px to stay sharper or even go up to 1900x1000px.
3. Test your image with the Open Graph Facebook Debugger
Afterwards you can test the share-image. For this the post must be published and online.
Open the Open Graph Facebook Debugger and fill in the url of the post.
It should look like this:
Using og:image to define which image should be used for sharing
It is quite simple to setup an og:image.
Just use the following code for a subpage or post:
<meta property="og:image" content="http://appdino.net/wp-content/uploads/supersharp-facebook-share-image.png">
If you are using wordpress I recommend using an SEO plugin like YOAST SEO or WPSEO (I am using the second one).
These plugins have the option to automatically add an url below the post, that will be used for the og:image.
There are also more options like which headline and text will be used when someone shares the post.
Hit the share button to see the image I created for this tutorial.
Feel free to share your experience in the comments. The steps to create sharp images also work for facebook post and cover images, but use the exact and correct pixel size for these.