Naming convention for img files

Mikes Notes

Here is a naming convention for images that the Content Management System will use. This was inspired by a StackOverflow post listed below in resources.

This has not gone into production yet.

Pattern

• {imageType}-{name}.{imageExtension}

{imageType}

• icon (e.g., question mark icon for help content)

• img (e.g., a header image inserted via <img /> element)

• button (e.g., a graphical submit button)

• bg (image is used as a background image in CSS)

• sprite (image is used as a background image in CSS and contains multiple "versions")

{name}

• Name to come from the design system

{imageExtension}

• jpg

• png

• gig

Examples

• icon-help.gif

• img-logo.gif

• sprite-main_headlines.jpg

• bg-gradient.gif

Resources

• https://stackoverflow.com/questions/2071687/naming-convention-for-assets-images-css-js