File-Naming Conventions

In order to maintain compatibility across devices and platforms, filenames should be in lowercase with no spaces or special characters (including foreign language accented characters).  Utilize either dashes (-) or underscores (_) in filenames in lieu of spaces.  (You can alternate between the two to distinguish the type of data included in the filename.) 

In the case that you want to include the crop size of an image in your filename or language translation, it is recommended you suffix the name with the additional data (ie. dimensions in pixels—width, then height, or  language by standard language code).  For example:

  • eiffel-tower_480x320.jpg (indicates the actual width and height of the image in pixels)
  • instruction-manual_en.pdf or instruction-manual_es.pdf (indicates english and espanol versions)

When naming a set of images that share a common purpose but represent different states of user interaction [UI], try to name them similarly and intuitively.  For example, consider the images for a rollover or hover state of a call to action button:

  • button-normal.png,  button-up.png
  • button-hover.png,  button-over.png
  • button-pressed.png,  button-down.png

In the case that you are replacing an existing image on a website,  please save your revision or replacement image with the same filename as the existing website image- this makes for the quickest image replacement/update on the site.  You can generally right click and inspect the properties of an image or the css to find a background image filename.

Recently Updated in Web Accessibility (WCAG)

Updated Documentation Section Author/Editor
Fri, 10/05/2018 - 13:53 Web Accessibility (WCAG) >Web Accessibility (WCAG) >Heading tags kelseyleljedal
Fri, 10/05/2018 - 13:53 Web Accessibility (WCAG) >Web Accessibility (WCAG) >Clear Text for Instructions and Links kelseyleljedal
Fri, 10/05/2018 - 13:52 Web Accessibility (WCAG) >Web Accessibility (WCAG) >Alt Text for Images and Photos kelseyleljedal
Fri, 10/05/2018 - 13:43 Web Accessibility (WCAG) >Web Accessibility (WCAG) kelseyleljedal
Wed, 10/11/2017 - 11:02 Web Accessibility (WCAG) >Preparing Documents for the Web >Save with Search in Mind ansonwhan