📚 This post is part of my business blogging guide.
Here’s how to get the image sizing right on your website, along with some free tools and resources to help you find and use the right images.
- Hero image sizes and safe area dimensions
- How do I check the sizes of my images?
- Which image sizes work best on social media?
- Including hero images when sharing links on social media
- Where can I download free images?
- How can I create images for free?
- How can I make my images load faster?
- Let’s wrap up
If you write a blog, the most important image is the one that’s most often splashed across the top of the page – the so-called ‘hero’ image. I’ve got one of these at the top of this post, for example.
When your blogs are shared on social platforms such as Facebook, Twitter and LinkedIn, it’s good for them to include the hero image, as that makes the content more appealing than a plain and boring link.
You can make sure your social shares include an image by using the Yoast SEO plugin covered below.
But what about the hero image itself? How big should that be?
Hero image sizes and safe area dimensions
Your hero image should be this size:
Hero image size
You should keep your important content away from the edges. Otherwise, you might see that parts of the image are clipped off when the content is shared on social media.
Safe area inside hero images
Here’s what that looks like:
Feel free to save the image and use it for comparison with your own images.
If you know how to use Photoshop, you can download this PSD original instead.
Once you’ve got the image you want, you can insert it at the top of your post or, if your blog theme supports it, set it as a ‘Featured Image’ for the post.
How do I check the sizes of my images?
I’ve covered how to check pixel sizes in macOS, Windows and on the web in How do I check image dimensions?
Do you write a blog? Make your hero images 1200×630 pixels. This size works well on Facebook, Twitter and LinkedIn.#UnclogYourBlog
— John Espirian (@espirian) August 18, 2017
Which image sizes work best on social media?
If you want to post images directly on social media, here are some sample sizes that work well:
- LinkedIn profile banner:
- LinkedIn image posts:
- LinkedIn article covers:
- Twitter profile banner:
- Twitter image posts:
- Facebook image posts:
- Instagram square:
- Instagram vertical:
- Instagram horizontal:
About LinkedIn article images
LinkedIn articles look good with a landscape cover image, but the cover image preview is presented on your profile page in square format, which means it’s best to keep the important information in a
630×630 square in the middle of the
1200×630 image (see more).
About Facebook and Instagram images
Instagram and Facebook work well with square images, e.g.
But … both platforms support landscape images (e.g.
1024×576 pixels), and things can get a little messy because of display adjustments that are based on the orientation of your device.
Take a look at this Buffer post for more on this.
Including hero images when sharing links on social media
If you use WordPress, you can include the right hero image whenever you post a blog link on social media.
To do that, install the Yoast SEO plug-in on your WordPress website. This will add an extra panel at the bottom of your WordPress editor.
As well as its other search engine optimisation (SEO) features, the Yoast plug-in lets you nominate the image you want to associate with each blog post, so that social shares include that image with the link.
The free version of Yoast doesn’t display a preview of the image in your WordPress editor, but that doesn’t matter if you’ve followed the sizing guidelines above.
Below is a screenshot of the premium version of Yoast, which does display a preview:
Where can I download free images?
Knowing your dimensions is all well and good, but what if you’re struggling to find some good images to begin with? Try these free resources:
Want even more? Check out Col Gray’s list of 35 free stock photo sites.
How can I create images for free?
If you want to create your own images for social media and your blogs, check out these free services:
- Canva – probably the world’s most popular image-creation tool.
- Pablo – perhaps not as powerful as Canva, but it’s easier to use (and it’s made by Buffer, who are cool).
- Fotor – not one I’ve tried myself but looks good and has been recommended to me by a colleague.
How can I make my images load faster?
It’s important to optimise your images to reduce their file size. The smaller the files, the quicker the loading time, which means a better user experience for your visitors.
Try these free image-optimisation tools. You won’t notice any difference in the image quality, but the file sizes will decrease.
- ImageOptim – macOS.
- PNGGauntlet – Windows.
- TinyPNG – WordPress and Photoshop plugin.
Let’s wrap up
Good images will help your blog posts stand out, and using dimensions of
1200×630 pixels for your hero images means that your visuals will work well when your posts are shared on most social platforms.
If you use WordPress, make sure to add the Yoast SEO plug-in to make it easy to associate your social posts with your hero images.
Continue the business blogging guide
This post is part of my definitive business blogging guide.
Need business blogging help?
What if you don't have the time, energy or expertise to write your own business blog posts? That's where I come in.
From my home office, I work with business owners like you to produce in-depth content that explains how your products, services and processes work.
Want to build trust with your web visitors and get them to take action? We need to talk.
Email me now for a free, no-obligation quote.
Want relentlessly helpful emails? Join Espresso ☕️
Who wrote this?
John Espirian – the relentlessly helpful technical copywriter
I write B2B web content, blogs, user guides and case studies – all aimed at explaining how your products, services and processes work. I also offer LinkedIn profile critiquing and rewriting.
I work from home in Newport, South Wales and support the (formerly) mighty Liverpool FC 🔴⚽️