3 Image Optimization Techniques & How to Name Image Files

Share on twitter
Share on facebook
Share on linkedin
Share on reddit
Share on pinterest
Share on twitter
Share on facebook
Share on linkedin
Share on reddit
Share on pinterest


Learn some key image optimization techniques to enhance your site's SEO through improved inclusion in image search and Universal search, as well as greater usability for disabled visitors who need a screen reader to view your content.

# Full Post

Images present a very unique problem webcrawlers. A search engine webcrawler doesn’t have the ability to view and image on the web and inherently know what that image is depicting. In other words, unless we (the webmasters and SEO’s) help them out, they are blind as a bat!

There are many benefits to optimizing your site’s images, including inclusion into the image directories (which sometimes get injected into search results), and usability for disabled visitors who need a screen reader to view your content. Why wouldn’t you want this kind of extra exposure?

Images Injected Into SERPs

For good measure, try going to a website – any website. Be sure that it has images present that aren’t a part of the CSS styling, as those images don’t apply here. Now in your browser (if you’re using Firefox) click Tools > Content and disable Java, Javascript, and Automatic Image Loading (in IE it should be under Tools > Advanced somewhere). Refresh your screen and you should see what a search engine sees.

I’ve picked a random site off the web as an example:

What you see (JavaScript enabled):

Browser with Javascript Enabled

What a search engine sees (JavaScript disabled):

Browser Without Javascript Enabled

As you can see, the two screens look completely different – and the 2nd leaves nothing for webcrawlers to hang their hats on. That is, unless you help them understand.

The Top 3 Ways to Optimize Your Images

1. Ensure that every image has a Keyword-Rich Alt Attribute

Alt Text Example
The Alt attribute is a great way to give search engines descriptions of your site’s images, thus helping them get a better understanding of what your site and its images are about.

In case you don’t know what an Alt attribute looks like, try hovering over an image on your site. If it has an Alt attribute with keywords in it, then a little description with the text used in the Alt attribute should pop up over the image.

You need to make sure that every non-CSS based image on your website has an Alt attribute complete with description of what the image is depicting. This is a great opportunity to use some target keywords if the shoe fits.

For example, let’s say we have a picture of a bouquet of roses. Your alt attribute should look something like this.

<img src="https://jacobstoops.com/images/roses.jpg" width="100" height="100" alt="Bouquet of Red Roses">

Some good rules to follow when determining Alt text for your images:

  • Don’t use the Alt tag as a platform to stuff in your target keywords.
  • Only use Alt text that is a fairly accurate representation of what the image is depicting.
  • I prefer to keep Alt text short and sweet, but that’s your call

2. Ensure that you adhere to good file-naming conventions when creating images

Adhering to solid file-naming conventions is also a good way to help webcrawlers understand a little bit more about what your site’s images are. What do I mean? Basically, when you’re creating your images and saving them, you should consider how you name them.

For example, let’s say you’ve made a picture of a “green apple”. This would be a bad way to name it:


Unless someone is searching for “0001AB” you’re up a creek with that name. However, if you use keywords when naming files then you could gain some value. For example:


Now they will know the picture is of a “green apple” and not “0001AB”. Here are some guidelines to follow when naming your image files:

  • Use relevant keywords.
  • Keep it short and sweet. This is not a place to spam keywords.
  • Seperate keywords with a dash (-) as your 1st option, and underscore as your 2nd (_). If you don’t separate your keywords, a search engine won’t know that “greenapple” is really two words.
  • DON’T leave spaces when naming your files, as they will show up looking like this green%20%apple.jpg in your URL. That’s not very pretty, and not very SEO-friendly.

3. Keep image size low to increase load speed

A webpage that has a lot of big images slowing it down simply will lot load very quickly, which may lead to a high bounce rate before a visitor even hits your site. Try to keep your sites images at or below a 30k file size if possible. Remember, images that load quickly = happy users!

That’s all for today. Happy optimizing!

Image credit: Buzzfeed

Jacob Stoops

Jacob Stoops

Long-time SEO and podcast host. Senior Manager at Search Discovery. Husband. Dad. Mob movie aficionado. @jacobstoops