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.


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


  • 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 to come from the design system


  • jpg
  • png
  • gig


  • icon-help.gif
  • img-logo.gif
  • sprite-main_headlines.jpg
  • bg-gradient.gif


No comments:

Post a Comment