Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question
add comment

2 Answers

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.

share|improve this answer
    
do you keep background images and inline images in same folder? –  metal-gear-solid Sep 23 '12 at 3:00
    
do you mean inside of the header folder as an example? if so yes, if you mean you have a few different background images, i would create a sub folder for all the background images. –  endyourif Sep 23 '12 at 3:02
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.