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

@Barnes591

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.

Vote Up Vote Down

@Pope3001725

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.

Vote Up Vote Down