Images. One of the most important features of your website, and one of the trickiest to get right. Below I’ll go through the list you need to tick with each image on your site.
Where do I get great images?
The best thing is to create your own images. Your smartphone can be a great photographer buddy. You can invest in a professional photographer to take some photos of you for the website, and of the things that make up your business, be it service or product based. Or ask a patient friend you feel comfortable with, chances are you need to take a lot of shots to get some great ones.
I get it though. We can’t all afford professionals when we’re starting out. And we’re not all brilliant photographers. We’re not all flatlaying like a boss and able to place that succulent just right on our pristine desks. Sometimes (or most of the time, let’s be honest here) it would be nice to just have some great images to play with.
Fear not! They exist. For free!
Unsplash is a weird new thing where photographers are letting us mere mortals use their divine images, copyright free and for absolutely gratis. You can also buy stock images at Shutterstock for example, or Adobe Stock. Just google stock images and you’ll find a ton of paid options.
Here’s what you don’t do. Find an incredible image on Pinterest/Google and use it on your site. It’s not enough to state somewhere, image source Pinterest. You can end up with a fine and possibly legal action so please make sure you know where your images came from, and that you are allowed to use them.
Images and SEO
Size
Ok, so you’ve got some great images. Now don’t be tempted to just upload these on your website. They need a bit of preparation first. They’re going to need to be re-sized and ideally, the quality should be lowered.
There are a few ways we can do this. If you’re on a Mac, you can use Preview for this. See this article. If you’re on a PC, see this article. You can also use the free version of PicMonkey
The largest computer screen is 1920px (pixels) across. Full screen images don’t need to be any wider than this, and seeing that lots/most people will view your website on a phone or a tablet, I normally make full-screen images 1400px wide. This way you keep the file size down, and the image stretching to fit the screen that extra width on a larger screen is hardly noticable in the image quality.
If you’re using images in a blog post, they generally don’t need to be wider than 800px.
Ideally, we should get the images down to 100KB or lower. This can be tricky without the proper tools, but a good rule of thumb is to keep them under 500KB and never ever over 1MB. Saving as a .jpg rather than a .png will reduce the size further.
A great way to reduce the file size even further is to run the image through Tiny PNG before you upload it to your site.
Naming files
First we need to name the file something that makes sense. We don’t want DSC98734.jpg EVER.
Google reads this information so we need to make sure it knows what it’s looking at. Remember Google doesn’t have eyes. Name the file before you upload it to the site.
Call it a descriptive name of what the image is, if it’s a reindeer walking on a beach at sunset, call it reindeer beach sunset.jpg or reindeer-sunset-beach.jpg, the keyword here being reindeer.
Place the keyword first but make sure it relates to the text in the article or page. Have you ever clicked on the images tab in Google search when you’re searching for something? That’s where your images could be showing up, driving traffic to your site.
I recommend you save them into folders on your computer so they’re easy to find. Have a folder called My Blog/Business and create new folders for each section. Front page images, Blog posts, then folders in this for your categories etc. If you start out organised you will save yourself a lot of time down the track.
Alt text and Captions
The alt text describes the image when it can’t be displayed to the visitor.
Wikipedia says: “In situations where the image is not available to the reader, perhaps because they have turned off images in their web browser or are using a screen reader due to a visual impairment, the alternative text ensures that no information or functionality is lost.”
Always add alt texts to your images. The alt text should include the keyword for that page and it should describe the image.
If you’re on WordPress, using the Yoast SEO plugin will very niftily tell you if you’ve missed doing this.
Captions are great to add a bit of extra information. Lots of people skim read articles and the images stand out to our brains. The captions are often the main thing read when skimming. Now, you don’t have to add captions to all images in your blog posts or articles, just when it makes sense to the reader.
A general point here: Always have the reader in mind. It’s easy to get lost in technical terms and there are more and more how-to guides to get more people to your site with tricks and magic. By all means, learn all you can! But in the end, it’s about you and your content connecting with another human being.
Sharing on social media
If you want to change the image that’s shown when you share on Facebook or Twitter you can do so in the Yoast settings, just click the icon underneath the traffic light icon to the left of the Yoast box. If you have trouble with the wrong image shared go to the Facebook debugger here.
Summary:
- Use images that are a good match for what your blog post or article is about
- Name your image file with a descriptive name and include the keyword in at least one image in the post
- Make sure the dimensions of the image (pixel size) is as small as it can be and still fills the space/looks good
- Reduce the file size for faster loading with tinypng.com
- Add captions if suitable, for skim reading of the post
- Use an image alt text on all images
