When it comes to SEO, you want to take advantage of every tool, of every SEO asset that you have.  Your images are an asset you can leverage for better SEO results.  The fact is, most websites do not have images optimized.  There are two main reasons for that.  The first is simply not knowing that it is important, and relevant, to SEO.  The second is that it is just plain easier to not bother.  Working with images can be time consuming, especially if you already have a bunch of images loaded to your site.

Search Engines such as Google do not interpret the graphical content of your images files.  They do not know that your picture of a red convertible is anything but a an assortment of pixels.  So, in keeping with the theme of making your site content blinding obvious to Google, we need to offer some assistance.

So, below we have listed our guidelines for image SEO optimization.

1. Image file name.  Probably the most important, and the easiest to work with, before you load up your images.  The proper time to properly name your image files is while the file is sitting on your hard drive.  If your phone is your camera, you will often end up with images named, image.jpg.  If you use a standard digital camera, you may have images named something like IMG_2301.JPG.  Google has no idea that this file is your red convertible, and that IMG_2302.JPG is your daughter playing on swings.  So BEFORE you upload the file, change the name to something descriptive and something unique (in respect to all the other images on your website).  “red-contvertible.jpg” would be a far better name.  Try to incorporate the primary keyword of the page into the file name, without going overboard.  If the page is about red cars, and you have other pictures of red cars on the page, a suitable name would be “red-cars-convertible.jpg”.

2. Use the files attributes to provide information about the image files.

  • Always add height and width to the image
  • Always add an Alt-attribute to the IMG-tag
  • Always add a Title-attribute to the IMG-tag

Using height and width tells the browsers how much space to allocate for the image in the page rendering and prevents pages which bounce around on loading as images push the content around.  This is a better user experience.

The alt attribute was originally used to be displayed as text when a browser is set to not load images.  More importantly in a broadband world, if the image is a link, then the alt text is used by browsers as the link anchor text.  Additionally it is used by search engines as a hint towards the on-page content.

The title attribute is not generally used by search engines, but often will be displayed when a user mouses over an image.

3. Size the image for it’s use on the page.  If you have an image that is 1000 pixels x 400 pixels, and you shrink it down to 500 pixels by 200 pixels using html, you are simply distorting the image and slowing down your page load speed.  Page load speed is increasingly becoming a ranking signal in search engines.  Slower loading pages can get ranked lower.  This is reported to be even more important in the new “Mobile Friendly” rankings on Google.  Images over a cell network can dramatically increase the page load time.  If you need an image 500 pixels wide, use your image editing software to create the proper sized image.

4. Make the Image a Link.  If you have larger versions of images, for viewing full screen, link to them from the smaller image of thumbnail.  Where it makes sense, use images for navigation assistance.  Remember, the alt text attribute will be used as the anchor text in the link so make proper use of it.  In this case, the alt text should be relevant to the image you are displaying, but even more relevant to the page you are linking to.

5. Use the proper image format.  The larger the image, and the more complex the color range, the more important it is to use the jpg format, as opposed to the png format.  png image file format results in larger file sizes (more bytes) as colors are added and dimensions increase.  png files are an excellent choice for logos and icons, which often are positioned to overlay other images or backgrounds.  These files tend to be smaller, and the color schemes usually are monochromatic or are limited to only a few colours.  Use jpg files everywhere else.