Image File Naming Guidelines

March 20, 2012

Naming your image files clearly and consistently can make a developer's life a lot easier, so I wrote out a few of the guidelines I follow when naming my image files:

• Use dashes between words instead of underscores, mostly for SEO reasons, as dashes are read as spaces and underscores are not.
• All button image names start with "button-" this will group all your buttons together in an alphabetized list.
• Hover state image names end with "-hover" ending instead of starting with hover insures that the hover and normal states are still grouped together in an alphabetized list.
• Active state image names end with "-active" same grouping technique as with hover.
• All form image names start with "input-" same grouping technique as with buttons.
• All background images names end with "-bg"same grouping technique as with hover and active.

I'm sure there are a ton more conventions for naming image files and I invite you to email me your suggestions!