Image Optimization and Alt Text Best Practices

Article by: Matt Polsky

In this article, I'm going to run through the basics of image SEO and what best practices you can follow to earn more traffic to your site.

Image Optimization: Where to Begin?

Image optimization, like all things search, works best when you align your signals. E.g. image file, alt text, title attribute and caption (if applicable) all connects.

So, if I list a home for sale in Columbia, MO, I'd likely want the exterior image to be something like:

<img src="/homes/two-story-columbia-home.jpg" alt="Two story home with red shutters in Columbia, MO" title="Two story home for Sale" />

To break that down:

Save the image to the server with an appropriate URL
Add alt text descriptive of the image - including target keywords if possible
Add a title attribute that brings it all together

Notice how they all have a unified theme, but aren't duplicated.

Image Alt Text

Alt text describes the appearance or contents of an image file for users requiring a screen reader. This also displays when an image is broken or doesn't render.

Yes, this is an image search signal. No, don't keyword stuff.

Do what is best for the viewer and describe the image in detail. But more on that below.

Image Alt Text Best Practices

Alt text should be a natural language description of the image. I try to keep it under 8-10 words or around 60-80 characters in length, although 5 or 6 words is usually plenty.

Most CMS platforms have inputs for alt text. If yours doesn't, then format should look like the above example.

What to Avoid when Writing Alt Text

Alt text could be seen as the cross between a title tag and the anchor text.

This combination leads to some dos and don'ts and the most common don'ts include:

Don't stuff keywords

<img src="columbia-missouri-como-mo-65203-home-for-sale.jpg" alt="Columbia MO, COMO, 65203, Missouri Home for Sale | Residence for Sale | Homes Sales" />

Anytime you add a separator to plug more keywords, stop and rethink your life.

Limit the length

<img src="columbia-home-for-sale.jpg" alt="Thee bedroom two bathroom home for sale in the Columbia, Missouri area located in the south part of town next to the Break Time gas station that carries Big League Chew" />

This is overkill, and leads in to the next point...

Don't use alt tags out of context

In the previous example, you tell I went way off-base, going beyond what the image was about and into a load of other items that shouldn't be included.

Image Size

If your CMS doesn't do this for you, then be sure to reduce your image file sizes. Just because you downloaded a stock photo at 3600 x 2400, doesn't mean you should use that.

After reducing the size, compress it. There's many sites that do this for free, just Google "image compressor" and I'm sure you'll find one.

I use TinyPNG or Compressor.io on the one-offs, but there are paid tools out there that can handle entire libraries.

Reducing the file size helps you in more than just image search, but will help your site in general as it will load faster.

XML Sitemap

Another thing you can do is create an image sitemap or include them with your traditional sitemap file as a few of the major SEO plugins out there do.

The XML sitemap will get your images in front of crawlers quicker, so it's just a good idea to do.

srcset

Srcset is used for optimizing the delivery of an image across multiple screen resolutions.

Basically, you can display a different image, depending on the device, without jumping in your css file. This is pretty useful for hero images, but also very useful for in-content images that need a close-up when you're on a mobile device.

I haven't seen any bump in using srcset yet, but Google is constantly rewarding those who focus on the user, so it's worth keeping in your toolbox.

TL;DR

Use a relevant Image
Save the file with a concise, keyword rich name
Use ALT text to describe your image
Reduce image size and compress it
Use XML sitemaps