Tips when naming images for SEO

Quite often we forget that the average joe client, doesn’t have a clue how to do something as simple to us, as naming their images. I have spent many hours renaming images, working much harder than most clients are willing to pay me for, so I decided to start telling them that I want images named correctly, quickly finding out that there’s a lot more to this than even I thought as I watched my Dropbox update with new advice I gave them.

Let’s start with a few rules:

  • No spaces
  • lowercase
  • Use hyphens instead of underscore to separate words, underscore cannot be viewed when a URL is underlined
  • No full-stop in the name, only before the extension .jpg
  • Don’t abbreviate
  • Only letters and numbers
  • Numbers should at least be double digits 01 – 09 if lower than 10
  • Don’t start naming with numbers, they usually only represent the numerical order of an image
  • Abbreviations can be used at the end for things like thumb nail = tn or large lg etc but purely as reference for your developer
  • No more than 50 characters long
  • The main image types supported by browsers are .png .jpg and .gif

This is how correct image naming looks like

product-name-01.jpg or product-name-tn.jpg

A few tips when working with images for the web

  • Use the progressive setting when saving in Photoshop to ensure that it shows something, rather than loads in bits on a page
  • Use img {max-width: 100%;} when doing responsive designs to scale proportionately
  • Thumb nails don’t need to show the entire image, zoom into something that is obvious and makes sense to the user
  • You must give your images a description
    <img src=”image-name.jpg” alt=”The image must have a description for better SEO” />

These are just a few tips, if you have more suggestions, please feel free to share