I read on an average day about 5-6 posts about web development, css, wordpress, etc. Something that I rarely see is posts about organizing your files. I think it’s partly due to the fact that most people have their own method of organization. It can be somewhat personal and there’s no definitive standard, but it is definitely needed when working on very large websites.

I would not say that the way I organize my image files is the best way. It may not be even the best method even for me. My method is what I have come up with after 6+ years of web design while working on websites have tens of thousands of image files. I am still learning and trying different ways to go about it.

In this post, I will show the way I organize image files and some other ways you can go about it yourself. So here we go.

1. Put the images in folders. This is an obvious point but you’d be amazed at the amount of websites that has every file for a site in the root directory. I’ve taken over maintaning a website like these too many times that I feel like I need to address this issue.
2. Put them in the right folders. I like to put images that are needed in the structure of the website or common elements, such as icons and buttons, in the images folder. Other images like product images goes in the product_images folder. Images that are related to the content go in a general folder called uploads or content_images. I rarely have to do this since I would usually upload the images to a photo sharing website like Flickr or I would let the CMS take care of these images.
3. Don’t make too many folders.  Don’t go too nuts creating folders to categorize each type of image. For example, don’t create a folder called red inside the folder buttons inside elements inside the images folder. Even though it only takes a split second to navigate through such file structure, it adds up when working with hundreds of images. Instead, reduce the amount of folders involved by following the next tips.
4. Adopt a naming convention. When naming your images, add a descriptive prefix. If you’re exporting a button called Buy Now, name it button-buy-now.png or whatever extension the file is. This way, all your buttons will be grouped when you list your image files alphabetically. Some people use btn- for the button prefix to reduce the length of the file name. I use bg- for my backgrounds and icon- for icons. I also name my headings like h1-, h2-, h3-, h4- and so on.
5. Name them what they are. When you’re looking for a specific file and there are too many files in a folder to view in thumbnail mode, I like to change the folder viewing mode to list mode. This wouldn’t be very helpful if you’re naming the files button1.jpg, block22.gif, blue-a.gif, etc. Name them according to what they are. If a button says “Add to Cart” name it something like button-add-to-cart.png. If the image is a background to a specific area, name it something like bg-sidebar.gif, so you know that you need to look in the backgrounds area of your folder and what area it’s a background for.
6. Be specific with your file names. Take it one step further after following the previous two tips. Be specific when naming your image files. If the image you’re saving is for all unordered lists in the header, name it bg-header-ul.gif.
7. Add a suffix. If there are alternate versions of a file, use suffixes. For example, if there is a smaller version of the Buy Now button and you already have an image called button-buy-now.png, name the smaller version button-buy-now-small.png.

CSS Sprites

CSS sprites is, in a way, an alternative to avoiding the headache of managing a large amount of image files. Basically, you have one image with all the images for a website on it and display them on  the layout using the background-position attribute in CSS. There are pros and cons of course. The pro is that you can manage your images all in one file. You would only have to open one file in Photoshop to edit any image. The second benefit is that your code stays clean and degrades well.

The cons are that you are using a lot of background positioning, the file size can get big and there are no images in your website. If you have a lot of elements on a single page of your website that will require you to size the image height and width and find the coordinates of the image is on your sprite image. This can get tedious for some. Not me though, I love measuring pixels, 1600% zoom mode in Photoshop is where I’m very happy. Also if you have a lot of elements that sprite is used for, the file size can get rather large and should be something look after. The last “con” is something that gets overlooked. If everything is being used as background images, there are no actual images on your website. I’m a firm believer that you need to have your call-to-action buttons (“Click Here”, “Buy Now”, “Learn More”) as images rather than a text link with image replacement. There are times when people browse with older browsers without full CSS support. An image stands out more then a text link even though it would degrade better. Another concern of mine is the rise of mobile web browser use. Ok, the iPhone’s Safari browser is pretty much browsing on a computer (without Flash), but people with a more primitive web browsers do not have full CSS support and an image stands out much better than a text link.