What is best way to manage all images in a big project, inline images, background images, css sprite images?

Question

How do you manage all images in a big project, inline images, background images, css sprite images?

Do you follow any naming convention? Do you create sub-folders to manage images?

In a big project how to make it easy to find for new people in the development team if any images which they want to use (because it's in new PSD they received from designer) is already available in images folder of project and how they can find it easily.

Answer 1

In my largest project that has over 42 different languages, I group my images as follows:

Images

• en
  • header
  • form
  • common
  • etc..
• fr
  • header
  • form
  • common
  • etc..

I try not to make too many folders because then it becomes just as complicated, but creating a few different folders that break up in key spots makes it really easy to find images quickly.

Answer 2

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...

1. It's easier to reference the images when the path is always the same.
2. The images will always be grouped appropriately in your directories when you view them.
3. 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.