Image Naming Conventions

Posted on

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.

Want to discuss a project?

Talk to our Magento experts on 01785 279920

Request a callback