At ee-web I get questions about naming images from clients a lot – so here’s a quick guide to help us get things done more quickly.
Naming Images for Websites
Why is it important?
Short answer – you have to balance technical requirements and the dreaded search engines.
All images on websites have to have an ‘alt’ tag. This is a short description of what the image shows and is part of the requirement for accessibility (for visually impaired users). Search engines use this as well so its REALLY important.
I create these alt tags based on the file names you give your images. So if you want me to create good alt tags for you, and you do, you must give the images good file names as per below. File names like ‘birthday cake 6.jpg’ or ‘img9918230.jpg’ just don’t describe your image.
Remember too that I am not an expert on your business – and sadly its hard for me to see what the really important part in an image often is – so your file names need to guide me.
Browsers are changing all the time but to be safe your files names should:
- Have no spaces in them
- Contain no special characters like %, @, #, < but you can use – and _
- Start with a small letter not a capitol (this is less important now)
- Contain information about the image
- Be short
The last two are a little bit ‘subjective’ to some extent of course.
Suppose you had an image of a soft toy puppy with the file name 12316124.jpg – you know that’s no good course so you change it to puppy.jpg – that better but not great. puppytoy.jpg is a little better but something like labradortoypuppy.jpg is even better. You could also have labrador-toy-puppy.jpg – you can use the – or even a _ in file names. From this I come up with the alt tag alt=”labrador toy puppy” – which is pretty good – you could even squeeze a little more juice from it as in blacklabradortoypuppy.jpg.
Some clients like to provide me with a separate document listing out very specific alt tags – this is fine too.
And of course the great thing about systems like joomla and wordpress is that you can always edit your alt tags later if you want to.