Photoshop Tutorials:  Naming Conventions for Web Graphics

Good naming conventions for the images that will go into your web pages are important.  Appropriate names help in easier maintenance of your web pages and in your being able to identify all the graphics that make up your web pages.

Some naming tips to keep in mind:

• Names of the graphics should say something about the purpose of it on the page.
  For example, a graphic used for a button to an About Us page can have the name: bttn_AboutUs
  For a graphic used as the title for an About Us page, use:  title_AboutUs
  
• Include the graphic's location in its name.
  If the button "About Us " is in a top navigation bar, it can be named:  bttn_top_AboutUS  
  If a button "Products" is in a navigation bar on the left side of your web page, name it: bttn_left_Products
  
• Include the web page name in the graphic's name: "photo1_home"  or "photo3_aboutus"
  
• If the graphic's name contains more than one word, DO NOT leave blank spaces within the name.  Many web hosts/servers, and even older browsers, will not be able to display the graphic at all if there are spaces left in the file name. You should use the underscore to separate words:  top_logo  or  title_welcome.
  
• Try to be as consistent as possible; find a naming convention that makes sense to you and stick with it throughout all the graphics in your web site.

 

Table of Contents