We've been shortlisted for the Northern Digital Awards

Image Naming Conventions

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.

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.


Subscribe via email

Sign up to get notifications of new posts by email.

Share this article

Posted in Development

Other posts you might like

Magento out of the box has many features such as the multi-store (multiple front-ends, one back-end) system which we are…

iWeb CSS developers are now using CSS sprites for adding graphical buttons and headings to websites, including the National STEM…

I joined iWeb just over seven months ago for my placement year as a front-end web developer. I’m documenting my…

Call us on 01785 279920

Our friendly Magento experts are happy to answer your questions.

Contact us now

Email alerts

Get the latest eCommerce news, reviews and expert advice in your inbox.