When saving images for web usage it is important to adhere to a naming convention or folder structure to keep your files in a logical order. When working on large web designs you can quickly lose track of file names and where they were saved. I thought I would share the convention I am currently using to organise my images.

  • /img/ – All images are saved in here
  • /img/fav.ico – My favicon
  • /img/btn/ – any <input/>, <button> related images
  • /img/icon/ – any icons
  • /img/layout/ – any background images relating to page structure
  • /img/sections/ – images specifically relevant to a page or section of the site, usually with sub-folders for each page/section
  • /img/misc/ – any other images

As well as these folders I also like to name image files using prefixes. An example of this is icon-help.gif, bg-sidebar.gif, btn-approve.gif. I find that by using this structure and image prefixes I save a lot of time trying to remember where certain things are saved when I am writing my CSS and HTML.

As well as saving time when writing the code it also provides a baseline when re-using CSS code. I can just save the image using my convention and the CSS can already be written.

It would be good to hear other ways and ideas of naming images.