Magento Imagine Awards 2019 Finalist

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 system (multiple front-ends, one back-end). This can be used to easily…

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

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

Call us on 01785 279920

Our friendly Magento experts are happy to answer your questions.

Follow us!

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

To find out more about how we use your data, read our Privacy Policy