The right image will attract attention to your webpage and add impact to your content.

But images can also be great for search engine optimisation – making your content more searchable and shareable – if you know how to make the most of them.

Use these tips to get the most value from the images on your website.

Make sure your images are pulling their SEO weight on the page, as well as working hard as brand ambassadors off page in places like Google Images and on social networks. How? Read on.

Step 1: Choose your image carefully

Extensive studies of user behaviour have shown there is a big difference to the way a user responds to images. Feel good, decorative images are often glanced over, while real, relevant images are extensively scrutinised. An example here might be the difference between using an image of real staff, as opposed to the buff models of stock photography. Head over to NN group for more details on this.

On a movie set, lining up the perfect shot

On a movie set, lining up the perfect shot. Photo by Jonathan Kos-Read

Consider what the image says as much as how it looks, and it will help you decide which to choose. Ask around for the opinion of others, too – it’s a fun one to experiment with.

Step 2: Reduce file size to avoid slowing down your page loading time

Search engines certainly reward pages which load quickly, spurred on by the knowledge that users lose patience with slow loading websites. Don’t undo your good SEO work by uploading three pictures to a post that weigh in at 5MB each.

Instead resize the image and upload with a smaller file size that still presents the image at a reasonable quality. If you’re using a program like Photoshop, it’s easy to select the ‘Save for Web’ option in the menu. This option is also available on the free online version of Photoshop.

Reducing the image quality will go a long way to reducing load time without having to resort to just uploading tiny little thumbnail-sized pictures. This can become counter-productive as this can affect the shareability of your content (see step 6 for more on social sharing).

Step 3: Give it a relevant file name

Ok, this step would seem like a no-brainer, but it’s amazing how many websites have images named SNC00373.jpg uploaded when they could be called something relevant like ladies-vneck-tee.jpg. We may think no one will ever see the files, but if this is the only information you’re telling the internet’s librarians, then it’s never going to be found. Plus if a user runs an image search and does come across it, the file name is actually there for all to see.

Step 4: Write relevant, searchable ‘alt tags’

Alt tags are descriptions of images that serve two main purposes:

  • One is to provide a fallback description of the image, particularly useful for web users with visual impairment or  limited bandwidth.
  • The other is to indicate to search engines what the image is about, as searchbots don’t have the power of sight.

Alt tags aren’t essential, but they are highly recommended. If you’d rather not code, you can just look for the the ‘alt’ field when uploading your image to your content management system (CMS).

Ideally, when entering alt tag descriptions for your image, you want to aim to create an accurate description of the image using words that people are likely to use search. Google gives us its own example of alt tag best practice:

Not good: (alt tag missing)

<img src="puppy.jpg" alt=""/>

Better: (alt tag present, but not specific)

<img src="puppy.jpg" alt="puppy"/>

Best: (brief and descriptive)

<img src="puppy.jpg" alt="Dalmatian puppy playing fetch"> 

To be avoided: (keyword stuffing)

<img src="puppy.jpg" alt="puppy dog baby 
dog pup pups puppies doggies pups litter puppies dog retriever 
 labrador wolfhound setter pointer puppy jack russell terrier 
puppies dog food cheap dogfood puppy food"/>
Dalmation puppy playing fetch

Alt text describes what’s happening in a picture – for sight affected users and searchbots alike.

Step 5: Captions & Title tags

Google doesn’t appear to place the same level of importance on image title and caption as it does on alt text, but it’s still a great opportunity to provide useful, relevant content here for both your users and the search bots assessing your page. It’s not all about repeating the same keyword phrase over and over though – use natural variations of the phrase, and include related secondary keyword phrases for that page.

Step 6: Optimise images for sharing

If someone would like to share your webpage on social media, it’s a real turn off if an image doesn’t come across with the link – or worse, the image that is scraped is something random like an overblown social media symbol.

People like to share links with great images and link descriptions. Make sure your links are worth sharing. Run your link through the Facebook Debug tool before your page goes live, to see how your link is likely to appear on Facebook.

Trial and error indicates that as long as you’ve got an image on your page that’s bigger than about 600 x 400px, there’s a good chance that Google, Facebook, Twitter, Pinterest or any other social site will pick up the image to use when scraping your page for content, and that it will appear at a reasonable resolution in a news feed. Even 200 x 200px should get you over the line.

Given the wide range of preferences each of these sites have for image dimensions (here’s a social media image size infographic if you’re interested) your image may not appear optimally in all feeds. For some images, random cropping is not going to ruin the shot (let’s say a field of flowers). If you want a more carefully orchestrated result, then it’s well worth taking a look at implementing structured social sharing.

Structured social sharing has developed to allow content to be shared optimally across platforms. Facebook’s Open Graph (og) tags are one of the better known sets of structured data. You can read some best practices for setting up Open Graph tags over on Facebook.

CMS plugins such as Yoast for WordPress or WP Facebook Open Graph Protocol can set up og: tags for you. Yoast can also set up structured data for other popular platforms such as Twitter and  Google+. Or if you have a programmer on your team, then buy them a coffee and start talking. Templates are available to download free to streamline the process.

Images can do so much for your webpage. Have fun with yours, and we’d love to hear from you if you’ve discovered something comment-worthy in your investigations of image optimisation.