For my projects, I like to rely on strict naming conventions, usually dictated by the type of image and or location it will be used, starting with the broadest category on the left separating those by hyphens and then using an underscore before any numbers in the case of multiples. I for three main reasons...
- It's easier to reference the images when the path is always the same.
- The images will always be grouped appropriately in your directories when you view them.
- I like the consistency of the hyphens '-' between words and underscores '_' before numbers when writing javascript to manipulate image states.
examples would be:
Home-infographic_01.png
Home-infographic_02.png
Home-infographic_03.png
I also tend to name images according to what I may call it's element or container in a css file. So, for a container that I will use on every page that has a special repeating top image, I will name the class and image something like...
.containerTop { background-image: url('../images/containerTop.png'); }
and if there is going to be a modified version for any sub page then i'd append that after the class name in the image like so.
containerTop-about.png
This seems to work pretty well for me, but I'm always modifying my process and trying new things to make it better. There really isn't a "right" answer for this, but I hope mine can help.