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